Buenos días.

Por fin, lo he conseguido. He creado mi curriculum vitae en versión larga y en versión dinámica.

PROCESO DE CREACION DEL CURRICULUM DINAMICO:

Para realizar el CV dinámico, lo primero que hice fue pensar cómo quería que se desarrollara, para lo que primero creé el CV largo. Obviamente, debía conseguir que se vieran las obras (esto fue lo primero que desarrollé). Por otro lado, tenía interés en el apartado “Próximos hitos”. Finalmente, consideré que era interesante un menú inicial. Por supuesto, todo ello debía estar desarrollado en HTML5 y CSS3, sin emplear, bajo ningún concepto, JavaScript (no me quería liar a estudiar este lenguaje, no me interesa) o Flash (este último va a desaparecer), por cuanto ambos constituyen estándares muy actuales, y creo que mi currículum es un buen ejemplo de que con ellos, exclusivamente, se pueden realizar páginas muy meritorias (modestia aparte, jeje).

Desarrollo de las obras

Para poder presentar las obras de una forma dinámica, creé una serie de capas (DIV’s) superpuestas todas en la misma posición. Cada una de ellas dispone de un “z-index” que le indica qué capa está encima de otra. Así, primero tenemos el fondo (0), luego mi logo (1), a continuación las fotos en movimiento (2), luego el texto en movimiento (3) y finalmente la cabecera superior y los iconos de navegación inferiores (4). La idea inicial, que es la que he conseguido, era que aparecieran unas fotos de repente que se posicionaran, pasando bajo un texto, y que tanto este texto como las imágenes aparecieran por debajo de la cabecera superior y la barra de navegación inferior.

El primer problema con el que me topé es que, si quieres mover una capa, ésta no puede contener otras capas que quieras estáticas. Por tanto, dentro de las capas con z-index 2 y 3, debemos incluir otra, que es la que realmente se mueve. Aproveché esto para darle el nombre del movimiento que debían realizar, así que las capas de imágenes dinámicas se denominan “imgmove” seguido del movimiento “leftright”, “rightleft”, “updown” o “downup”, según los 4 movimientos posibles (no quise, en el caso de las obras incluir rotaciones ni modificaciones 3D, aunque se puedan hacer, ya que sería excesivo para un CV, por muy dinámico que este sea). Lo mismo hice para el texto, que se define por “txtmove” más el movimiento. De esta forma, disponemos de 4×4=16 presentaciones posibles (menos 4 que sería el caso de los mismos movimientos para imágenes y texto).

Para poder prever el resultado final donde debían complementarse imágenes y textos, muy fácil: generé una tabla con las dimensiones de la capa (800×640, la más apta para todos los monitores), donde ubiqué el resultado final, incluyendo ambos elementos, en un fichero aparte. A continuación duplicas la tabla, y después borré en cada una de ellas el elemento que no correspondía. Así originas dos tablas complementarias, una con los textos y otra con las imágenes. Finalmente, colocas cada tabla en la capa dinámica correspondiente.

Finalmente, colocamos la cabecera y los iconos de navegación en otra tabla, con las mismas dimensiones, en la última capa, la superior, y a los iconos de navegación les damos una gracia mediante a:hover scale, para que, al pasar el puntero por encima se expandan un poco, emulando el efecto Mac.

El menú principal

Una vez ya tenía todas las obras, quise realizar el menú principal. Se trataba de que estuviera compuesto de listas animadas, de tal manera que en cada apartado aparezca, al pasar el puntero por encima, los subapartados que lo componen. Así, principalmente en obras, primero aparecen las distintas empresas en las que he trabajado, y en cada una de ellas se despliegan la(s) obra(s) que he realizado. Esto se consigue mediante la combinación display:none y display:block. Pero aquí también me surgió otro problema, que consiste en que si visualizas mis obras realizadas en TEYCO, se producía un descenso de la barra inferior de navegación, por cuanto las listas rebosaban los 400 píxels disponibles, a causa de los logos de las empresas, de los cuales no quería prescindir. La solución consistió en provocar artesanalmente una position:absolute, donde yo indicara exactamente en qué lugar debía aparecer cada sublista.

Las animaciones

Finalmente, para mostrar esquemáticamente los proyectos que estoy desarrollando, quise realizar unas paranoias dinámicas. No son excesivamente complicadas, pero sí bastante efectivas. Son dos animaciones de unos 20 segundos, en los que diferentes elementos van apareciendo alternativamente, y van realizando unos movimientos concretos y desapareciendo, con fondos en movimiento o con efecto explosión.

Sólo he desarrollado dos de las tres animaciones previstas. La tercera la desarrollaré más adelante, por cuanto quiero crear un efecto diferente.

CONSIDERACIONES FINALES

La página ha sido testeada en CHROME 16.0.912.75, MOZILLA FIREFOX 9.0.1, SAFARI 5.1.2 (7534.52.7), OPERA 11.60 y EXPLORER 9.0.8112.16421. Funciona perfectamente en CHROME, SAFARI (ambos tienen el mismo motor de renderizado) y FIREFOX (si bien en SAFARI y FIREFOX se produce algún pequeño desajuste en alguna obra, básicamente porque mi navegador principal es CHROME). En OPERA no funcionan las animaciones, si bien se consiguen visualizar las obras bastante bien. Finalmente, hay otro navegador que no funciona, de cuyo nombre ni me acuerdo.

También la he testeado con el programa TOTAL VALIDATOR, así como en las páginas Validator.w3.org y html5.validator.nu. Sólo permanecen pequeños errores, principalmente en las META TAG’s, y algún que otro cellpading o cellspacing que me he visto obligado a utilizar para una mejor visualización. Esto significa que cumple sobradamente con el standard CSS3, así como las normas de usabilidad.