• URL: www.confucio.udep.edu.pe
• CMS: WordPress
• Tecnologías: xHTML + CSS + jQuery

Entradas relacionadas:

1. Ropa y accesorios en Kajo Store
2. Costa Dorada Hotel
3. Launch Page Desdemicelu.com

Para este fin debemos hacer uso de la propiedad -transform, daremos un giro de 5 grados a nuestra imagen y la agrandaremos un 10%.

-moz-transform: rotate(5deg) scale(1.1);
-webkit-transform: rotate(5deg) scale(1.1);

Debemos usar -moz-transform para navegadores basados en el motor Gecko, y -webkit-transform para que funcione con Webkit. En Internet Explorer podemos usar un filtro, pero éste sólo funciona para ángulos con incremento de 90°, así que queda descartado.

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Como ejemplo podemos hacer una pequeña galería de fotos, en el código HTML sólo debemos agregar nuestras imágenes una después de otra, podríamos hacer uso de una lista desordenada también:

<div class="contenedor">
	<a href="#"><img src="img1.jpg" alt="Imagen 1" width="150" height="101" /></a>
	<a href="#"><img src="img2.jpg" alt="Imagen 2" width="150" height="101" /></a>
	<a href="#"><img src="img3.jpg" alt="Imagen 3" width="150" height="101" /></a>
	<a href="#"><img src="img4.jpg" alt="Imagen 4" width="150" height="101" /></a>
	<a href="#"><img src="img5.jpg" alt="Imagen 5" width="150" height="101" /></a>
	<!-- Y todas las imágenes que querramos -->
</div>

Ahora añadimos el CSS al pasar el mouse sobre el elemento img.

.contenedor img{
-moz-transform: rotate(5deg) scale(1.1);
-webkit-transform: rotate(5deg) scale(1.1);
-moz-box-shadow: 0px 1px 3px rgb(0,0,0);
-webkit-box-shadow: 0px 1px 3px rgb(0,0,0);
border: 5px solid #CCC;
margin: -5px;
position: relative;
}

Hemos agregado sombra en RGB para que sea negra independiente del fondo y restado 5 píxeles del margen para evitar que los demás elementos se muevan, puesto que también tenemos un borde.

Lo malo: esto no es un standar aún.

Ver DEMO | Descargar

No hay entradas relacionadas.

Este es el diseño del antiguo sitio donde mostraba mis trabajos. Hacía uso de Coda Slider 1.1.1 y noobSlide, por lo que era una gran mezcla innecesaria de jQuery con Mootools.

Esto fue más una prueba de compatibilidad (o mejor dicho, incompatibilidad) entre navegadores en mis inicios con CSS, por lo que casi ni lo usé.

Entradas relacionadas:

1. El mejor tutorial de jQuery para principiantes
2. Launch Page Desdemicelu.com
3. Ropa y accesorios en Kajo Store

No hay entradas relacionadas.

Me encargaron 5 propuestas:

1. Este diseño está relacionado con la supuesta próxima apariencia del portal de UDEP, sólo tuve que agregar el formulario centrado.

2. Algo bastante simple, solamente con una imagen en el formulario. No me gusta tanto.

3. Más colorido, con una foto de fondo de los alumnos en su graduación. La flecha verde debería moverse verticalmente al hacer clic en las cajas de texto.

4. Este es el que más me gusta, con el Edificio de Gobierno de fondo y el formulario un poco más iluminado.

5.Este es el elegido. Sólo visible el formulario, en la barra de navegación se desplegan cuadros con más información al pasar el puntero del mouse sobre los items.

Me han gustado los tres últimos (aunque viendo bien el 2 no está nada mal) , de los cuales yo hubiera elegido el 4, espero que lo usen algún día. Para codificarlos en XHTML y darle funcionalidad no es necesario añadir Javascript, todo puede hacerse con CSS, eso es lo bueno.

A ti cuál te gustó más?

Entradas relacionadas:

1. Twitter tiene nueva cara
2. Mi antiguo portfolio

Con Qt Creator, el IDE necesario para trabajar con las librerías Qt, puedes desarrollar grandes aplicaciones para Windows, Linux y Mac, además es gratuito, puedes descargar todo el Kit de Desarrollo con licencia LGPL.

Ejemplo de trabajo con Qt Creator

A diferencia del trabajo con el API de Windows, todo aquí es más sencillo, basta con arrastrar los controles necesarios hacia tu ventana, como si estuvieramos trabajando con el viejo Visual Basic, pero repotenciado.

La gran y detallada documentación (en inglés) se puede ver en línea o en el mismo menú de Ayuda del programa. Pero si eso no es suficiente, tienes a Qt Centre, un foro donde encontrarás todo lo relacionado con este framework.

No hay entradas relacionadas.

Luego de tener acceso a GWave comencé a regalar todas las invitaciones que pude. Ahora se repite la historia, tengo 15 más para los que comenten (no manden emails por este motivo por favor). Todos tendrán acceso hasta agotar stock

Y no olviden usar Scr.im para ocultar su dirección de correo si la compartirán con todos, aunque no es necesario hacerlo; con sólo rellenar el campo Email en los comentarios basta. Vía Twitter también mandaré comentarios sobre las personas que invitan.

Entradas relacionadas:

1. Regalo invitaciones para Google Wave
2. Invitaciones para Google Wave

Y ahora, año 2009, sucede algo parecido con la presentación de Windows 7, pero sin Bill ni pantallazos, al tratar de mostrar las funciones multitouch del sistema éste se congela… por suerte no desconectaron el mouse.

No hay entradas relacionadas.

1. Con mi cuenta de Hotmail me registré hace una semana y fue ahí donde recibí la invitación, con Gmail lo hice desde hace tiempo y no pasó nada.
2. No tengo cuenta alguna como Wave Developer.
3. Uso Google Apps, pero sólo la versión standard.
4. No logré conseguir invitaciones de usuarios actuales (al menos no tengo rastro de eso).

Bien, al grano dijo el dermatólogo, tengo ahora 3 invitaciones que repartiré entre los que comenten esta entrada (deja de preferencia tu Gmail), además deben seguirme en Twitter para conocer algunas actualizaciones y hacer RT. Usando Random.org elegiré a los ganadores.

Recuerda que si vas a compartir tu correo electrónico puedes usar Scr.im o dejarlo en formato email (en) gmail.com para evitar spam.

Si quieres más posibilidades, te dejo algunos sitios donde puedes encontrar tu acceso a Wave. Pero tranquilo, no te emociones mucho que por ahora no parece ser la gran cosa.

Actualización 1

A las 9:00pm (GMT -5) cerraré los comentarios para realizar el sorteo. Estén atentos en Twitter para más novedades, recuerden que si no me están siguiendo, no podrán ser ganadores.

Actualización 2

Los ganadores son los números 3, 6 y 18:

• aythami.melian
• raycorb
• leoeguiguren

Les contactaré pero no canten victoria aún, deben estar siguiéndome en Twitter. Si no lo hicieron, se sorteará la invitación nuevamente.

Si hasta el día lunes a las 16:00 de Perú no hay respuesta de los ganadores anteriores, volveré a sortear las invitaciones, así que sigan comentando porque quedan varias.

Actualización 3: Segunda ronda.

El viernes 23 haré un nuevo sorteo de una invitación más a Wave, comenten y síganme en Twitter, sino no hay nada! No repetir los comentarios, los eliminaré si encuentro duplicados.

Actualización 4: El último ganador.

No pude realizar el sorteo ayer puesto que no tenía conexión a Internet. Finalmente, resultó ganador el número 13 (eltr3s), de la misma forma, si no cumple con los requisitos, se sortea nuevamente la invitación.

Entradas relacionadas:

1. Regalo invitaciones para Google Wave – II
2. Invitaciones para Google Wave

¿Aciertas o no? Elige una y compárala con la portada de Google sin hacer trampa.

Vía: Punto Geek

Entradas relacionadas:

1. Invitaciones para Google Wave