| Web Cartoon" by shlyapnikova | |
 | Contiene 40 íconos 48x48, en formato PNG. descargar |
 | |
| Icons for Designers | |
 | Contiene 10 íconos 64x64, en formato PNG. descargar |
 | |
| Social snow by sultan-design | |
 | Contiene 18 íconos 256x256, en formato PNG. descargar |
 | |
Loading |
Tiny Circleslider para jQuery |
Tiny Circleslider es un pequeño plugin para jQuery que genera un carrusel de imágenes circular.
No es nada complicado de utilizar tal como muestran en el ejemplo que podemos descargar pero, a la hora de personalizarlo, hay que emplear mucha aritmética. Todos esos detalles pueden verse en la página del autor así que me limito a mostrar lo elemental.
Obviamente necesitamos tener la librería agregada en el head de nuestra plantilla:
No es nada complicado de utilizar tal como muestran en el ejemplo que podemos descargar pero, a la hora de personalizarlo, hay que emplear mucha aritmética. Todos esos detalles pueden verse en la página del autor así que me limito a mostrar lo elemental.
Obviamente necesitamos tener la librería agregada en el head de nuestra plantilla:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>
Y luego, el script del plugin que podemos agregar, copiando el contenido del archivo jquery.tinycircleslider.min.js y pegándolo de este modo:
<script type='text/javascript'> //<![CDATA[ ... aquí pegamos el contenido del archivo ... //]]> </script>
Nos faltaría el CSS que ponemos debajo y que requiere el uso de tres imágenes que podemos descargar y alojar en el mismo Blogger: bg-rotatescroll.png, bg-rotatescroll2.png, bg-thumb.png:
<style>
#rotatescroll { /* es el rectángulo contenedor */
height: 300px;
position: relative;
width: 300px;
}
#rotatescroll .viewport { /* es el rectángulo que contiene las imágenes */
height: 300px;
position: relative;
margin: 0 auto;
overflow: hidden;
width: 300px
}
#rotatescroll .overview { /* es la lista con las imágenes */
left: 0;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
}
#rotatescroll .overview li { /* cada item de la lista */
float: left;
height: 300px;
position: relative;
width: 300px;
}
#rotatescroll .overlay { /* la imagen con el círculo se superpone a la lista */
background: transparent url(URL_bg-rotatescroll.png) no-repeat 0 0;
height: 300px;
left: 0;
position: absolute;
top: 0;
width:300px;
}
#rotatescroll .thumb { /* el círculo rojo que nos permite navegar */
background:transparent url(URL_bg-thumb.png) no-repeat 0 0;
cursor: pointer;
height: 26px;
left: 137px;
position: absolute;
top: -3px;
width: 26px;
z-index: 200;
}
#rotatescroll .dot { /* los puntos que indican ca posición de cada imagen */
background: transparent url(URL_bg-dot.png) no-repeat 0 0;
display: none;
height: 12px;
left: 155px;
position: absolute;
top: 3px;
width: 12px;
z-index: 100;
}
#rotatescroll .dot span { /* permanecen ocultos por defecto */
display: none;
}
</style>Ahora, el HTML que colocamos donde vayamos a mostrar el carrusel donde, las imágenes pueden ser enlaces o no:
<div id="rotatescroll">
<div class="viewport">
<ul class="overview">
<li><img src="URL:imagen1" /></li>
<li><img src="URL:imagen2" /></li>
<li><img src="URL:imagen3" /></li>
<li><img src="URL:imagen4" /></li>
<li><img src="URL:imagen5" /></li>
</ul>
</div>
<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>Eso es todo, y bastaría activar la función agregando algo así debajo del HTML:
<script type="text/javascript">
$(document).ready(function(){ $('#rotatescroll').tinycircleslider(); });
</script>Algunas opciones extras permiten definir si funcionará como un slideshow automático:
$('#rotatescroll').tinycircleslider({ interval: true });y hay otras opciones que se agregan, separándolas por comas:
snaptodots true si se mostrarán los puntos cuando se arrastran (por defecto es false)
hidedots false si no queremos que se muestren los puntos internos (por defecto es true)
intervaltim es el tiempo entre slides (por defecto 3500)
radius define el tamaño del círculo (por defecto es 140)
snaptodots true si se mostrarán los puntos cuando se arrastran (por defecto es false)
hidedots false si no queremos que se muestren los puntos internos (por defecto es true)
intervaltim es el tiempo entre slides (por defecto 3500)
radius define el tamaño del círculo (por defecto es 140)
Crear una galería de imágenes con JavaScript |
Eso de permutar imágenes, es lo que hace cualquier script de slideshows; lo hará de modo sencillo o lo hará de modo complejo pero, conceptualmente, hacen eso, usan JavaScript para cambiar una propiedad específica que es la que contiene la dirección URL de la imagen que estamos viendo.
Supongamos que diseñaramos algo así:
Supongamos que diseñaramos algo así:
<style>
div.demoSW {
margin: 0 auto;
position: relative;
text-align: center;
width: 326px;
}
div.demoSW img {
background-color: #FFF;
border: 3px solid #BBB;
height: 190px;
outline: 1px solid #FFF;
padding: 10px;
width: 300px;
}
div.demoSW span {
color: #EEE;
display: block;
font-family: Georgia;
font-size: 20px;
letter-spacing: -1px;
outline: 1px solid #444;
padding: 5px 0;
}
div.demoSW div a {
color: #AAA;
font-family: Georgia;
text-decoration: none;
}
div.demoSW div {
margin:5px 0 0 0;
}
div.demoSW div a:hover {
color:#FFF;
text-decoration: none;
}
</style>
<div class="demoSW">
<img id="misfotos" src="URL_imagen_1" />
<span id="mistextos"> la primera de las imagenes </span>
<div>
<a href="#"> anterior </a> | <a href="#"> siguiente </a>
</div>
</div>La idea es que cuando hagamos click en los enlaces anterior y siguiente, podamos navegar por otras imágenes y claro, así como está, no funcionará porque, como siempre, el tema es decirle al navegador cuáles son las imagenes que usaremos y para eso hay métodos diversos, dependiendo de ellos, nuestro script será más o menos flexible, podremos colocar uno solo de ellos por página o podremos colocar varios. Lo más simple, claro, es lo menos flexible pero así es la vida.
Lo que vamos a hacer entonces es usar un array que no es otra cosa que un conjunto de datos asociados a un nombre a los que podemos acceder con un índice. Muchas palabras raras pero veamos:
Lo que vamos a hacer entonces es usar un array que no es otra cosa que un conjunto de datos asociados a un nombre a los que podemos acceder con un índice. Muchas palabras raras pero veamos:
var meses = new Array(); meses[0] = "enero"; meses[1] = "febrero"; meses[2] = "marzo";
Son "variables" similares a las que utilizamos normalmente excepto que todas tienen el mismo nombre y se las diferencia por el número de orden que siempre comienza con cero.
No hace falta definirlas de ese modo, también podemos hacerlo en una sola línea:
No hace falta definirlas de ese modo, también podemos hacerlo en una sola línea:
var meses = new Array("enero","febrero","marzo");Así que, para este ejemplo, voy a usar dos arrays; la primera contendrá la dirección URL de una serie de imágenes y la segunda, los textos asociados a cada una de esas imágenes:
var foto = new Array(); foto[0] = "URL_imagen_1.png"; foto[1] = "URL_imagen_2.png"; foto[2] = "URL_imagen_3.png"; foto[3] = "URL_imagen_4.png"; foto[4] = "URL_imagen_5.png"; var texto = new Array(); texto[0] = "la primera de las imagenes"; texto[1] = "esta es la segunda"; texto[2] = "esta es al tercera"; texto[3] = "y casi vamos a terminar"; texto[4] = "la ultima de las imagenes";
Los arrays tienen muchas funciones y propiedades internas que podemos utilizar, ahora, nos limitaremos a una de ellas que es la que nos dice cuántos elementos tiene:
var cantidad = foto.length;
que en este caso nos dirá 5 ya que tenemos elementos numerados desde el cero al cuatro; es decir tenemos cinco imágenes y cinco textos.
Ahora, vamos a crear una función para manipular las etiquetas IMG y SPAN a las que hemos identificado como misfotos y mistextos con respectivos IDs. La llamaremos mover y le enviaremos un dato; para decirle que queremos ir hacia atrás le enviaremos un -1 y para decirle que queremos ir hacia adelante, le enviaremos un 1 así que mover(-1) debería mostrar la imagen anterior y mover(1) debería mostrar la imagen siguiente.
Pero necesitamos un dato más, debemos llevar la cuenta, saber cuál es la imagen que estamos viendo para poder saber cuál es la siguiente y cuál es la anterior así que la guardaremos en alguna parte y al inicio, su valor será cero ya que la imagen visible es la primera:
Ahora, vamos a crear una función para manipular las etiquetas IMG y SPAN a las que hemos identificado como misfotos y mistextos con respectivos IDs. La llamaremos mover y le enviaremos un dato; para decirle que queremos ir hacia atrás le enviaremos un -1 y para decirle que queremos ir hacia adelante, le enviaremos un 1 así que mover(-1) debería mostrar la imagen anterior y mover(1) debería mostrar la imagen siguiente.
Pero necesitamos un dato más, debemos llevar la cuenta, saber cuál es la imagen que estamos viendo para poder saber cuál es la siguiente y cuál es la anterior así que la guardaremos en alguna parte y al inicio, su valor será cero ya que la imagen visible es la primera:
var cualvemos = 0;
function mover(direccion) {
// accedemos al objeto que contiene la imagen
var laimagen = document.getElementById("misfotos");
// accedemos al objeto que contiene el texto
var eltexto = document.getElementById("mistextos");
// ¿cuál es el indice de la última imágenes en nuestra array?
var ultima = foto.length - 1; // en el ejemplo, será el 4
// antes de cambiar los datos, en un auxilar, verificamos cuál sería la imagen a mostrar
var auxiliar = cualvemos + direccion; // se sumará 1 o se restará 1 al índice
// si el resultado es menor que cero, le decimos que vaya al otro extremo y muestre la ultima
if(auxiliar < 0) { auxiliar = ultima; }
// si el resultado es mayor que la última, le decimos que vaya al otro extremo y muestre la primera
if(auxiliar > ultima) { auxiliar = 0; }
// listo, ahora ya podemos cambiar el dato sin problemas
cualvemos = auxiliar;
// ponemos la dirección URL de la imagen en la etiqueta IMG
laimagen.src = foto[cualvemos];
// ponemos el texto en la etiqueta SPAN
eltexto.innerHTML = texto[cualvemos];
}Así que, para que el ejemplo funcione, bastará entonces cambiar los enlaces y llamar a la función que acabamos de crear:
<a href="javascript:mover(-1);"> anterior </a> | <a href="javascript:mover(1);"> siguiente </a>
Algo más sobre expandir imágenes |
Hay cientos de formas de usar imágenes en miniatura y luego expandirlas; podemos emplear JavaScript, CSS o combinar ambas cosas pero, si no se quiere andar lidiando con muchos códigos y sofisticaciones, también podemos usar propiedades simples.
Así como width y height definen el ancho y alto de algún elemento, max-width y max-height nos permiten limitar esos tamaños y dar valores máximos. Por ejemplo, si desconocemos el tamaño de una imagen y queremos que no se desborde, basta establecer la propiedad max-width para que se muestre ... como pueda.
Funcionan igual que width y height así que no es necesario definir ambos datos, si establecemos max-width, la altura la calculará el navegador y será proporcional.; lo mismo ocurre si utilizamos max-height aunque a veces es necesario agregar ambas para insertar cosas en cierto contenedor que tiene un tamaño fijo.
Así como width y height definen el ancho y alto de algún elemento, max-width y max-height nos permiten limitar esos tamaños y dar valores máximos. Por ejemplo, si desconocemos el tamaño de una imagen y queremos que no se desborde, basta establecer la propiedad max-width para que se muestre ... como pueda.
Funcionan igual que width y height así que no es necesario definir ambos datos, si establecemos max-width, la altura la calculará el navegador y será proporcional.; lo mismo ocurre si utilizamos max-height aunque a veces es necesario agregar ambas para insertar cosas en cierto contenedor que tiene un tamaño fijo.
Aprovechando esto, podríamos crear una clase y usarla en una etiqueta IMG donde colocaremos la imagen con su tamaño original:
<img class="expa" src="URL_imagen_original" />
Y ahora, escribimos las reglas:
<style>
img.expa {
cursor: pointer;
max-width: 150px;
}
img.expa:hover {
max-width: none;
}
</style>La primera establece el tamaño máximo con que se mostrará la imagen y la segunda, elimina esa propiedad cuando ponemos el cursor encima.
StreamPad: Una barra para reproducir audio |
Conocía esta barra por haberla implementado en Tumblr pero, no tenía idea que también era posible agregarla en cualquier otro sitio, incluyendo Blogger.
Se trata de StreamPad y es muy práctica porque detecta de manera automática los archivos mp3 y permite reproducirlos. Eventualmente, deendiendo de los datos que tenga ese archio, mostrará información extra.
¿Que detecta? Cualquier enlace con audio.
Se trata de StreamPad y es muy práctica porque detecta de manera automática los archivos mp3 y permite reproducirlos. Eventualmente, deendiendo de los datos que tenga ese archio, mostrará información extra.
¿Que detecta? Cualquier enlace con audio.
Agregarla es simple, basa copiar y pegar el código del script en la plantilla, por ejemplo, en un elemento HTML que agreguemos y una serie de opciones elementales nos permiten personalizarla un poco, estableciendo los colores, los textos por defecto y habilitando o deshabilitando ciertos botones.
REFERENCIAS:makeuseof.com
Girando las cosas con CSS |
La idea que muestran en CSS Tricks es interesante pero, sólo funcionará en Chrome o Safari así que poco nos puede interesar al 95% de los los usuarios que no usamos esos navegadores; sin embargo, basándose en eso, podríamos intentar algo menos espectacular pero que funcione más o menos bien en todos.
Nos olvidamos de algunas cosas y vamos a crear un header "torcido" que se mueva un poco cuando ponemos el cursor encima.
El HTML es simple, en un rectángulo, agregamos dos títulos:
Nos olvidamos de algunas cosas y vamos a crear un header "torcido" que se mueva un poco cuando ponemos el cursor encima.
El HTML es simple, en un rectángulo, agregamos dos títulos:
<div id="demoBG"> <h1><span>header</span></h1> <h2><span>dando vueltas y vueltas</span></h2> </div>
Y ahora, el CSS:
<style>
#demoBG { /* el rectángulo */
margin: 20px auto;
width: 600px;
}
#demoBG h1, #demoBG h2 { /* los títulos */
border-bottom: 10px solid rgba(0, 0, 0, 0.1);
border-top: 10px solid rgba(0, 0, 0, 0.1);
position: relative;
}
#demoBG h1 span, #demoBG h2 span { /* los textos */
display: block;
position: relative;
}
#demoBG h1 { /* el título superior */
background: #FFF;
margin: 0;
position: relative;
text-align: center;
z-index: 200;
/* lo rotamos en los diferentes navegadores */
-moz-transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9975640502598242, M12=0.0697564737441253, M21=-0.0697564737441253, M22=0.9975640502598242);
}
#demoBG h1 span { /* el texto en si mismo */
color: CornflowerBlue;
font-family: Garamond;
font-size: 100px;
line-height: 100px;
text-transform: uppercase;
}
#demoBG h2 { /* el título inferior */
background: DarkRed;
margin: 0;
z-index: 100;
/* lo rotamos en los diferentes navegadores */
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
-o-transform: rotate(2deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9993908270190958, M12=-0.03489949670250097, M21=0.03489949670250097, M22=0.9993908270190958);
}
#demoBG h2 span { /* el texto en si mismo */
color: Tomato;
font-family: Comic Sans MS;
font-size: 50px;
line-height: 90px;
text-align: center;
}
#demoBG:hover > h1 { /* efecto hover sobre el título superior */
-moz-transform: rotate(4deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9975640502598242, M12=-0.0697564737441253, M21=0.0697564737441253, M22=0.9975640502598242);
}
#demoBG:hover > h2 { /* efecto hover sobre el título inferior */
-moz-transform: rotate(-2deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9993908270190958, M12=0.03489949670250097, M21=-0.03489949670250097, M22=0.9993908270190958);
}
</style>
