Historia del Sitio carlosmota.eu
Introducción
Todo comenzó el 11-12-2004, porque ésta fue la fecha de creación del archivo de Word, donde comencé a escribir las ideas iniciales para el desarrollo de este proyecto.
Cuanto al dominio carlosmota.eu, esto está registrado desde el 31-08-2007, por lo que fue en ese momento que comencé a pensar más seriamente acerca de este proyecto.
Esto significa que entre la idea inicial y el lanzamiento de este sitio hace más de 9 años.
Pero si tenemos en cuenta la fecha de registro del dominio al 31-08-2007, luego pasó a poco más de 6 añitos entre el momento de la génesis del proyecto y su presentación en sí, así que no fue hasta mu... (suspiro)
Durante este período sólo había una única página con un mínimo de información en esta dirección, que incluía poco más que el correo electrónico de contacto, e incluso no hay divulgado el sitio.
A pesar de ir actualizando con los años dicha documento de Word con las ideas que hay tenido y tener un montón de investigación en internet para este proyecto antes de comenzar su producción efectiva, el trabajo en Photoshop comenzó a 25-04-2012 y la producción del sitio en Dreamweaver comenzó a 11-06-2012.
También hay registrado el dominio carlosmota.pt en 01-05-2012, por lo que podemos considerar Mayo de 2012 como la fecha en que yo hay subido las mangas de la camisa y en realidad hay comenzado a sudar a chorros con este proyecto.
Por lo tanto, considerando todas las cosas, solo me llevó 22 meses para la producción real de este proyecto y si yo había estado trabajando a tiempo completo no pasaria más de 12 meses, que no es mu... (suspiro enorme)
Esta introducción sirve básicamente para decir que este proyecto me ha dado una gran molestia.
Lluvia de ideas
¿Cómo surgió la idea del concepto de este sitio?
En un momento de genio inspirado! La respuesta era tan hermosa, pero en realidad sólo podría ser si consideramos que el tiempo se extendió por 9 años. Me hago eco de las palabras de Thomas Edison: "el genio es 10% inspiración y 90% transpiración".
La lluvia de ideas no hay ocurrido solamente en un momento, pero durante un largo periodo de tiempo, especialmente el los dos últimos años cuando empezé a centrarme más en este proyecto.
Sin embargo, puedo afirmar un momento Eureka, en el que muchas cuestiones relativas a elegir el estilo y los elementos de diseño, y cuál el camino a seguir, encontraron una respuesta cuando hice la idea del concepto principal que podemos asociar con el lugar: el sitio/tarjeta en línea debería ser igual a la tarjeta de visita en papel.
Concepto
Este sitio Web es del estilo Tarjeta de Visita y la tarjeta en línea es igual a la tarjeta en el papel, pero la tarjeta digital muestra varios menús con contenido y características que la tarjeta en papel (todavía) no puede mostrar.
Este tipo de diseño tiene que ver con el concepto de nombre extraño, llamado Skeuomorfismo (Skeuomorphism o Skeuomorph en Inglés).
Tengo un sitio Web creativo y original, porque no sé de ningun igual, pero en millones de sitios Web existentes es posible que me perdí uno o otro.
Conozco una docena de sitios muy buenos del estilo de Tarjeta de Visita, pero ningún en que la imagen de la tarjeta en línea es igual a la tarjeta en papel.
Me encanta el bajo relieve de la impresión tipográfica en la tarjeta en papel y traté de reproducir en la tarjeta en línea, pero fue un reto enorme para crear este efecto en línea porque la opción monocromo (blanco y negro) de mi tema principal volvió muy difícil para crear el efecto de la impresión tipográfica.
Además fui al mismo tiempo creando la tarjeta de línea y la tarjeta en el papel, ya que no pudo terminar el diseño de la tarjeta en papel y imprimir las tarjetas sin terminar la tarjeta digital con el fin de estar seguro de que ambos podrían quedarse iguales.
Para complicar aún más las cosas decidí que iba a usar el menor número posible de imágenes, reemplazándolos con iconos de texto y buscando crear la tarjeta en línea esencialmente usando HTML5 y CSS3. Por lo tanto, fue necesario convertir casi todo el trabajo de Photoshop para el código, y las CSS3 todavía no tienen la flexibilidad de Photoshop.
Método de Trabajo
Pasaron cientos de horas para crear este sitio, a partir de la primera descripción conceptual, hasta su finalización. Los documentos de Word en que yo estaba elaborando la descripción del proyecto tuvieron 460 revisiones y un tiempo de edición total de 177h. Esto sólo relativo a la descripción del proyecto, sin tener ninguna línea HTML escrita.
El trabajo real de la creación del sitio es de varios cientos de horas y contar todo el tiempo con exactitud es imposible, porque un montón de pensar en ello y algunas ideas me vino en tiempo de no trabajo, es decir, el tiempo que debería ser para hacer otras cosas, como ... dormir. Dicho de otra manera, significa que he perdido muchas horas de sueño en la cama pensando en el proyecto, buscando mentalmente visualizar soluciones estéticas y funcionales, mucho antes de empezar a construir el sitio. El momento Eureka que he mencionado antes llegó precisamente en una de estas noches. He probado decenas de diferentes soluciones en el papel y mentalmente, antes de empezar en realidad a construir el sitio.
En lo mencionado documento del Word yo describi todos los componentes de este proyecto: Información General, Características, Lenguages y Frameworks, Aplicaciones Web, SEO, Redes Sociais, Documento de Trabajo, Menús, Diseño, Pre-lanzamiento, Lanzamiento, Post-lanzamiento, Objetivos.
Además yo también estaba escribiendo un diario detallado de la realización de tareas (normalmente una tarea se dividia en varias otras tareas más específicas), de los problemas y soluciones encontrados y nuevas ideas y características que iba decidindo implementar
A pesar de la hipótesis de utilizar una aplicación Web para la Gestión de Proyectos y otra de Depuración/Seguimiento de Incidencias para gestionar este proyecto (y otros en el futuro), y incluso haber investigado, estudiado y probado algunas aplicaciones para este fin, terminé me quedando con el viejo y simple doc del Word (un documento de descripción del proyecto y otro para el diario) para la Gestión de Proyectos y con los navegadores (y sus herramientas) para la Depuración.
Creo que este tipo de aplicaciones de Gestión de Proyectos y Depuración/Issue Tracker es fundamental para el trabajo colaborativo, pero en el caso de el trabajo sólo, el doc va haciendo el truco, pero quizás en el futuro voy a utilizar este tipo de aplicaciones.
Photoshop
Empecé a trabajar en Photoshop para crear imágenes de fondo. Busqué texturas de mármol y madera a utilizar para los fondos. Más tarde me decidí a utilizar una imagen de secretario en lugar de utilizar sólo una textura de madera y luego la solución fue fotografiar a mi mesa de trabajo, que yo mismo había elaborado y enviado a hacer, y tengo hace varios años.
El concepto de integración de lo físico con los elementos digitales subió otro nivel con esta opción, pues que lo secretario y la tarjeta que se ve en el sitio en línea corresponden a la imagen de la mesa y tarjeta que uso en el mundo real.
Hice 40 fotografías de lo tablero del escritorio para elegir una que todavía tenía un montón de trabajo de Photoshop para cortar, tratar, evaluar y aplicar los efectos que quería.
La creación del logotipo que me identifica me hay consumido mucho tiempo, ya que se prolongó durante varios meses y hay analizado docenas de fotos, y probado en Photoshop 12 fotos de diferentes épocas. La primera foto que probé funcionó bien, ya que la iluminación de la fotografía permitió crear el efecto que yo quería en lo logotipo. El problema es que esta foto tenía unos 7 años y yo quería usar una foto más reciente. Así que empecé a buscar entre mis fotos para encontrar una que podría proporcionar el mismo efecto, pero que fuera más reciente, preferiblemente del año 2012. Ninguna hay servido lo objectivo y luego hizo nuevas fotos de retrato para este propósito, pero me di cuenta de que la iluminación de la imagen tenía que ser muy precisa para lograr el efecto que pretendía, por lo que este primer grupo de fotos tampoco hay servido. Más tarde realicé una nueva serie de fotos y hay hecho el ajuste gradual de la iluminación artificial para encontrar el ángulo exacto de la luz que se parecía a la primera imagen probada. Pero en esta primera foto la luz era natural y el resultado mejor. También me di cuenta de que después de afeitar el cabello (lo que ocurrió en esta serie de fotos) ya no era posible conseguir el efecto deseado, ya que al aplicar el efecto en Photoshop la área de la cabeza hay desaparecido. Así que más tarde realicé una nueva serie de retratos con luz natural y se me ocurrió usar una gorra con el fin de definir el contorno de la cabeza y así resolver el problema. La elección recayó en una boina vasca que ya tenía desde hace algún tiempo. En esta última serie, que se prolongó durante dos días, he realizado 56 fotos, habendo sido elegida la penúltima de ellas para usar en la creación del logo, pues que era la que tenia las mejores condiciones de luz (brillo, contraste, ángulo de incidencia) y expresión facial. Hay un detalle curioso en relación a la fecha en que se tomó esta foto que sirvió de base para el logo: realicé la foto en 12-12-12.
Yo hay concebido el diseño de la tarjeta de papel y de la tarjeta en línea también en Photoshop. Primero me hay enfocado en la tarjeta de papel y después de una larga investigación y análisis hay decidido que la tarjeta en papel sería de lo tipo impresión tipográfica en un color (negro), con aplicación de bajo relieve en la zona de impresión, formato 85x55mm, en papel 100% algodón y con las esquinas redondeadas.
La tarjeta digital ahora trataría de imitar la forma, el color, la textura y el efecto de esta tarjeta en papel, que he diseñado en Photoshop. Pero antes de dar como completamente terminado el diseño de la tarjeta en Photoshop, me decidí a creálo en HTML5 y CSS3, para asegurarme de que podría reproducir el efecto visual total en código y poder en lo fin volver a Photoshop y hacer algunos ajustes eventuales y entonces dalo por terminado.
Uno de los mayores desafíos fue tratar de emular en la tarjeta digital lo bajo relieve de la impresión tipográfica de la tarjeta en papel, ya que es muy difícil crear este efecto digitalmente cuando se utiliza solo negro sobre la textura blanca del papel 100% algodón.
Aún hay un detalle importante que ressalvar - tuve que crear dos tarjetas digitales: una que sirvió de base para la creación de la tarjeta en línea y otra para hacer la impresión tipográfica de tarjetas en papel. En la primera tuve que crear efectos de relieve que en la segunda no eran necesarios porque el objetivo fue la impresión, donde el papel y la impresión originava estos efectos. Además el tamaño y la resolución es también diferente.
Curiosamente fue muy difícil encontrar una buena textura de papel 100% algodón para utilizar como fondo de la tarjeta en línea. Las fotos de la tarjeta en papel 100% algodón por lo general no tenian área de blanco suficiente para que yo pudiera utilizarlas y el efecto de la textura no era el mejor. Después de una larga búsqueda logré encontrar una textura que me satisfizo, pero al final terminé usando mi foto de lo papel 100% algodón que entretanto hay comprado.
Antes de llegar a la idea del concepto de tarjeta en línea ser igual a la tarjeta en papel yo planeaba crear una tarjeta en línea de plástico y tenía una descripción avanzada de este diseño. Como no quería descartar por completo este trabajo y cómo había decidido desde el principio que el contenido textual del sitio existiria en 3 idiomas, decidí entonces que el diseño tendria tanbien la opción de 3 temas, siendo el tema principal la tarjeta en papel pero tiendo también a la disposición temas alternativos en plástico y translúcido. Así también hay investigado texturas de plástico para utilizar en estos temas alternativos, aunque al final yo he creado la textura de plástico en Photoshop.
Produção
De aquí me fui al desarrollo del propio sitio, tendo de convertir en código HTML5 y CSS3 todo el diseño creado en Photoshop.
Decidí no utilizar Flash y utilizar el menor número posible de imágenes, creando las funcionalidades con Javascript y tratando de reemplazar los iconos de archivos de imagen por iconos de imagen de fuentes (dingbats) y esencialmente crear la tarjeta en línea usando HTML5 y CSS3.
Conseguí este objetivo pues que uso muy pocos archivos de imagen en el sitio, a pesar de utilizar una gran cantidad de imágenes, especialmente en los iconos.
Al igual que en Photoshop, uno de los mayores desafíos fue buscar reproducir en la tarjeta en línea lo bajo relieve de la prensa de la tarjeta en papel. Se tomaron docenas de pruebas con CSS3 para encontrar los valores exactos de las propiedades CSS que estaban más cerca de los efectos creados en Photoshop. Para conseguir los efectos más realistas posible, he tenido que hacer ajustes en el pixel, y en algunos casos en medio pixel (representación de subpíxeles).
También tuve que buscar mucho para encontrar los componentes de javascript que me permitiera obtener el dinamismo y funcionalidad que hay idealizado, y tuvo que buscar componentes alternativos a medio camino, debido a incompatibilidades con algunos navegadores (principalmente con IE), además de tener que adaptarlos a lo que quería hacer y efectuar algunas correcciones de errores.
La creación de los dos temas alternativos al tema principal también significó un gran trabajo de investigación y sobre todo muchos ensayos hasta encontrar los efectos de materiales y colores que quería, en un resultado con equilibrio entre los 3 temas (Papel, Plástico, Translúcido).
Además de estos tres temas hay un cuarto tema (que no está disponible en las barras de temas) llamado 'Transparente'. En la ventana 'Ayuda del Sitio' yo informo sobre este tema, pero sólo aquí proporciono la ubicación del enlace que activa este tema: para activar el tema 'Transparente' simplemente haga clic en mi nombre en la parte inferior de la tarjeta, en la indicación de los derechos de autor.
He buscado que esto sitio podría ser visto en diferentes dispositivos de diferentes tamaños sin perder calidad ni la legibilidad, desde un teléfono inteligente a un monitor de escritorio, a través de las tabletas. Al nivel de las resoluciones significa que van desde las resoluciones más comunes de un teléfono inteligente - 320x480px, hasta Full HD - 1920x1080px o incluso resoluciones superiores, como 2048x1536px.
Y como la tendencia tecnológica es un aumento constante de las resoluciones - hasta varias veces Full HD (ya hay prototipos de sistemas con resoluciones de vídeo 8xfull-HD, es decir 7680x4320px, designado sintéticamente por 8k4k) - crear diseños para el futuro significa utilizar técnicas que respondan a este escenario.
Aquí es donde aparece el concepto de Diseño Responsivo, que ajusta el diseño para diferentes plataformas y resoluciones, usando CSS3 y un diseño flexible. La aplicación del concepto de Diseño Responsivo no es sólo una cuestión de escala, sino también de legibilidad, del peso relativo de las imágenes y de vídeo (volumen de tráfico y velocidad), y de la flexibilidad de lo diseño para adaptarse a las limitaciones de la ventana del navegador o dispositivo utilizado, pero manteniendo la misma identidad visual.
La traducción de todos los textos del sitio en los 3 idiomas que hice disponible (Inglés, Español, Portugués) fue principalmente un trabajo de paciencia. Al proporcionar a los visitantes la lectura en estos 3 idiomas significa que aproximadamente 25% de la población mundial (y alrededor de 40% de la población Internauta) puede leer directamente el contenido de mi sitio, sin necesidad de máquinas de traducción que aún dejan mucho que desear.
Incluso desde el momento en que estaba todo listo de lo que sería el diseño y el aspecto visual de todo el sitio, que características tendria, y haber encontrado soluciones para conseguir lo que quería, todavía han habido muchos cambios y mejoras hasta el producto final, que resultó de una larga maduración y depuración.