Bueno pues ya está. Me puedo ir quitando la espinita que tenía clavada desde el momento en que se cambió el diseño del blog. Yo quería tener portfolio nuevo y ya lo tengo.
Voy a contaros a grandes rasgos cómo ha sido la aventurilla que además me apetece escribir un poco 😉
La versión actual del portfolio no me desagradaba en absoluto. Estaba maquetada decentemente, me había currado la accesibilidad a tope y pesaba bastante poco.
Conseguí hacer un portfolio que quedase bastante bien conjuntado con la versión anterior del blog.
El principal problema era, como ya he dicho, que desentonaba bastante al haber cambiado el diseño de la página de inicio y del blog. Y eso me estresaba. Yo lo quería todo bien agrupadito con mismo estilo y tal. Otro de los problemas ha sido el uso y abuso de efectos tipo acordeón o lightbox. Cuando yo lo empleé en el portfolio apenas había nada desarrollado (los efectos los conseguí trapicheando con script.aculo.us) pero ahora me molestaba bastante que ya no tuviese esa…»exclusividad».
En realidad barajando pros y contras pensé en seguir usando una maquetación similar. Pasaría de moo.fx [en] a mootools [en] o jQuery [en] y de lightbox [en] a slimbox [en]. Venga, manos a la obra.
Lavando la cara al portfolio
Una estructura vertical, con miniaturas de los trabajos organizados por tipo y un texto introductorio. Extras en forma de pestañicas como las del blog o que las secciones aparecerían y desaparecerían tipo acordeón. Era lo que quería y así lo hice después de unas cuantas horas photoshoperas. En este punto es importante saber que si bien Photoshop te deja hacer mil y una filigranas, a la hora de maquetar los gráficos en web puedes llevarte las manos a la cabeza si quieres que la estructura quede 100% igual que en el programa donde se preparó el diseño. Como en esto ya tengo algo de experiencia pues tampoco me quise complicar mucho.
En cualquier caso a mi lo de ponerme a meter código no me gusta para nada. De hecho reconozco que no es mi fuerte. Así pues tras haber terminado la parte gráfica pensé en encargar el maquetado y que lo hicieran por mí. Estuve muy cerca de hacerlo pero no sé si sería la alineación de planetas, el dinero que costaba o un ataque súbito de ego lo que me hizo decidir que lo haría yo solito. Con un par!
Cross browsing: enemigo público number one
Al poco de comenzar la maquetación ya me dí cuenta que el mero hecho de no controlar muy bien temas de javascript me iba a dar más de un dolor de cabeza. Leñe, una tarde entera para que mootools me funcionara! Internet será enorme pero no encontraba en ningún sitio el código para hacer funcionar el efecto acordeón! Que si bla bla bla, versión tal y cual, variable omega… yo lo que quería era un copy-paste! ¿Tan dificil es que para los novatos en esto como yo nos pongan eso en la documentación oficial? Naaaada. (nota: aquí queda de manifiesto que hay veces que las ganas de querer resultados rápidos me nublan la mente). Y ya no os quiero ni contar la prueba anterior que hice con los efectos slide.
Seguimos. Echado a andar el script del acordeón pensé haber avanzado un buen trecho en el camino hasta terminar la nueva versión del portfolio. Ja! Bienvenido, mr. Cross browsing [en]. He de reconocer que aunque el diseño web también lo he tocado desde hace bastante tiempo, la cosa avanza a pasos de gigante. Y o te reciclas y te mantienes al tanto o en menos de un año se te puede haber revolucionado el percal y tú todavía abriendo pop-up a pantalla completa.
Abrí la prueba de maquetación en Explorer (7) y plof, depresión al canto. Unos cuantos kilobytes me habían hundido la euforia de poder ver un diseño nuevo en escasas fechas. Fue en este momento donde el montaje del portfolio sufrió un importante punto de inflexión. Volví al principio. No terminaba de convencerme el hecho de emplear una estructura muy parecida a la anterior. Tocaba reconsiderar la maquetación, el sistema de actualización…y el diseño.
A la segunda, ¿va la vencida?
En este segundo diseño primaba el visualizar los proyectos de manera rápida. Opté por un sistema que aunque iba a quemar algunos ratones por la cantidad de scroll que iba a haber, parece que daba buenos resultados. Me remito al hecho de que hay gran cantidad de portfolios en la red con estructura similar. También sabía que la web iba a pesar más debido al uso de imágenes de tal tamaño y que quizá a usuarios con una conexión de baja velocidad esto les echara para atrás a la hora de visitarla. Es cuestión de valorar pros, contras, el público al que va dirigido el portfolio y bla bla bla. Un poco de estudio de mercado y márketing casero 😀
No obstante seguía teniendo un problema que arrastraba incluso desde la versión anterior: la facilidad de añadir nuevo contenido. Quería que fuese algo sencillo, semiautomatizado. No tener que editar el html cada vez.
Indexhibit: la luz al final del túnel
Llevaba tiempo conociendo la existencia de Indexhibit [en] y pensé que sería un buen momento para aprender a usarlo. Previamente barajé la posibilidad de instalar la versión «lite» que existe de wordpress pero no sé si el servidor aguantaría con tanto y me habían comentado que este otro cms era bastante bueno en lo que a consumo de recursos se refiere. A probar se ha dicho!
Si el día que probé Textpattern me sentía perdido, ahora no veía ni donde ponía los pies. No entendía nada de nada de la casi inmaculada estructura del panel interno. ¿Pero dónde está el boton de escribir post? ¿Y los plugins? Ayyy qué daño me ha hecho WordPress!
Iba a tirar la toalla, pasar a otra cosa y dejar la idea de cambiar el portfolio para otra vez. Lo que pasa es que esta vez me puse cabezón y me dije: «o aprendes a usar este cacharro o el portfolio te lo haces con el paint.» Y aprendí a usarlo; por encima, pero al menos sé cómo utilizarlo. En realidad no es un sistema complejo y como yo quería algo sencillote creo que dí en el clavo a la hora de elegirlo como herramienta para hacerme la carpeta digital de trabajos.
Cross browsing strikes back!
Por ponerle alguna pega a Indexhibit pues diré que hay pocas plantillas disponibles…de hecho creo que no hay ninguna. Pensaba tomar alguna como base y adaptarla a lo que yo quería. Si os pasáis por la web de Indexhibit [en] veréis justamente la plantilla que viene por defecto. Eso sí que es web 2.0!
Me tuve que rehacer las hojas de estilo prácticamente en su totalidad y os recuerdo que unos párrafos más arriba he dicho que a mi lo del código, ni fu ni fa. No es que no se me de muy mal pero prefiero pelearme con glows en Photoshop que con pseudoclases. A pesar de todo he tenido que trabajar bastante en este aspecto y creo que del css original debe quedar menos de un 5% y si queda!
No negaré que ha sido estresante y gratificante a partes iguales. Con estos trabajillos adquieres conocimientos: te peleas con los diferentes navegadores para conseguir que se vea todo pefecto o casi perfecto en el caso de navegadores antiguos (Opera, Safari, Firefox, Explorer 7 y Explorer 6 estuvieron abiertos a la vez en varias ocasiones), empleas condicionales, te encuentras con imprevistos y nuevos problemas al realizar un nuevo cambio, recargas la página chorrocientas veces, subes y bajas cosas del FTP si no quieres probarlo en local… una odisea. Pero cuando lo ves todo terminado (a falta de un par de detalles que ya apenas tienen que ver con código) te quedas embobado y te echas hacia atrás en la silla resoplando por el esfuerzo, satisfecho por un trabajo decente (al menos a opinión personal).
Eso sí, también piensas: ¡Nunca más!
Armando, dejame que te diga una cosa…
El portafolio es GENIAL!!!
Me encanta lo bien integrado que queda (ahora 😉 con el resto del blog. Sencillo y muy usable. Quizá la única pega que le pondría es que a la hora del scrolling por los trabajos del porta el menú principal de proyectos también baja, lo cual dificulta un poquillo cambiar diractamente desde la parte inferior. Pero como ya te digo…por poner una pega o ser muy crítico, pq como te decía me encanta.
Muy buen trabajo amiguete. Ahora me gusta un poco más tu blog…q ya era mucho.
Un abrazo, maestro!! 😉
Felicidades Skeku, por el portfolio y por los trabajos, me han gustado mucho.
Hola Armando:
He estado viendo tu nuevo y limpio portfolio y he de decirte que me guardo mi opinión para más adelante (estas cosas hay que madurarlas un poco…).
Te ha quedado, como dice vangarret, bien integrado con el blog, pero hay dos cosillas: lo de YEAH al final de cada sección, que no entiendo a que viene y…
que no me gusta tu firma :D, la esperaba algo más curradilla.
Hay que ver lo que te has currado el portfolio y la verdad, yo que al mío de he cambiado el diseño (a mi nivel) cienes de veces, comprendo el sufrimiento que da.
Bueno, próximamente la crític a de verdad :mrgreen_wp:
Saluditillos
@vangarret: lo del menú que se mueve fue uno de los GRANDES problemas que tuve. En un principio estaba fijo y sólo hacía scroll la parte de los trabajos. Pero eso acarreaba un problema nuevo: ¿qué pasa cuando la cantidad de trabajos supera el alto de la ventana del navegador? Por eso tuve que hacer que se desplazara :S
gracias, lovecolors 😀
Artysmedia, lo del yeah es para marcar los enlaces vistos. Es algo que tengo que mirar un poco más pero le da ese tono cutre-casposo que quería xD.
Sobre la firma, poco se puede hacer. La hice con la wacom y me salió un poco feucha pero es, básicamente, muy parecida a la mía real. Nunca he tenido una firma de «pro» xD
Te va a parecer que parafraseo a los anteriores comentaristas, pero es que es así, te ha quedado fino fino y muy bien integrado con el blog.
Por cierto… eso que he visto nada mas entrar… es… es… Pete Splatt!? Diosmio rodillas al viento!
Cuando ya tienes bastante tiempo trabajando en este tipo de cosas se te hace más facil, yo nunca he tenido tiempo para entender bien el funcionamiento correcto de wordpress, pero este año lo empezare a utilizar.
Bueno tambien este es mi primer post y soy estudiante de Diseño en Chile este blog fue de los referentes que siempre tuve para aprender mas junto a http://www.alzado.org/
GRACIAS!
Felicitaciones
Pero qué jodido es hacerse las cosas para uno mismo eh?!
Enhorabuena artista, blog y portafolio no podían estar más integrados.
Mi más sincera enhorabuena! Eres un crack, no sólo por los resultados del portafolio, que ya hablan por sí solos, si no por el hecho de compartir con todo el mundo el proceso que has seguido y la tecnología que has empleado para realizarlo. Esos detalles nos ayudan bastante a los lectores (o por lo menos a mí :D)
Skeku for teacher! ^^
Ostiiii, lo que no había mirado era el tráfico de datos. Ayer me ventilé 9 gigas de la transferencia mensual cuando lo normal son 2 y algo xDDD Espero que mejore la cosa en breve.
Gracias por los comentarios, esperaba más comentarios negativos sinceramente.
Rude: Pete Splatt is god!
Hola de nuevo Skeku:
Como al parecer quieres que te critiquemos un poco y que no te lamamos tanto el c* :mrgreen_wp:, me voy a poner en plan criticón (modo en que parezco hasta detestable, jeje) e indicarte unas cuantas cosas que, a mí, no me gustan.
_ Sigo pensando que lo del YEAH no se entiende; hasta que me lo has explicado no me había dado cuenta de lo que era.
_ Aunque tengo muy buena vista y buen monitor, el sombreado que poner en el título de las secciones del menú vibran y parece que se me emborrona la vista, no son muy legibles. El tamaño de texto del contenido de cada sección me parece un pelín pequeño aunque se lee perfectamente.
_ Supongo que poner el título de las secciones en dos idiomas a la vez es para ahorrar y parece una inteligente solución, pero ensucia un poco el menú y los paréntesis «ocultan» la parte en castellano al hacerlos más prominentes (la vista se dirige hacia ellos).
_ Vuelvo a suponer que la descripción de cada uno de los trabajos la has puesto arriba para sostener el espacio que se marca con la barra gris oscura superior, pero como bien dice por ahí mi bien amado Jacob Nielsen (a quien muchos odian :annoyed_tb:) la gente se ha acostumbrado a no hacer caso de los banners superiores, ignorando los cuadros de ese estilo confundiéndolos con publicidad (me ocurrió a mi, la primera vez que entré y hasta un segundo vistazo buscando la descripción, no me fijé en la parte de arriba). El año de la descripción lo noto solitario y el título poco prominente.
_ El logotipo-cabecera te ha quedado genial (envidia :mrgreen_wp:), sigue claramente tu estilo que te identifica muy bien.
_ El contenido del portfolio se te ha quedado un poco desangelado en cuanto a contenido (alguna de las piezas antiguas las echo de menos :cry_tb:), pero supongo que hay queir reciclando el portfolio de vez en cuando…
Y, de momento, nada más. Si quieres más latigazos, aquí me tienes para lo que haga falta :P, pero como eres un genio seguro que no…
Para el resto de amigos de esta lista de comentarios, deciros que sólo son opiniones ¿eh? No seais muy malos conmigo, aunque seguro que alguna puyita ya caerá :rolleyes_tb:
Ah! Skeku, a ver si arreglas lo de la transferencia que sino te cortan el tema… ¡A currar!
Se agradece enormemente el comentario Roberto 🙂
-Lo del yeah me lo anoto. No cae en saco roto pero tengo que decicir realmente si lo cambio y pongo algo más…estándar.
-El sombreado he pensado en quitarlo. Pero quería probar cosillas con sIFR y lo del sombreado me encanta. Lo que sí posiblemente haga es rebajar un poco más la opacidad.
-Sobre el tamaño de fuente, date cuenta que está maquetado para verse a 1024*768 (incluso a 800*600 todavía es «navegable). Es una restricción que me impuse 😀
Y….sigo luego que me solicitan xD
Seguimos.
Lo de poner el añadido «inglés» en los títulos de sección pues, y sinceramente, no tiene ningún otro valor más que el de adornar. De poner algo en inglés, pongo una versión alternativa completamente en ese idioma. Es otra coña simplemente 😀
Lo de la descripción sí que está hecho un poco adrede. Si bien es información relevante, me gustaba más que el visitante mirase antes las imágenes y por eso el texto no aparece tan resaltado.
Lo del contenido…es que no me ha dado tiempo a prepararlos todos 😉
Dudo mucho que te peguen un toque. Coñe las opiniones son de todos los gustos y las críticas igual. Si no soy capaz de levantar la mirada de mi ombligo, mal voy en esta profesión.
Kaixo Skeku!
Empezando por el final: si no puedes levantar la mirada del ombligo, será que te bebes demasiadas cerbezas y ya la tripa te rebasa 😀
Lo de los toques lo decía porque ya sabes que por el mundo virtual hay mucho troll y me dan miedo… :redface_wp:
Lo del «inglé» y el yeah y las sombras ya veo que lo tenías visto (no se te escapa una, eh?).
Se me olvidaba decirte que me gustaba más la versión 2.0, que mostraste en otro post (Versión 2.0 portfolio). Una pena que no pudieras seguir por ahí.
Por el tamaño del texto, como miro internet a 1920x no se cuantos pes será ello, pero ya te digo que se veía muuu bien.
Procastineando un poco os diré que esto en la academy con uno de los 5 nuevos computers que estoy instalndo (Ay de mi!) y he de decir que el teclado que me han puesto (Labtec) va de vicio (En casa tengo clección de teclados de tantos que he probado). Muy recomendable, pequeñito, letras gordas y suave suave.
Saluditillitos cordialitillos :laugh_tb:
Me gusta mucho el diseño del nuevo portafolio,
bueno hace un tiempo he tenido cierto poroblema al leer los titulos pk salen grices y gigantes, al observarlo en ie aparecen normales
es algo con mi firefox?
bueno me despido diciendo k este blog me gusta mucho y lo visito todos los dias, asi k no dudeis en seguir escribiendo a diario!
Walo es posible que sea cosa más bien de flash que del navegador. Los títulos de los posts usan sIFR, una técnica que los reemplaza por texto en flash. Pero me extraña eso que comentas, la verdad :S
Y gracias por los piropos! 😀
Ah entonces entiendo!
lo k sucede es k yo uso la extension de firefox k deshabilita los flash d las paginas, debe ser eso , bueno averiguaré como permitir los flash para este blog
un saludo!
Hola! He estado leyendo atentamente tu post. Me ha parecido sumamente importante la importancia que le brindas a la accesibilidad, a la rapidez de carga, a la gestión eficiente y a la atención que le prestas al usuario. Todas estas cosas no se encuentran facilmente en alguien que se preocupa más por glows, como tu dices, y realmente tu explicación y tu portfolio comunican muchas cosas más allá de los mismos contenidos, sobre tu método, sobre tu forma de ver las cosas y sobre el trabajo que realizas por debajo de un resultado, algo que no se suele ver mucho tampoco. En definitiva, enhorabuena por el nuevo diseño y gracias por contarnos todo esto.
Saludos
Está realmente bien, como acostumbras a hacer las cosas, tanto por el contenido que tu realizas como por el que conocemos mediante tus enlaces.
Lo positivo de todo esto, es que con el paso del tiempo irás haciendo mejor las cosas aún, debe ser una de las principales ventajas de esta profesión, que por otro lado, conozco poco puesto que no me «toca de cerca», pero me sorprende siempre.
Un saludo de otro asturiano cosecha del 83.
Buen portafolio y buena crítica Roberto (artysmedia).
Hola!
Estoy intentando hacerme una web con Indexhibit pero me hago un lio tremendo…
Soy fotógrafa y querría uan web parecida a esta http://www.stefanruiz.com/, quería preguntarte si crees que es posible que pueda ahcermela yo misma y si está el programa o los pasos(tutoriales) o algo traducido al español
un saludo,
belen
Belen, por defecto el diseño de indexhibit es básicamente ese que muestras así que no creo que tengas muchos problemas para montarlo.
Qué problemas tienes? Ya has conseguido instalarlo?
Cómo se puede ver tu portafolio?
gracias por tu historia…útil y divertida ;)!