[tweetmeme]
Sí, como han leído, me alegro en presentarles hoy la ultima versión de mi portfolio fotográfico, que después de un mes y medio de ir de a poco definiéndolo, hoy ya está online para ser visto por todos.
El mismo ha sido (lo he) rediseñado desde 0, una vuelta de hoja completa principalmente en el código y las funcionalidades, pero tambien con un recambio en el material fotográfico presentado.
Asi es que pueden ir ahora directamente a ver mi Portfolio, o para los interesados, seguir leyendo este post en el cual comento un poco de que se trató el presente rediseño, las nuevas funcionalidades y un paso a paso sobre el uso de las mismas.
Las principales features de la presente versión son:
- Es más fácil ver las fotografías, las mismas se pueden expandir y contraer rapidamente, sin necesidad de cambiar de página o usar ventanas modales (como fancybox).
- Las categorías se convirtieron a “filtros”; al hacer clic sobre una de ellas, las imágenes pertenecientes a dicha categoría son filtradas del resto.
- Las miniaturas se muestran aleatoriamente en cada recarga del portfolio, de esta manera se disminuye el riesgo de que ciertas imágenes queden en el fondo de la página y nunca sean vistas.
- El layout es versátil, acomodándose las miniaturas acorde a la resolución del monitor, incluso al redimensionar la ventana manualmente.
- La sección Making Of fue repensada, ahora todo está en una sola página accediendo cómodamente al video como a la imágen final
- La sección BEFORE/AFTER es de lo más destacado del rediseño, en la misma se puede ver fácilmente la comparación entre la imagen original vs la imagen final
- No hay uso de animaciones Flash ; iPhone/iPad ready
; y todo esto con suaves animaciones !
si te gustó lo que viste, podes hacérmelo saber haciendo clic sobre el corazón !
Principales features sobre el diseño-web/código:
- He usado HTML5 y CSS3, junto al framework jQuery para las animaciones y Ajax.
- Ie8 , Firefox 3.6+ , Chrome . La mejor performance la he notado utilizando Chrome. En IE7 hay cosas por corregir…
- El layout fluído de las miniaturas y filtrado es gracias a jQuery Masonry, mientras que el método de expandir/contraer es una adaptación del código provisto por Mot Tie (script)
- Para el formulario de contacto he usado “Super AJAX Contact Form“
- Para la sección Before/After he usado las tabs con Ajax de “jQuery Tools” junto a “jQuery Before/After“
- Para el “me gusta” he usado “ThumbsUp“
- Para los fades en los mouse-hover he usado la técnica comentada en shopdev.co.uk
- Para el scroll animado he usado “jQuery ScrollTo“
- Para optimizar el tamaño de las imágenes he usado Smushit, mientras que para el CSS y Js he usado YUI Compressor
Paso a Paso
La página inicial del Portfolio, un layout en grilla dejando en claro que las imágenes son las protagonistas.
El fondo siempre se mantiene en gris oscuro (#1f1f1f), las tipografias en general son sin color (blanco/gris/negro) y los detalles gráficos son en verde (#92EE92) o celeste (#69ECFF):
Si bien creo suponer no es necesario explicar el comportamiento que los usuario puedan tener, paso a listar gráficamente las funcionalidades que cuenta este rediseño:
En la barra superior se encuentran las categorias, en la que se puede filtrar las fotografías según la elegida. A la derecha el menu secundario, con Contacto, Twitter, Info…
Las fotografías se pueden expandir y contraer rapidamente para verlas a mayor tamaño, sin necesidad de cambiar de página o usar ventanas modales:
La sección BEFORE/AFTER es de lo más destacado del rediseño, en la misma se puede ver fácilmente la comparación entre la imagen original vs la imagen final:
La sección Making Of fue repensada, ahora todo está en una sola página accediendo cómodamente al video como a la imágen final:
Espero que les haya gustado esta review, pero más importante espero que les haya gustado el diseño y usabilidad del portfolio asi como tambien el material fotográfico que he desarrollado hasta el momento.
saludos !
