Nostalgia
Hace 1 mes
| [+/-] | Feliz Navidad |
| [+/-] | Regala Google Chrome por navidad |
"Compartir Google Chrome ahora es muy fácil. Así que si buscas ideas para tus regalos, ¿por qué no envuelves Google Chrome para regalo con nuestros envoltorios artísticos especiales, y regalas una navegación súper rápida? Google Chrome es tan fácil de usar que el encantará hasta a tu abuela."
| [+/-] | Efecto de nieve en el blog |
Este llamativo efecto de nieve se ha hecho muy conocido para la epoca de navidad, pero nunca está de más recordarlo:
Para agregarlo a la plantilla debemos buscar (Ctrl+f) la etiqueta </head> y justo antes de ella pegar:
El script lo puedes descargar desde aqui.
Demo: El efecto está funcioando en este blog.
Para agregarlo a la plantilla debemos buscar (Ctrl+f) la etiqueta </head> y justo antes de ella pegar:
<script type="text/javascript" src="snow.js"></script>
El script lo puedes descargar desde aqui.
Demo: El efecto está funcioando en este blog.
| [+/-] | Un header particular: nubes animadas #2 |
Como segunda parte de este post he querido mostrar como añadir el efecto para mover cada nube con tan sólo cogerla. La verdad es que no tiene mucha utilidad por si sola, pero logra distraer un poco, y he sabido de visitantes que se ponen a "jugar" con las nubes en Z-Graphics :)
El codigo html que ya teniamos es:
Lo primero que debemos hacer es (si es que no lo hemos hecho) agregar la libreria jQuery a la plantilla (justo antes de </head>):
O tambien podemos usar:
Despues de esto debemos agregar tambien los scripts del efecto:
Los dos archivos anteriores los puedes descargar de aqui: ui.core.js y ui.draggable.js. Puedes usar estas direcciones si no tienes donde alojar los scripts, pero te recomiendo que la cambies.
Despues de agregar las librerias creamos el efecto:
Y añadimos unos cuantos estilos a la clase "movible":
Por ultimo agregamos la clase movible, que es la que tiene el efecto, a las nubes. Para eso reemplazamos el código html que teniamos antes:
El codigo html que ya teniamos es:
<div id="nube1"><img src="images/nube.png" /></div>
<div id="nube2"><img src="images/nube2.png" /></div>
<div id="nube3"><img src="images/nube.png" /></div>
<div id="nube2"><img src="images/nube2.png" /></div>
<div id="nube3"><img src="images/nube.png" /></div>
Lo primero que debemos hacer es (si es que no lo hemos hecho) agregar la libreria jQuery a la plantilla (justo antes de </head>):
<script src="https://www.google.com/jsapi"></script>
<script>
google.load('jquery', '1.3.1');
</script>
O tambien podemos usar:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
Despues de esto debemos agregar tambien los scripts del efecto:
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.draggable.js"></script>
<script type="text/javascript" src="ui.draggable.js"></script>
Los dos archivos anteriores los puedes descargar de aqui: ui.core.js y ui.draggable.js. Puedes usar estas direcciones si no tienes donde alojar los scripts, pero te recomiendo que la cambies.
Despues de agregar las librerias creamos el efecto:
<script type="text/javascript">
$(function() {
$(".movible").draggable();
});
</script>
$(function() {
$(".movible").draggable();
});
</script>
Y añadimos unos cuantos estilos a la clase "movible":
<style type="text/css">
.movible {
cursor:url(images/hand.png), pointer;
position:absolute;
z-index:1;
}
</style>
.movible {
cursor:url(images/hand.png), pointer;
position:absolute;
z-index:1;
}
</style>
Por ultimo agregamos la clase movible, que es la que tiene el efecto, a las nubes. Para eso reemplazamos el código html que teniamos antes:
<div id="nube1"><img src="images/cloud.png" class="movible" /></div>
<div id="nube2"><img src="images/cloud2.png" class="movible" /></div>
<div id="nube3"><img src="images/cloud.png" class="movible" /></div>
<div id="nube2"><img src="images/cloud2.png" class="movible" /></div>
<div id="nube3"><img src="images/cloud.png" class="movible" /></div>
| Demo | Download .rar |
| [+/-] | e-referrer: ¿De donde provienen tus visitas? |
E-Referrer es una manera sencilla de conocer de donde provienen los visitantes de tu blog o página web.Para implementarlo sólo debes registrarte e indexar el codigo javascript que nos dan en un elemento del blog.
Puedes ver el ejemplo en la parte baja de la sidebar de este blog (referencias).
| [+/-] | Un header particular: nubes animadas #1 |
| Demo | Este particular efecto convierte la cabecera de nuestro blog/pagina web en un atractivo más. Acabo de implementarlo en Z-Graphics y he sabido de algunos visitantes que se ponen a jugar con las nubes :) (aunque en esta parte del tutorial solo explicaré cómo poner la animación). |
La libreria que vamos a utilizar para agregar movimiento se llama $fx y es de libre descarga. Lo primero que debemos hacer es bajarla a nuestro computador y subirla a cualquier servidor; una vez hecho esto se le debe añadir a la plantilla:
<script type="text/javascript" src="url-fx.js"></script>
Buscamos (Ctrl+f) la etiqueta: </head> y justo antes pegamos el siguiente código Javascript:
<script type="text/javascript">
var ani = {
var_nube1: {
type: 'left',
from: 5,
to: screen.availWidth,
step: 1,
delay: 50
},
var_nube2: {
type: 'left',
from: 0,
to: screen.availWidth,
step: 1,
delay: 100,
onstart: function(){
this.style.display = 'block';
}
},
var_nube3: {
type: 'left',
from: 600,
to: screen.availWidth,
step: 1,
delay: 100,
onstart: function(){
this.style.display = 'block';
}
},
};
function startAnimation(){
$fx('#nube1').fxAdd(ani.var_nube1).fxRun(null,-1);
$fx('#nube2').fxAdd(ani.var_nube2).fxRun(null,-1);
$fx('#nube3').fxAdd(ani.var_nube3).fxRun(null,-1);
}
</script>
Lo que acabamos de hacer es crear las cada una de las variables necesarias para cada nube, es decir definir el tipo de movimiento (de izquierda a derecha: left), desde donde debe iniciarse la animación, hasta donde deberá ir la animación: screen.availWidth que se refiere al ancho de la ventana, y la velocidad con la que se moverá la nube.
Seguido de este código debemos pegar también los estilos:
<style type="text/css"> #nube1{ position:absolute; top:5%; left:5%; width:125px; height:67px; filter:alpha(opacity=5); -moz-opacity:.5; opacity:.5 } #nube2{ position:absolute; top:10%;
left:15%; width:125px; height:67px; filter:alpha(opacity=7); -moz-opacity:.7; opacity:.7 } #nube3{ position:absolute; top:20%; right:5%; width:125px; height:67px; filter:alpha(opacity=7); -moz-opacity:.7; opacity:.7 } </style>
Para cada capa (#nube1, #nube2 y #nube3) se define un ancho (width), un alto (height) y una posición: top y left. si la animacion fuera de derecha a izquierda la posición no estaría dada por left sino por right. los atributos filter:alpha(opacity=7); -moz-opacity:.7; opacity:.7 se refieren a la opacidad de la capa, se definen tres porque no todos los navegadores usan el mismo.
La animación aparecerá donde ubiquemos las nubes, en este caso deberá ser en la cabecera del blog, pero como las hemos definido con posición absoluta podemos ponerlas justo debajo del <body>:
<div id="nube1"><img src="images/nube.png" /></div>
<div id="nube2"><img src="images/nube2.png" /></div>
<div id="nube3"><img src="images/nube.png" /></div>
<div id="nube2"><img src="images/nube2.png" /></div>
<div id="nube3"><img src="images/nube.png" /></div>
Una última cosa: para que la animación funcione debemos llamarla, los metodos los podemos encontrar en la documentación de la libreria pero para no entrar en complicaciones la llamaremos desde el body sustituyendo <body> por <body onload="startAnimation();">
| Demo | Download .rar |
| [+/-] | Lanzamiento de Z-Graphics en la www |
Desde hace algún tiempo he venido creyendo en Z-Graphics como un empresa, siempre quise utilizar lo poco que he aprendido durante mi experiencia en blogger para prestar servicios y expandir ideas por medio de la web. Hoy en dia esa idea ha evolucionado un poco, me he asociado con algunos amigos y compañeros y hoy es el gran dia: el dia en que lanzaremos www.z-graphics.us. ( 8 - Dic- 09 / 4:00 pm)
He estado un poco ocupado en su diseño y es en gran parte por esa razón que no he vuelto a postear tan seguido como antes, pero sería gratificante recibir opiniones, sugerencias y comentarios en general acerca de su diseño.
Toda ésta nueva experiencia me ha dejado también muchas ideas para explicar y traer al blog, asi que muy pronto seguiré publicando recursos para hacer un poco más llevadero nuestro sendero por blogger.
Para que se hagan una idea de su diseño les dejo una imagen del proceso de diseño en photoshop:
He estado un poco ocupado en su diseño y es en gran parte por esa razón que no he vuelto a postear tan seguido como antes, pero sería gratificante recibir opiniones, sugerencias y comentarios en general acerca de su diseño.
Toda ésta nueva experiencia me ha dejado también muchas ideas para explicar y traer al blog, asi que muy pronto seguiré publicando recursos para hacer un poco más llevadero nuestro sendero por blogger.
Para que se hagan una idea de su diseño les dejo una imagen del proceso de diseño en photoshop:
| [+/-] | Identificando navegadores |
Es muy común en estos días que cuando por fin hemos terminado de retocar nuestra pagina web o blog, la probemos en varios navegadores para ver como se visualiza en cada uno de ellos. El problema es que a veces los cambios son muy drásticos y seria bueno dar cierto aviso a nuestros visitantes.
La manera mas fácil de solucionarlo es con un script que nos permita identificar el navegador desde el cual se visita nuestra página y dependiendo de ello mostrar un mensaje o imagen. El siguiente script debemos ponerlo en donde queremos que aparezca el mensaje (puede ser cualquier etiqueta HTML como por ejemplo: imágenes y texto).
Donde el textoen azul representa cualquier mensaje que se nos ocurra, por ejemplo:
Y aqui dejo algunas imagenes por si resultan de tu agrado:
La manera mas fácil de solucionarlo es con un script que nos permita identificar el navegador desde el cual se visita nuestra página y dependiendo de ello mostrar un mensaje o imagen. El siguiente script debemos ponerlo en donde queremos que aparezca el mensaje (puede ser cualquier etiqueta HTML como por ejemplo: imágenes y texto).
<script type="text/javascript">
if (navegador == "Microsoft Internet Explorer"){
document.write('Aqui va lo que aparece en caso de ser Internet Explorer');
}
else{
if(is_chrome){
document.write('Aqui va lo que aparece en caso de ser Google Chrome');
}else{
//Verifico si es mozilla firefox
var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
if(is_firefox){
document.write('Aqui va lo que aparece en caso de ser Mozilla Firefox');
}
}
}
</script>
//verifico si es internet explorer
var navegador = navigator.appName;if (navegador == "Microsoft Internet Explorer"){
document.write('Aqui va lo que aparece en caso de ser Internet Explorer');
}
else{
//Verifico si es google chrome
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;if(is_chrome){
document.write('Aqui va lo que aparece en caso de ser Google Chrome');
}else{
//Verifico si es mozilla firefox
var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
if(is_firefox){
document.write('Aqui va lo que aparece en caso de ser Mozilla Firefox');
}
}
}
</script>
Donde el textoen azul representa cualquier mensaje que se nos ocurra, por ejemplo:
- Para mandar un un mensaje de alerta, cambiamos el document.write por alert y escribimos un mensaje.
- Si queremos mostrar un enlace (para descargar mozilla si es internet explorer, por ejemplo) debemos dejar el document.write y entre comillas '<a href="#tu-enlace>el texto o imagen</a>'.
Y aqui dejo algunas imagenes por si resultan de tu agrado:
| [+/-] | Plantillas blogger: AllBlogTools |
| [+/-] | FleXcroll: scrollbars personalizadas |
Antes que nada, quiero agradecer a todos por tenerme paciencia...han sido unos dias muy ocupados y lamentablemente no he podido mantener mi querido blog como siempre.
Hace unos dias Xabier me preguntaba como hacer que las scrollbars (las barras de desplazamiento de los navegadores) personalizados tambien se visualizen en mozilla y no solo en internet explorer. Me acordé que hace mucho trabajé con un script qu me lo permitió y he querido compartirlo debido a que los resultados son sorprendentes y que muy bien :)
Primero que todo debemos adjuntar a la plantilla el archivo javascript y el css de FleXcroll:
Despues de adjuntar el script y el css, lo primero será crear la capa (div) a la que le queremos agregar el scroll personalizado. En este ejmplo se llamará "miscroll". Es importante y no se debe olvidar que la capa debe tener como clase la palabra flexcroll.
A esta capa vamos a añadirle algunos estilos:
Donde la propiedad overflow determina si se aplica o no el scroll, en este caso (auto) las barras solo aparecen si el contenido es mayor a las dimensiones de la capa dadas en width (ancho) y height (alto).
Añadiendo un poco de texto nuestro ejemplo deberá verse asi:
Si quieres que tambien aparezca la barra horizontal hay que añadir dentro de miscroll otra capa con un ancho mayor, algo como esto:
y el html debe quedar asi:
nos debe quedar asi:
El creador, www.hesido.com, nos ofrece una cantidad de ejemplos en esta carpeta comprimida. Para cambiar la imagen de cada barra tendrás que modificar el archivo css llamado flexcrollstyles correspondiente en cada ejemplo.
Hace unos dias Xabier me preguntaba como hacer que las scrollbars (las barras de desplazamiento de los navegadores) personalizados tambien se visualizen en mozilla y no solo en internet explorer. Me acordé que hace mucho trabajé con un script qu me lo permitió y he querido compartirlo debido a que los resultados son sorprendentes y que muy bien :)
Primero que todo debemos adjuntar a la plantilla el archivo javascript y el css de FleXcroll:
<link href="url-flexcrollstyles.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src="url-flexcroll.js"></script>
<script type='text/javascript' src="url-flexcroll.js"></script>
Despues de adjuntar el script y el css, lo primero será crear la capa (div) a la que le queremos agregar el scroll personalizado. En este ejmplo se llamará "miscroll". Es importante y no se debe olvidar que la capa debe tener como clase la palabra flexcroll.
<div id="miscroll" class="flexcroll">
...el contenido debe ir aqui...
<div>
...el contenido debe ir aqui...
<div>
A esta capa vamos a añadirle algunos estilos:
#miscroll {
width: 200px;
height: 100px;
overflow: auto;
background: #D5EADE;
padding: 10px;
}
width: 200px;
height: 100px;
overflow: auto;
background: #D5EADE;
padding: 10px;
}
Donde la propiedad overflow determina si se aplica o no el scroll, en este caso (auto) las barras solo aparecen si el contenido es mayor a las dimensiones de la capa dadas en width (ancho) y height (alto).
Añadiendo un poco de texto nuestro ejemplo deberá verse asi:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.
Nullam lobortis, dui nec accumsan molestie, ligula libero porta urna, in tincidunt ante lacus ac diam. Vestibulum erat risus, scelerisque non, mattis sit amet, aliquet convallis, enim. Sed mattis. Phasellus tristique. Nullam metus ipsum, sagittis at, tempor non, consectetuer eget, massa. Curabitur metus lacus, fringilla ac, interdum condimentum, hendrerit non, est. Morbi iaculis. Aenean lacus lectus, lacinia eget, hendrerit id, imperdiet ac, nisl. Praesent metus. Morbi mi elit, lacinia fringilla, luctus ut, tempor at, diam. Nulla arcu nibh, condimentum fringilla, nonummy et, volutpat eget, orci. Suspendisse et dui. Integer eget lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse vitae odio. Sed risus nisl, mattis vitae, imperdiet et, semper nec, tellus. Quisque adipiscing, neque id faucibus fringilla, eros augue ultricies orci, quis tincidunt tortor elit gravida ligula. Suspendisse suscipit sem sit amet ipsum. Etiam elit.
Aenean ullamcorper leo a neque. Ut eros risus, ornare sed, luctus sit amet, mollis ut, nisl. Proin dui. Aliquam suscipit. Vestibulum nisl wisi, eleifend at, placerat et, lobortis vitae, dui. Nulla dapibus pretium nulla. In hac habitasse platea dictumst. Cras ultricies nisl eu est. Aliquam ultrices, orci in dapibus facilisis, tortor pede bibendum neque, eget vestibulum lectus wisi vitae orci. Phasellus quis metus. In turpis diam, varius in, pulvinar sit amet, commodo ut, wisi. Donec leo nibh, iaculis in, facilisis non, mollis eget, eros. Morbi sem.
Nunc sed arcu. Phasellus euismod tincidunt eros. Proin ac purus. In dictum ante vitae libero. Proin pede. Pellentesque tellus ipsum, semper quis, dapibus eget, ultricies ac, pede. Aenean tristique tincidunt lorem. Aenean eget eros quis tellus tincidunt condimentum. Aliquam tempor, erat sit amet condimentum sagittis, ante sapien dapibus lectus, in tempor mauris sem non metus. Nam id orci. Nulla dignissim, felis in euismod tempor, neque turpis suscipit urna, id tristique mauris eros et dui.
Aliquam eget felis id elit congue tempus. Maecenas a velit. Sed egestas malesuada sapien. In sapien. Integer sit amet massa vitae justo vulputate viverra. Fusce suscipit, mi a lacinia lobortis, urna enim consectetuer risus, et ultrices ante nulla nec mauris. Integer pulvinar aliquet turpis. Phasellus fermentum diam at mauris. Ut nulla est, rhoncus sed, malesuada eget, rutrum ac, nunc. Curabitur in ante.
Aenean ullamcorper leo a neque. Ut eros risus, ornare sed, luctus sit amet, mollis ut, nisl. Proin dui. Aliquam suscipit. Vestibulum nisl wisi, eleifend at, placerat et, lobortis vitae, dui. Nulla dapibus pretium nulla. In hac habitasse platea dictumst. Cras ultricies nisl eu est. Aliquam ultrices, orci in dapibus facilisis, tortor pede bibendum neque, eget vestibulum lectus wisi vitae orci. Phasellus quis metus. In turpis diam, varius in, pulvinar sit amet, commodo ut, wisi. Donec leo nibh, iaculis in, facilisis non, mollis eget, eros. Morbi sem.
Nunc sed arcu. Phasellus euismod tincidunt eros. Proin ac purus. In dictum ante vitae libero. Proin pede. Pellentesque tellus ipsum, semper quis, dapibus eget, ultricies ac, pede. Aenean tristique tincidunt lorem. Aenean eget eros quis tellus tincidunt condimentum. Aliquam tempor, erat sit amet condimentum sagittis, ante sapien dapibus lectus, in tempor mauris sem non metus. Nam id orci. Nulla dignissim, felis in euismod tempor, neque turpis suscipit urna, id tristique mauris eros et dui.
Aliquam eget felis id elit congue tempus. Maecenas a velit. Sed egestas malesuada sapien. In sapien. Integer sit amet massa vitae justo vulputate viverra. Fusce suscipit, mi a lacinia lobortis, urna enim consectetuer risus, et ultrices ante nulla nec mauris. Integer pulvinar aliquet turpis. Phasellus fermentum diam at mauris. Ut nulla est, rhoncus sed, malesuada eget, rutrum ac, nunc. Curabitur in ante.
Nullam lobortis, dui nec accumsan molestie, ligula libero porta urna, in tincidunt ante lacus ac diam. Vestibulum erat risus, scelerisque non, mattis sit amet, aliquet convallis, enim. Sed mattis. Phasellus tristique. Nullam metus ipsum, sagittis at, tempor non, consectetuer eget, massa. Curabitur metus lacus, fringilla ac, interdum condimentum, hendrerit non, est. Morbi iaculis. Aenean lacus lectus, lacinia eget, hendrerit id, imperdiet ac, nisl. Praesent metus. Morbi mi elit, lacinia fringilla, luctus ut, tempor at, diam. Nulla arcu nibh, condimentum fringilla, nonummy et, volutpat eget, orci. Suspendisse et dui. Integer eget lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse vitae odio. Sed risus nisl, mattis vitae, imperdiet et, semper nec, tellus. Quisque adipiscing, neque id faucibus fringilla, eros augue ultricies orci, quis tincidunt tortor elit gravida ligula. Suspendisse suscipit sem sit amet ipsum. Etiam elit.
Aenean ullamcorper leo a neque. Ut eros risus, ornare sed, luctus sit amet, mollis ut, nisl. Proin dui. Aliquam suscipit. Vestibulum nisl wisi, eleifend at, placerat et, lobortis vitae, dui. Nulla dapibus pretium nulla. In hac habitasse platea dictumst. Cras ultricies nisl eu est. Aliquam ultrices, orci in dapibus facilisis, tortor pede bibendum neque, eget vestibulum lectus wisi vitae orci. Phasellus quis metus. In turpis diam, varius in, pulvinar sit amet, commodo ut, wisi. Donec leo nibh, iaculis in, facilisis non, mollis eget, eros. Morbi sem.
Nunc sed arcu. Phasellus euismod tincidunt eros. Proin ac purus. In dictum ante vitae libero. Proin pede. Pellentesque tellus ipsum, semper quis, dapibus eget, ultricies ac, pede. Aenean tristique tincidunt lorem. Aenean eget eros quis tellus tincidunt condimentum. Aliquam tempor, erat sit amet condimentum sagittis, ante sapien dapibus lectus, in tempor mauris sem non metus. Nam id orci. Nulla dignissim, felis in euismod tempor, neque turpis suscipit urna, id tristique mauris eros et dui.
Aliquam eget felis id elit congue tempus. Maecenas a velit. Sed egestas malesuada sapien. In sapien. Integer sit amet massa vitae justo vulputate viverra. Fusce suscipit, mi a lacinia lobortis, urna enim consectetuer risus, et ultrices ante nulla nec mauris. Integer pulvinar aliquet turpis. Phasellus fermentum diam at mauris. Ut nulla est, rhoncus sed, malesuada eget, rutrum ac, nunc. Curabitur in ante.
Aenean ullamcorper leo a neque. Ut eros risus, ornare sed, luctus sit amet, mollis ut, nisl. Proin dui. Aliquam suscipit. Vestibulum nisl wisi, eleifend at, placerat et, lobortis vitae, dui. Nulla dapibus pretium nulla. In hac habitasse platea dictumst. Cras ultricies nisl eu est. Aliquam ultrices, orci in dapibus facilisis, tortor pede bibendum neque, eget vestibulum lectus wisi vitae orci. Phasellus quis metus. In turpis diam, varius in, pulvinar sit amet, commodo ut, wisi. Donec leo nibh, iaculis in, facilisis non, mollis eget, eros. Morbi sem.
Nunc sed arcu. Phasellus euismod tincidunt eros. Proin ac purus. In dictum ante vitae libero. Proin pede. Pellentesque tellus ipsum, semper quis, dapibus eget, ultricies ac, pede. Aenean tristique tincidunt lorem. Aenean eget eros quis tellus tincidunt condimentum. Aliquam tempor, erat sit amet condimentum sagittis, ante sapien dapibus lectus, in tempor mauris sem non metus. Nam id orci. Nulla dignissim, felis in euismod tempor, neque turpis suscipit urna, id tristique mauris eros et dui.
Aliquam eget felis id elit congue tempus. Maecenas a velit. Sed egestas malesuada sapien. In sapien. Integer sit amet massa vitae justo vulputate viverra. Fusce suscipit, mi a lacinia lobortis, urna enim consectetuer risus, et ultrices ante nulla nec mauris. Integer pulvinar aliquet turpis. Phasellus fermentum diam at mauris. Ut nulla est, rhoncus sed, malesuada eget, rutrum ac, nunc. Curabitur in ante.
Si quieres que tambien aparezca la barra horizontal hay que añadir dentro de miscroll otra capa con un ancho mayor, algo como esto:
#miscrollHorizontal {
width:300px;
}
width:300px;
}
y el html debe quedar asi:
<div id="miscroll" class="flexcroll">
<div id="miscrollHorizontal">
...el contenido debe ir aqui...
</div>
<div>
<div id="miscrollHorizontal">
...el contenido debe ir aqui...
</div>
<div>
nos debe quedar asi:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.
Nullam lobortis, dui nec accumsan molestie, ligula libero porta urna, in tincidunt ante lacus ac diam. Vestibulum erat risus, scelerisque non, mattis sit amet, aliquet convallis, enim. Sed mattis. Phasellus tristique. Nullam metus ipsum, sagittis at, tempor non, consectetuer eget, massa. Curabitur metus lacus, fringilla ac, interdum condimentum, hendrerit non, est. Morbi iaculis. Aenean lacus lectus, lacinia eget, hendrerit id, imperdiet ac, nisl. Praesent metus. Morbi mi elit, lacinia fringilla, luctus ut, tempor at, diam. Nulla arcu nibh, condimentum fringilla, nonummy et, volutpat eget, orci. Suspendisse et dui. Integer eget lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse vitae odio. Sed risus nisl, mattis vitae, imperdiet et, semper nec, tellus. Quisque adipiscing, neque id faucibus fringilla, eros augue ultricies orci, quis tincidunt tortor elit gravida ligula. Suspendisse suscipit sem sit amet ipsum. Etiam elit.
Aenean ullamcorper leo a neque. Ut eros risus, ornare sed, luctus sit amet, mollis ut, nisl. Proin dui. Aliquam suscipit. Vestibulum nisl wisi, eleifend at, placerat et, lobortis vitae, dui. Nulla dapibus pretium nulla. In hac habitasse platea dictumst. Cras ultricies nisl eu est. Aliquam ultrices, orci in dapibus facilisis, tortor pede bibendum neque, eget vestibulum lectus wisi vitae orci. Phasellus quis metus. In turpis diam, varius in, pulvinar sit amet, commodo ut, wisi. Donec leo nibh, iaculis in, facilisis non, mollis eget, eros. Morbi sem.
Nunc sed arcu. Phasellus euismod tincidunt eros. Proin ac purus. In dictum ante vitae libero. Proin pede. Pellentesque tellus ipsum, semper quis, dapibus eget, ultricies ac, pede. Aenean tristique tincidunt lorem. Aenean eget eros quis tellus tincidunt condimentum. Aliquam tempor, erat sit amet condimentum sagittis, ante sapien dapibus lectus, in tempor mauris sem non metus. Nam id orci. Nulla dignissim, felis in euismod tempor, neque turpis suscipit urna, id tristique mauris eros et dui.
Aliquam eget felis id elit congue tempus. Maecenas a velit. Sed egestas malesuada sapien. In sapien. Integer sit amet massa vitae justo vulputate viverra. Fusce suscipit, mi a lacinia lobortis, urna enim consectetuer risus, et ultrices ante nulla nec mauris. Integer pulvinar aliquet turpis. Phasellus fermentum diam at mauris. Ut nulla est, rhoncus sed, malesuada eget, rutrum ac, nunc. Curabitur in ante.
Aenean ullamcorper leo a neque. Ut eros risus, ornare sed, luctus sit amet, mollis ut, nisl. Proin dui. Aliquam suscipit. Vestibulum nisl wisi, eleifend at, placerat et, lobortis vitae, dui. Nulla dapibus pretium nulla. In hac habitasse platea dictumst. Cras ultricies nisl eu est. Aliquam ultrices, orci in dapibus facilisis, tortor pede bibendum neque, eget vestibulum lectus wisi vitae orci. Phasellus quis metus. In turpis diam, varius in, pulvinar sit amet, commodo ut, wisi. Donec leo nibh, iaculis in, facilisis non, mollis eget, eros. Morbi sem.
Nunc sed arcu. Phasellus euismod tincidunt eros. Proin ac purus. In dictum ante vitae libero. Proin pede. Pellentesque tellus ipsum, semper quis, dapibus eget, ultricies ac, pede. Aenean tristique tincidunt lorem. Aenean eget eros quis tellus tincidunt condimentum. Aliquam tempor, erat sit amet condimentum sagittis, ante sapien dapibus lectus, in tempor mauris sem non metus. Nam id orci. Nulla dignissim, felis in euismod tempor, neque turpis suscipit urna, id tristique mauris eros et dui.
Aliquam eget felis id elit congue tempus. Maecenas a velit. Sed egestas malesuada sapien. In sapien. Integer sit amet massa vitae justo vulputate viverra. Fusce suscipit, mi a lacinia lobortis, urna enim consectetuer risus, et ultrices ante nulla nec mauris. Integer pulvinar aliquet turpis. Phasellus fermentum diam at mauris. Ut nulla est, rhoncus sed, malesuada eget, rutrum ac, nunc. Curabitur in ante.
ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.
Nullam lobortis, dui nec accumsan molestie, ligula libero porta urna, in tincidunt ante lacus ac diam. Vestibulum erat risus, scelerisque non, mattis sit amet, aliquet convallis, enim. Sed mattis. Phasellus tristique. Nullam metus ipsum, sagittis at, tempor non, consectetuer eget, massa. Curabitur metus lacus, fringilla ac, interdum condimentum, hendrerit non, est. Morbi iaculis. Aenean lacus lectus, lacinia eget, hendrerit id, imperdiet ac, nisl. Praesent metus. Morbi mi elit, lacinia fringilla, luctus ut, tempor at, diam. Nulla arcu nibh, condimentum fringilla, nonummy et, volutpat eget, orci. Suspendisse et dui. Integer eget lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse vitae odio. Sed risus nisl, mattis vitae, imperdiet et, semper nec, tellus. Quisque adipiscing, neque id faucibus fringilla, eros augue ultricies orci, quis tincidunt tortor elit gravida ligula. Suspendisse suscipit sem sit amet ipsum. Etiam elit.
Aenean ullamcorper leo a neque. Ut eros risus, ornare sed, luctus sit amet, mollis ut, nisl. Proin dui. Aliquam suscipit. Vestibulum nisl wisi, eleifend at, placerat et, lobortis vitae, dui. Nulla dapibus pretium nulla. In hac habitasse platea dictumst. Cras ultricies nisl eu est. Aliquam ultrices, orci in dapibus facilisis, tortor pede bibendum neque, eget vestibulum lectus wisi vitae orci. Phasellus quis metus. In turpis diam, varius in, pulvinar sit amet, commodo ut, wisi. Donec leo nibh, iaculis in, facilisis non, mollis eget, eros. Morbi sem.
Nunc sed arcu. Phasellus euismod tincidunt eros. Proin ac purus. In dictum ante vitae libero. Proin pede. Pellentesque tellus ipsum, semper quis, dapibus eget, ultricies ac, pede. Aenean tristique tincidunt lorem. Aenean eget eros quis tellus tincidunt condimentum. Aliquam tempor, erat sit amet condimentum sagittis, ante sapien dapibus lectus, in tempor mauris sem non metus. Nam id orci. Nulla dignissim, felis in euismod tempor, neque turpis suscipit urna, id tristique mauris eros et dui.
Aliquam eget felis id elit congue tempus. Maecenas a velit. Sed egestas malesuada sapien. In sapien. Integer sit amet massa vitae justo vulputate viverra. Fusce suscipit, mi a lacinia lobortis, urna enim consectetuer risus, et ultrices ante nulla nec mauris. Integer pulvinar aliquet turpis. Phasellus fermentum diam at mauris. Ut nulla est, rhoncus sed, malesuada eget, rutrum ac, nunc. Curabitur in ante.
Aenean ullamcorper leo a neque. Ut eros risus, ornare sed, luctus sit amet, mollis ut, nisl. Proin dui. Aliquam suscipit. Vestibulum nisl wisi, eleifend at, placerat et, lobortis vitae, dui. Nulla dapibus pretium nulla. In hac habitasse platea dictumst. Cras ultricies nisl eu est. Aliquam ultrices, orci in dapibus facilisis, tortor pede bibendum neque, eget vestibulum lectus wisi vitae orci. Phasellus quis metus. In turpis diam, varius in, pulvinar sit amet, commodo ut, wisi. Donec leo nibh, iaculis in, facilisis non, mollis eget, eros. Morbi sem.
Nunc sed arcu. Phasellus euismod tincidunt eros. Proin ac purus. In dictum ante vitae libero. Proin pede. Pellentesque tellus ipsum, semper quis, dapibus eget, ultricies ac, pede. Aenean tristique tincidunt lorem. Aenean eget eros quis tellus tincidunt condimentum. Aliquam tempor, erat sit amet condimentum sagittis, ante sapien dapibus lectus, in tempor mauris sem non metus. Nam id orci. Nulla dignissim, felis in euismod tempor, neque turpis suscipit urna, id tristique mauris eros et dui.
Aliquam eget felis id elit congue tempus. Maecenas a velit. Sed egestas malesuada sapien. In sapien. Integer sit amet massa vitae justo vulputate viverra. Fusce suscipit, mi a lacinia lobortis, urna enim consectetuer risus, et ultrices ante nulla nec mauris. Integer pulvinar aliquet turpis. Phasellus fermentum diam at mauris. Ut nulla est, rhoncus sed, malesuada eget, rutrum ac, nunc. Curabitur in ante.
El creador, www.hesido.com, nos ofrece una cantidad de ejemplos en esta carpeta comprimida. Para cambiar la imagen de cada barra tendrás que modificar el archivo css llamado flexcrollstyles correspondiente en cada ejemplo.
| [+/-] | La batalla de las redes sociales |
A riesgo de parecer un poco pesado con los videos, me parece interesante mostrar este en especial por su contenido: el complicado tema de las redes sociales. Vale la pena reflexionar y pensar si estamos siendo consumidos por alguna en especial, ¿que piensas tú?
| [+/-] | Michael Jackson ya tiene su lazo negro en la MTV |
"El anuncio muestra un lazo negro con los calcetines blancos y los zapatos negros tan característicos del Rey del Pop".
Fuente | Creativos Online
| [+/-] | Crear un Ribbon |
Una de las mejores formas de promocionar un enlace y hacerlo vistoso es por medio de objetos evidentes al ojo del visitante. Lo especial de los Ribbons es que, por lo menos en mi caso, es lo primero que veo cuando entro a cierta pagina. Puedes ver el ejemplo en la parte superior.
Hay dos formas para hacerlo: la primera es de manera Online,
QuickRibbon te permite escoger entre cuatro tipos de borde, modificar colores, cambiar de fuente y tamaño...El script que generas al terminar de personalizar el enlace debes pegarlo antes de la etiqueta </body> en edicion de HTML.
Y mediante css (este codigo debe pegarse antes de </head>):
En este caso la imagen flotará al lado derecho por la propiedad right, si queremos que flote al lado contrario será left. tambien podemos cambiar top por bottom y asi quedara al final de todo el contenido.
Como he dicho en casos anteriores, la palabra ribbon al incio del codigo solo hará referencia al enlace con ese nombre unico; La estructura deberia quedar parecida a esta (este codigo debe pegarse antes de </body>):
Hay dos formas para hacerlo: la primera es de manera Online,
QuickRibbon te permite escoger entre cuatro tipos de borde, modificar colores, cambiar de fuente y tamaño...El script que generas al terminar de personalizar el enlace debes pegarlo antes de la etiqueta </body> en edicion de HTML.
Y mediante css (este codigo debe pegarse antes de </head>):
#ribbon {
position: absolute;
right: 0;
top: 0;
display: block;
height: 125px;
width: 125px;
background: url(url-imagen de fondo.png) no-repeat;
text-indent: -999em;
text-decoration: none;
}
position: absolute;
right: 0;
top: 0;
display: block;
height: 125px;
width: 125px;
background: url(url-imagen de fondo.png) no-repeat;
text-indent: -999em;
text-decoration: none;
}
En este caso la imagen flotará al lado derecho por la propiedad right, si queremos que flote al lado contrario será left. tambien podemos cambiar top por bottom y asi quedara al final de todo el contenido.
Como he dicho en casos anteriores, la palabra ribbon al incio del codigo solo hará referencia al enlace con ese nombre unico; La estructura deberia quedar parecida a esta (este codigo debe pegarse antes de </body>):
<a id="ribbon" href="AQUI_TU_ENLACE" title="TITULO">TEXTO DEL RIBBON</a>
| [+/-] | Inspiración (Sitios web) |
LeeMunroe
Alex Cohaniuc
Tim Van Damme
Gavin Botica
Komodo Media
Deaxon
Pasti
Design Shard
Texture Lovers
From The Couch
Alex Cohaniuc
Tim Van Damme
Gavin Botica
Komodo Media
Deaxon
Pasti
Design Shard
Texture Lovers
From The Couch
| [+/-] | pattern8: coleccion de patrones (fondos) |
En Pattern8 podrás encontrar una gran doleccion de patrones muy llamativos para decorar tu blog, pagina web, diseños en photoshop, etc. Todo depende del uso que le quieras dar. Me parece importante resaltar la forma en que puedes buscar tus fondos: estan organizados por colores y por orden de paginas; con solo presionar click sobre un color obtendrás variedad de patrones con esa tonalidad.
Visita Pattern8.com
| [+/-] | Google friend connect : la barra social |
A menudo visitaba algunas paginas y blogs presonales, en ingles la mayoria, y me encontraba con una barra inferior de google con los seguidores, comentarios, actividad reciente, etc. Siempre me dio curiosidad saber como añadirla y hasta llegue a pensar que era un servicio pago; Hace dos dias la volvi a ver, por lo que me di a la tarea de averiguar y por si alguno no la conoce hoy trataré de explicarla:
Puedes ver un demo online en esta pagina.
Lo primero será ingresar a Google friend connect e introducir los datos de nuestra cuenta google. veremos la lista de nuestros blogs al lado izquierdo, presionamos click sobre el que le queremos añadir la barra social.
Escogemos la opcion Barra social y a continuación llenamos los datos y las preferencias, por ejemplo donde aparecerá la barra (arriba o abajo), los comentarios de la barra seran para cada pagina individual o para el blog completo, etc.
Para agregar la barra a la plantilla presionamos sobre el boton "Generar codigo" y seleccionamos y copiamos el contenido de la caja de texto. Vamos a la pestaña Diseño > edicion de html y buscamos <body> y justo despues pegamos el codigo anterior.
Vale la pena aclarar que no debemos añadir el fragmento de codigo del paso 1 (aparece al presionar sobre el boton Generar codigo) porque es igual al que tienen las plantillas de blogger; solo hay que pegar lo de la caja de texto.
Puedes ver un demo online en esta pagina.
Lo primero será ingresar a Google friend connect e introducir los datos de nuestra cuenta google. veremos la lista de nuestros blogs al lado izquierdo, presionamos click sobre el que le queremos añadir la barra social.
Escogemos la opcion Barra social y a continuación llenamos los datos y las preferencias, por ejemplo donde aparecerá la barra (arriba o abajo), los comentarios de la barra seran para cada pagina individual o para el blog completo, etc.
Para agregar la barra a la plantilla presionamos sobre el boton "Generar codigo" y seleccionamos y copiamos el contenido de la caja de texto. Vamos a la pestaña Diseño > edicion de html y buscamos <body> y justo despues pegamos el codigo anterior.
Vale la pena aclarar que no debemos añadir el fragmento de codigo del paso 1 (aparece al presionar sobre el boton Generar codigo) porque es igual al que tienen las plantillas de blogger; solo hay que pegar lo de la caja de texto.
| [+/-] | Photoshop para principiantes: Maquetacion Nº1 |
Continuando con esta serie de videos sencillos, hoy quiero compartir como hacer una pagina web desde photoshop (no diseñarla, solo seleccionar sectores).
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
