:::: MENU ::::
  • Desarrollo Web - Responsive Design

  • Easy to Customize

  • Customizable fonts.

viernes, 17 de enero de 2014

En este tutorial vamos a  modificar la barra de desplazamiento para personalizarla a nuestro gusto. La barra de desplazamiento, o scrollbar, es la que aparece a la derecha, o en la parte inferior de una página web y nos permite desplazarnos arriba y abajo, derecha e izquierda, para poder ver todo el contenido.

Una barra de desplazamiento personalizada le da a nuestro blog o página web un aspecto diferente, más moderno, y permite configurarla con el color que queramos, para que sea más integrada con los colores de nuestro blog.

personaliza scroollbar para tu blog

Cabe mencionar que estos cambios solo serán visibles en los navegadores de Chrome, Safari y Opera.

Este tutorial es muy sencillo, los pasos a seguir son los siguientes:
  • Ir a Escritorio Blogger.
  • En el menú seleccionamos Plantilla.
  • Hacemos clic en Editar HTML.
  • En el código buscamos lo siguiente:
]] ></b:skin>

Encima de ello tenemos que pegar el siguiente código:

/* --- Scrollbar personalizada tutoriales2010.blogspot.mx --- */ ::-webkit-scrollbar { background:#fff; width:12px; } ::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); background-image: -webkit-linear-gradient(top, #1dc2de 10%,#1dc2de 51%); } ::-webkit-scrollbar-track { }

Ahora cambiaremos unos valores a nuestro gusto:
El color azul es el fondo de nuestra barra, el rojo es el ancho de nuestra barra y el morado es el color de nuestro scroollbar.

slider con javascript

Hoy les voy a compartir  un slider de imágenes que funciona con JavaScript, el cual tiene unos efectos de transición geniales e incluye una banda lateral con el texto "Populares".Ademas cabe mencionar que este slider es muy facil de agregar a nuestra plantilla ya que vasta con agregar un nuevo gadget de tipo Html/JavaScript, así podemos mostrar a nuestros lectores las entradas mas populares de nuestro blog.

Si quieres ver como funciona este slider da clic AQUI.

Empezamos a instalar nuestro slider:

  • En el Escritorio Blogger hacemos clic en Diseño.
  • Hacemos clic en Añadir un Gadget donde queramos poner los anuncios.
  • En la lista seleccionamos HTML / JavaScript.
Ahora solo copiamos y pegamos este codigo: 

<style type="text/css"> <!-- tutoriales2010.blogspot.mx --> #mcis { display: none; } #sliderFrame { position: relative; width: 500px; margin: 0 auto; margin-bottom:35px; border:5px solid #000; } #ribbon { width: 111px; height: 111px; position: absolute; top: -4px; left: -4px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUwLN_T2SMztrcCSOmzzhbSuaW_i116eXf9OGibbo63Hj37oiMv0_yo60ZMVtARelfzbHFEhhPs3VFL-57-gcCv8DlhosnvRP-KZHDis26WmZ0w_0RXC103MndKkerD806qjsCuHFnlVBQ/s109-no/ribbon.png) no-repeat; z-index: 7; } #slider { width: 500px; height: 250px; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu3vVvHiOlGTgXokS98z-Ira3YSlO67zwTb5VLjLEJC3gtuJrWBzrp_oYehgijMvbsZs27ERtPZWdbnLvZdXG80-wq50zcHtAPu0a7Kit9cXLHUIyw9VKlr6vakKoQk_gLE8hawd0Inkr7/s32-no/loading.gif) no-repeat 50% 50%; position: relative; margin: 0 auto; box-shadow: 0px 1px 5px #999999; } #slider img { position: absolute; border: none; display: none; } #slider a.imgLink { z-index: 2; display: none; position: absolute; top: 0px; left: 0px; border: 0; padding: 0; margin: 0; width: 100%; height: 100%; } div.mc-caption-bg, div.mc-caption-bg2 { position: absolute; width: 100%; height: auto; padding: 0; left: 0px; bottom: 0px; z-index: 3; overflow: hidden; font-size: 0; } div.mc-caption-bg { background-color: black; } div.mc-caption { font: bold 14px/20px Arial; color: #EEE; z-index: 4; padding: 10px 0; text-align: center; } div.mc-caption a { color: #FB0; } div.mc-caption a:hover { color: #DA0; } div.navBulletsWrapper { top: 265px; left: 190px; width: 150px; background: none; padding-left: 20px; position: relative; z-index: 5; cursor: pointer; } div.navBulletsWrapper div { width: 11px; height: 11px; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidsGTiCNTkGLXr5yc5nxfGXlL8Wl8RcSdeUvpcN2oAhULWGwxgFCaN2OAv4s98P3TGtdMkJNc7sFETcrOuw7klSC6ZeLXaQUTlwRslYv0s4NGsMbdC6ud75apacARV4MhnWpF-ybBNXfbk/w11-h22-no/bullet.png) no-repeat 0 0; float: left; overflow: hidden; vertical-align: middle; cursor: pointer; margin-right: 11px; _position: relative; } div.navBulletsWrapper div.active { background-position: 0 -11px; } #slider { transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); } </style> <script src="https://googledrive.com/host/0B-WopI-jeOOsT1NPRC1acHpxWmc/js-image-slider.js" type="text/javascript"></script> <div id="sliderFrame"> <div id="ribbon"></div>
 <div id="slider">
 <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzNPuaB6h5TxeMpK2Ulz1D3I9CRVv-6AGX_y8Gct7631HaXfHOJuT_RemzMT3Or8mJJdCnm3yZijZH4dpHADJ6UUDdm5QeINHr7upWZx6ZFzaheLC2Hyp5G13dE_NGM_kB3_nzkc6WpJUh/w500-h250-no/1.jpg" alt="Slider de Imágenes"/>
</a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6PLvdlh0J7POrBBT4aflb0SykTxuRu6At3MSyZz5GMyaSTIYnnsaWGWf3imZbzwdyYy3QC4YdEt2u9n5P2lHDV6BVI7sZ-GB-4tfBWR0C4NbxyEWTfBFU3MusYZAHD6WA0Q9BNQthRwRQ/w500-h250-no/2.jpg" alt="tutoriales2010"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS2ezrcoEwtXTGBWBcK3QRTAuhTbvDjZkvFcTCVveqJUBm1qSIu5XU8HRRPn3YkXPvmcKNywGyMQg9_xtkIPC_bL9s79Xl3JOtQaSC_ibkjjF6Aagp9-zxZIvYavpz4MpFSKGQhT2zSLIl/w500-h250-no/3.jpg" alt="Hecho con JavaScript"/>
</a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLh6LUyoI3i1np9w6WNAKtt9OdY7A2naJ3HtEJ_ogGPjAx8vjDCPiw7QDpXbSxo8i4xKSgF9RmJPDROrpmAfDXulxOpnEI2LXoOUSO_bh4lKDn2A308YExieTYtfU-iXYE6bPtbI0Z9I5u/w500-h250-no/4.jpg" alt="Aquí puedes poner el texto que quieras"/>
</a>
<a href="http://www.tutoriales2010blogspot.mx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghE2-4UsTzdGx_YdeE2fHjZWJu2BTdjNAMa6wHyCh1gjnuGQ8Omqk0zxx6bJ6OQYwgEsshxJTjYGOvF1XjxZjYwLQEB6nbjoEd5DCzCO0SNhiOmhA7P0xHW_nSeSdsTe1X2yhXjBGSXLMZ/w500-h250-no/5.jpg" alt="No olvides comentar"/></a> </div> </div>

Ahora solo nos falta modificar algunas cosas:

COLOR AZUL: Esas son las URL de las imagenes que vamos a poner en nuestro slider ( se recomienda usar la medida de 500px x 250px.
COLOR ROJO: Es el link al que se va dirigir la imagen al momento de dar clic sobre la misma.
COLOR AMARILLO: Es el texto que aparece en la descripción de cada una de las imágenes.

La función del siguiente botón es volver al inicio de la página de manera rápida para facilitar la experiencia al usuario, en lugar de tener que mover la barra de desplazamiento (Scrollbar) o jugar con la rueda del ratón, sobre todo cuando la página es extensa o la entrada tiene muchos comentarios.

El siguiente botón tiene la característica de que no incluye ningún script, lo que lo hace muy simple y la velocidad de carga del blog no aumentará al incluir este botón.


Instalar el botón en tu blog:

Para instalar el botón de "Ir Arriba" en tu blog sigue los siguientes pasos:

  • Ir a Escritorio de tu Blogger.
  • En el menú seleccionamos Plantilla.
  • Hacemos clic en Editar HTML.
  • En el código buscamos lo siguiente:
<body>


Encima de ello tenemos que pegar el siguiente código:

<style type='text/css'> .backtotop a:hover { padding-bottom:2px; } </style> <div class='backtotop'><a class='backtotop' href='#' rel='nofollow' style='display:scroll;position:fixed;bottom:10px;right:15px;' title='Ir Arriba'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-vVxLLcz_fnPLwtWci4GcWbWMZu7ICUzlhayfRhoonr5vxF-Nw09ZmbuQOjk0x8nLfSFylHBLD_IOelWAGgMSnfgMc9v0zs4AI0tbBLpA3MHkmsEuGSzM0A2PUoR26vH-ytyh2lsW9Gc/s35-no/top.png' style='border:0;'/></a> </div>

Ahora podemos realizar unos pequeños cambios antes de guardar los cambios en nuestra plantilla, observa que tenemos el atributo "title" ahí puedes poner el texto que quieres que aparezca al momento de posicionar el cursor encima del botón y la segunda parte de color rojo es el link de la imagen ... la cual puedes cambiar a una mas de tu gusto. 

domingo, 12 de enero de 2014

NameTag es una aplicación de reconocimiento facial de extraños que les permitirá a los usuarios de Google Glass o de smartphones hacer retratos de personas y enviarlos al servidor para ver si aparecen en redes sociales, sitios de citas o registros de atacantes sexuales. Si lo encuentra en algunas de estas redes, la aplicación te devuelve esa información y ahí podrás tomar tus decisiones con más seguridad.

Con todas las complicaciones que surgen de los abusos que hacen de la información con las redes sociales y la monitorización de nuestra privacidad, los nombres de las personas ya están en todos lados y buena parte de la población ya tiene un perfil en línea indicando su nombre y apellido acompañado de un retrato. De repente, toda esa gente extraña pasa a ser conocida, cuando alguien las etiqueta en una foto de Facebook o a través de otra red social buscas su nombre y te encuentras con una imagen. La aplicación NameTag funciona a la inversa, ya que hace reconocimiento facial de extraños luego de tomarles una foto con tu móvil o Google Glass.





Ya sea por curiosidad o por una cuestión de seguridad, los usuarios podrán tomar una foto de alguien y enviarla a la aplicación para que ésta la busque en Facebook, Twiter, sitios de citas y varias redes sociales más, incluyendo registros de atacantes sexuales y agencias de seguridad. Kevin Alan Tussy, creador de Facetag, nos promete que la aplicación no generará otro problema de privacidad, ya que “se trata de conectar a las personas que quieren ser conectadas.” Con la aplicación en marcha, las personas pronto serán capaces de acceder a NameTag.ws y elegir si quieren que su nombre e información básica se muestre a los demás. De hecho, se le permitirá a los usuarios tener un perfil que se pueda observar durante el horario de trabajo y otro que pueda ser usado para las situaciones sociales.



Captas a alguien interesante, capturas su rostro y la aplicación va enviará la foto de forma inalámbrica hacia el servidor de NameTag, donde se comparará la foto con la de millones de registros en línea y te devolverá un nombre y unos enlaces al perfil de la persona en varias redes sociales. Los responsables de NameTag insisten en que este tipo de funcionalidades hará que las citas en línea y las interacciones sociales sin conexión serán mucho más seguras y nos darán una mejor comprensión de las personas que nos rodean. Especialmente diseñado para Google Glass, el proyecto podría resignificar ese factor “suerte” y sorpresa que se da cuando conocemos a alguien por primera vez.


Fuente: NameTag

¿Necesitas una pagina web? Contáctanos