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:El mejor tutorial de jQuery para principiantes Launch Page Desdemicelu.com

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:

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

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

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

3. 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:Twitter tiene nueva cara

URL: desdemicelu.com

CMS: Ninguno Servicio: Página temporal (Launch Page) del portal para móviles e implementación de sistema de mailing. Tecnologías: XHTML + CSS + JavaScript

URL: desdemicelu.com

CMS: Ninguno Servicio: Página temporal (Launch Page) del portal para móviles e implementación de sistema de mailing. Tecnologías: XHTML + CSS + JavaScript

Entradas relacionadas:UCV: Interfaces gráficas de usuariosEventos en ImpactoVIP.comRopa y accesorios en Kajo Store

CMS: Ninguno Descripción: Proyecto que estuve desarrollando (a modo de práctica de programación) para escuchar música con facilidad e implementar radio streaming; descontinuado por tiempo, además porque ya existen complejos servicios así. Tecnologías: XHTML + CSS + PHP + MySQL + JavaScript + Flash

CMS: Joomla Diseño e implementación de plantilla. Trabajo para la Escuela Tecnológica Superior de la Universidad de Piura.

jQuery hace uso de las propiedades CSS para darle una mejor vista a las páginas. Siempre que veía alguna web con efectos JavaScript espectaculares comenzaba a buscar en Google nuevos scripts como Coda Slider, qTip, etc. para añadirlos a los futuros sitios que desarrollaría, pues pensaba que era complicado cuando se trataba de frameworks como jQuery y Mootols.

Pero no es así, es mucho más sencillo de lo que esperaba (al menos hasta el momento), vía @themeforest he encontrado una serie de tutoriales que ayudan bastante a entender lo básico de jQuery; están en inglés, pero eso es algo secundario. Ya he aplicado algunos efectos a una barra de navegación y hasta funcionan en IE6! Pero seguro que aún necesitaré algunos plugins para continuar mejorando los sitios web, además de ir revisando la documentación del genial framework. Enlace: jQuery for Absolute Beginners

La competencia de YSlow de Yahoo! ya apareció y es la herramienta que desde hace tiempo Google viene usando para mejorar el rendimiento de sus páginas web.

Pagespeed, lanzado hace unos días, es un add-on de Firefox que se integra con Firebug para hacernos más fácil la vida al momento de desarrollar páginas web, nos brinda diversas recomendaciones basadas en las mejores prácticas de optimización para mejorar la velocidad de carga y lo mejor es que comprime las imágenes para poder reemplazarlas inmediatamante. La herramienta está disponible para Windows, Linux y Mac OSX, y podemos instalarla ya mismo para un mejor rendimiento de nuestros sitios, además cuenta con buena documentación con instrucciones detalladas para su uso.