Mi antiguo portfolio

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é.

Etiquetas: , , , , , , ,

Efecto de rotación con CSS

Si queremos rotar elementos no es necesario JS ni Flash, con CSS podemos hacerlo y nuestra web resultará menos pesada.

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

Etiquetas: , , , ,

Sígueme que yo te sigo

Ésta es la canción de Oscar D’ Leon sobre Twitter, bastante pegajosa.

Etiquetas: , ,

Nueva bienvenida de JobUDEP

Este ciclo mi trabajo fue rediseñar el sistema JobUDEP, la bolsa de trabajo de la Universidad de Piura, aquí los graduados pueden acceder a las diversas ofertas de trabajo de las empresas registradas.

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?

Etiquetas: , , ,

Interfaz gráfica con Qt en C++

qt-logo-code-less-create-moreQt es una biblioteca multiplataforma, producida por la división de software Qt de Nokia, que incluye aproximadamente 400 clases C++ de forma nativa, las cuales brindan las funcionalidades GUI, Base de Datos, Core, XML, Networking, Open GL, Multithreading; para desarrollar interfaces gráficas de usuario y también para el desarrollo de programas como herramientas de la consola y servidores.

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

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.

Etiquetas: , , , , ,

Regalo invitaciones para Google Wave – II

invitaciones-a-google-wave-ii

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 :D

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.

Etiquetas: , , , ,

Microsoft no escarmienta

Abril de 1998 fue un mal día para Bill Gates, durante una feria informática realizada en Chicago se presentó Windows 98, que justo en ese momento decidió mostrar su Blue Screen of Death durante la instalación de unos controladores.

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.

Etiquetas: , ,

13 casos en los que Servicio Técnico tiene la razón

Caso 1

Servicio técnico: ¿Qué computadora tiene?
Mujer: Una blanca.
Servicio técnico: (Silencio)

Caso 2

Mujer: ¡Hola! No puedo sacar el disquete de la disquetera.
Servicio técnico: ¿Ha intentado presionar el botón?
Mujer: Sí, claro, está como pegado.
Servicio técnico: Eso no suena bien, tomaré nota.
Mujer: No… no… espere. No había metido el disquete… está todavía en la mesa, gracias.

Caso 3

Servicio técnico: Haga clic sobre el icono de “Mi PC”, a la izquierda de la pantalla.
Mujer: ¿Su izquierda o mi izquierda?

Caso 4

Servicio técnico: Buenos días, ¿en qué puedo ayudarle?
Mujer: Hola, no puedo imprimir.
Servicio técnico: Por favor, dé clic en “Inicio” y…
Mujer: Escuche, no empiece con tecnicismos, no soy experta en computadoras.

Caso 5

Mujer: Hola, buenas tardes, no puedo imprimir, cada vez que lo intento dice ‘No se encuentra impresora’. He tomado incluso la impresora, la he colocado en frente del monitor pero la computadora todavía dice que no la puede encontrar.
Servicio técnico: (silencio)

Caso 6

Mujer: Tengo problemas para imprimir en rojo.
Servicio técnico: ¿Tiene una impresora a color?
Mujer: No, la mía es blanca.

Caso 7

Servicio técnico: ¿Qué ve en su monitor ahora mismo?
Mujer: Un osito de peluche que mi novio me compró.

Caso 8

Servicio técnico: Ahora, pulse F8.
Mujer: No funciona.
Servicio técnico: ¿Qué hizo exactamente?
Mujer: Presionar la F 8 veces como me dijiste, pero no ocurre nada.

Caso 9

Mujer: Mi teclado no quiere funcionar.
Servicio técnico: ¿Está segura de que está conectado?
Mujer: No lo sé. No alcanzo la parte de atrás.
Servicio técnico: Tome el teclado y dé diez pasos hacia atrás.
Mujer: Ok.
Servicio técnico: ¿El teclado sigue con usted?
Mujer: Sí.
Servicio técnico: Eso significa que el teclado no está conectado ¿Hay algún otro teclado?
Mujer: Sí, hay otro aquí. Uy ¡Este sí funciona!

Caso 10

Servicio técnico: Su password es “a” minúscula de andamio, V mayúscula de Víctor, el número 7…
Mujer: ¿7 en mayúscula o minúscula?

Caso 11

Mujer: No puedo conectarme a Internet, aparece error de clave.
Servicio técnico: ¿Está segura de que está utilizando el password correcto?
Mujer: Sí, estoy segura, vi a mi esposo escribirlo.
Servicio técnico: ¿Puede decirme cuál era el password?
Mujer: 5 asteriscos.

Caso 12

Mujer: Tengo un grave problema. Un amigo me puso un protector de pantalla, pero cada vez que muevo el mouse, desaparece.

Caso 13

Mujer: No logro encontrar el simbolito para abrir el Word.
Servicio técnico: Mire en el escritorio. ¿qué tiene ahí?
Mujer: Muchos papeles y mi bolso.

Etiquetas: , , ,

Regalo invitaciones para Google Wave

Hoy recibí mi invitación a Google Wave a mi cuenta de Windows Live (raro), parece que esos requisitos para recibir una invitación al servicio rellenando el formulario de inscripción eran mentira puesto que:

  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).

invitaciones-google-wave

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.

Etiquetas: , , , ,

¿Conoces el logo de Google?

Una imagen que vez todos los días, ¿sabes cuál es la original? Confieso que yo no elegí la correcta. Es difícil reconocer los colores reales, peor aún si te preguntan sin tener la imagen frente a ti.

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

conoces-logo-googleVía: Punto Geek

Etiquetas: ,