Mostrando entradas con la etiqueta Webmaster. Mostrar todas las entradas
Mostrando entradas con la etiqueta Webmaster. Mostrar todas las entradas
miércoles, 1 de junio de 2011
viernes, 22 de octubre de 2010
Galería de imágenes en miniatura de navegación con jQuery
En este tutorial vamos a crear una extraordinaria galería con miniaturas desplazable que se deslizan hacia fuera de la navegación. Vamos a usar jQuery y algunas propiedades de CSS3 para el estilo. La idea principal es tener un menú de álbumes en el que cada elemento se muestran en una barra horizontal con miniaturas cuando se hace clic. El contenedor de imágenes en miniatura se desplazará de forma automática cuando el usuario mueve el ratón hacia la izquierda o la derecha.
Cuando se hace clic en una miniatura que se carga como una previsualización de la imagen completa en el fondo de la página. También tendremos un contenedor de texto para uno de los elementos de menú.
Las fotos son hermosas photostream de Marcos Sebastian en Flickr. Usted puede encontrar todas las imágenes utilizadas en la demostración en el conjunto de "IT" Factor. Por favor revise la licencia de Creative Commons que se incluye en la demostración.
Por lo tanto, vamos a empezar!
Cuando se hace clic en una miniatura que se carga como una previsualización de la imagen completa en el fondo de la página. También tendremos un contenedor de texto para uno de los elementos de menú.
Las fotos son hermosas photostream de Marcos Sebastian en Flickr. Usted puede encontrar todas las imágenes utilizadas en la demostración en el conjunto de "IT" Factor. Por favor revise la licencia de Creative Commons que se incluye en la demostración.
Por lo tanto, vamos a empezar!
The Markup
Nuestro HTML es principalmente va a consistir en una capa y de la lista del menú. Vamos a tener algunos otros elementos, como la imagen completa, el div de carga y la superposición de medios tonos. En primer lugar, vamos a crear la envoltura:
1 | <div id="st_main" class="st_main"> |
2 |
3 | |
Dentro de nuestro contenedor vamos a añadir lo siguiente:
1 | <img src="images/album/1.jpg" alt="" class="st_preview" style="display:none;"/> |
2 |
3 | <div class="st_overlay"> |
4 |
5 | <h1>Mark Sebastian |
6 |
7 | <div id="st_loading" class="st_loading"> |
8 | <span>Loading... |
9 | |
El primer elemento es nuestra imagen de vista previa completa. La plantilla va a ser un div fija que se extenderá por toda la pantalla repitiendo un patrón de medios tonos para crear un efecto de superposición de lujo en la imagen. También vamos a añadir un título y un div de carga.
A continuación, añadir una lista desordenada en la que cada elemento li va a contener un palmo de su título y la envoltura de las miniaturas. El elemento li última va a contener un contenedor para el texto, por eso no lo vamos a dar la clase "álbum". Más tarde, en la función de jQuery tendremos que distinguir este.
A continuación, añadir una lista desordenada en la que cada elemento li va a contener un palmo de su título y la envoltura de las miniaturas. El elemento li última va a contener un contenedor para el texto, por eso no lo vamos a dar la clase "álbum". Más tarde, en la función de jQuery tendremos que distinguir este.
Sigue el Manual completo:
Via: Tympanus
Visto en: Blog Informatico
miércoles, 22 de septiembre de 2010
Abrir imágen en la misma página con efecto slide
Highslide es un Script con varios efectos para crear una galeria de imágenes o simplemente abrir una imágen sin salir de la página con un bonito Zoom, puedes ver un ejemplos de su resultado en la página del autor.
Para este post, enseñaré a usar el efecto Gallery White, puedes ver un ejemplo aquí(haciendo clic sobre las cartas). Este efecto, además del "Zoom", permite mover la imágen por toda la página y para minimizar se debe hacer clic sobre la misma.
Parte 1 de 2:
Primero hay que agregar el siguiente código Javascript a tu código html, despues <head>(Busca con control + F).
Nota: Recomiendo guardar los archivos que estan en rojo y subirlos a un servidor propio, porque no aseguro la disponibilidad de estos, ya que es un servidor gratuito donde estan alojados.
Para este post, enseñaré a usar el efecto Gallery White, puedes ver un ejemplo aquí(haciendo clic sobre las cartas). Este efecto, además del "Zoom", permite mover la imágen por toda la página y para minimizar se debe hacer clic sobre la misma.
Parte 1 de 2:
Primero hay que agregar el siguiente código Javascript a tu código html, despues <head>(Busca con control + F).
Nota: Recomiendo guardar los archivos que estan en rojo y subirlos a un servidor propio, porque no aseguro la disponibilidad de estos, ya que es un servidor gratuito donde estan alojados.
<script type="text/javascript" src="http://h1.ripway.com/inacho/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="http://h1.ripway.com/inacho/highslide.css" />
<script type="text/javascript">
hs.graphicsDir = 'http://h1.ripway.com/inacho/graphic/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75;
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>
Parte 2: Agregar la imágen en tu entrada o página.
Debes tener una imágen en miniatura de la imágen real, o si quieres haces un boton que diga "Abrir imágen aqui" o algo por el estilo, o incluso sin imágen y solo texto.
Para insertar la imágen, debes usar el siguiente código:
<div class="highslide-gallery">
<a href="http://imagen_real.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="http://imagen_en_miniatura_o_boton.jpg"
title="Clic para ver Imágen" />
</a>
<div class="highslide-caption">
Texto opcional para la imágen, aparecerá en la parte inferior.
</div>
Texto opcional para la imágen, aparecerá en la parte inferior.
</div>
</div>
Aquí lo rojo es opcional, pero debes agregar el último </div> purpura al final.
Si quisieras hacer una galería, debes volver a copiar desde <a href... hasta ... /a>, siempre todo entre el <div class='high... inicial, hasta el .../div> final.
Preguntas en los comentarios, saludos.
viernes, 11 de junio de 2010
Google propone a los internautas personalizar su página de inicio
viernes, 21 de mayo de 2010
El secreto de Google - Sus servidores
Google eligió el día 1 de abril 2009 (April Fools en el mundo anglosajón) para revelar una serie de “secretos” a cerca de la arquitectura de hardware en sus centros de datos. El April Fools es para el mundo anglosajón lo que vendría a ser el día de los inocentes en el mundo hispano, aunque comprobando que la información publicada por Google se ha extendido por la red, y que el gigante de los buscadores es capaz de escoger este día a drede para dar esta información, finalmente hemos decidido publicarlo.En la actualidad Google es una de las compañías más reconocidas mundialmente, ¿quién a estas alturas no ha oído hablar de Google?, y es que sus aplicaciones web y sobre todo su buscador, se han ido ganando la merecedora fama que disfrutan hoy en día. Pero ¿sabemos algo de los equipos informáticos que utiliza para brindarnos toda esta tecnología web?.
Por lo general Google es bastante receloso a la hora de publicar información relacionada con sus redes y sistemas informáticos, aunque este pasado miércoles durante la celebración de una conferencia, la compañía ha revelado una serie de datos a cerca de la arquitectura de su hardware, verdaderamente interesantes.
La mayoría de compañías llegado el punto en el que deciden montar sus servidores suelen decantarse por la adquisición de equipos de gama alta a compañías lideres en la venta de este tipo de hardware como Dell, Hewlett-Packard, IBM o Sun Microsystems.
Google tiene cientos de miles de servidores funcionando sin descanso para poder dar servicio, por lo que parecería lógico que para montar una red de servidores de tal tamaño hubiera encargado este hardware a uno de los gigantes del sector.
Pues nada más lejos de la realidad, y es que Google se ha diseñado y construido su propio modelo de servidor a medida. Así lo comunicó durante la conferencia Ben Jai, que además es el ingeniero de Google a quién se le encomendó el Manhattan Project, la tarea de diseñar la arquitectura de los nuevos servidores.
Ben Jai mostró al público uno de los modernos servidores de Google y comentó cual era su arquitectura. Estos servidores montan una batería de 12 voltios cada uno para el suministro de energía en el caso de que surja un problema con la fuente principal de electricidad.
Google lleva usando este tipo de diseño desde 2005, y en la actualidad este diseño ya se encuentra en su sexta versión.
Desde 2005 fecha en que se diseñaron este tipo de servidores los datacenters de Google han sido montados de forma estándar en containers de transporte, en los que en cada uno se han montado 1.160 servidores que alcanzaban un consumo de 250 kilovatios.
Si deseas ver este vídeo a pantalla completa en tu navegador, accede directamente a el en 
.
.La pregunta sería ¿porque Google ha mantenido estos datos en secreto durante tantos años y lo revela justo ahora?.
Google es una compañía que ha tenido siempre muy en cuenta la eficiencia energética y cree que este es el momento oportuno de compartir sus experiencias en este terreno con el resto del mundo. Según Urs Hoelzle Vice Presidente de Operaciones de Google; “Con la actual recesión económica presionando los presupuestos de las compañías, el cada vez más alto índice de preocupación medioambiental, y el actual precio de la energía, cada vez existen más limitaciones, y es por esto por lo que Google ha decidido que este es el momento de hacer público su modo de trabajar en cuanto a este tema se refiere”.
Según Google utilizando este modelo de arquitectura en sus servidores han llegado a alcanzar unos niveles de eficiencia tan altos, como la meta que se ha propuesto la Agencia de Protección Ambiental(Environmental Protection Agency) para 2011.
El trabajo se ha centrado en como distribuir la energía, refrigeración, y garantizar que el aire frío y caliente no se mezclen. Según Chris Malone encargado del centro de datos de diseño y medición de la eficiencia; ” lo que ha logrado Google con la aplicación de las mejores prácticas y alguna que otra novedad, no es algo realmente inaccesible para el resto de mercado”.
Una de las característica que diferencia a estos equipos de los utilizados convencionalmente en el montaje de datacenters son la baterías de 12 voltios. En la mayoría de datacenters se utilizan los SAI(sistema de alimentación ininterrumpida) para solventar los problemas ocasionales de suministro de energía, ya que permiten seguir dando corriente a los equipos cuando sucede un fallo en el suministro eléctrico. Este sistema requiere de enormes baterías que deben ser cargadas por generadores. Con el sistema de las baterías de 12 voltios de Google, la construcción de un datacenter es bastante más económica, se desperdicia menos capacidad, y no hay problemas de escalabilidad ya que solo hay que añadir tantas baterías como servidores se monten.
Estos grandes UPS(uninterrumpible power supplies) llegan a alcanzar entre un 92 y un 95 de eficiencia lo que significa que gran parte de esta energía se desperdicia, mientras que el sistema de baterías de Google ha llegado a alcanzar el 99.9 de eficiencia.
Cada uno de estos servidores que ocupan dos unidades en el rack, están montados sobre placas base Gigabyte, integran dos procesadores x86 que pueden ser AMD o Intel, dos discos duros Sata, y ocho ranuras de memoria RAM.
Según Google alcanzar la máxima eficiencia posible es algo importante, ya que la ineficiencia produce un calor residual que requiere de un gasto añadido en refrigeración.
Otro ejemplo que confirma la obsesión de Google por por la eficiencia energética se puede ver en el diseño de suministro de alimentación de estos servidores. Se han convertido fuentes de alimentación de corriente alterna a corriente continua, además de añadirles las baterías de 12 voltios. Este tipo de fuente de alimentación se puede ejecutar más cerca de su capacidad máxima, lo que las hace más eficientes.
Durante la conferencia Google presento los resultados de eficiencia energética de sus datacenters utilizando un estándar llamado PUE(power usage effectivess). Este estándar desarrollado por Green Grid, compara la cantidad de energía que se utiliza en el sistema informático, con los servicios auxiliares como iluminación o refrigeración.
Aunque los resultados mostrados por PUE son bastante bajos, en Google se sigue trabajando para reducirlos aún más. Durante el tercer trimestre de 2008 este medidor se situaba en el 1.21, la misma prueba en el cuarto trimestre mostraba 1.20, y en la última prueba realizada el pasado mes de marzo la cifra se situaba ya en 1.19.
Los datacenters de Google están montados en containers estándar tipo 1AAA. Cada uno de estos containers integran la friolera de 1160 servidores, y en cada centro de datos del gigante dispone de tantos contenedores como le es necesario.
El montaje de centros de datos en containers de transporte no es algo exclusivamente de Google, Sun Microsystems también dispone de un sistema de servidores similar, incluso IBM.
