Hace unos días una amiga me comentó que le gustaría tener una página web con sus datos a modo de curriculum vitae. Me parece una buena idea. Teniendo en cuenta el mar de curriculums que tienen las empresas para elegir, quizá el hecho de poseer un curriculum web puede ser ese elemento diferenciador que haga que se fijen en ti. Esta amiga tiene conocimientos de informática a nivel usuario así que, en principio, la remití a servicios online tipo Wix que dispone de varias plantillas para crear webs tipo curriculum. También le mostré otras opciones. Las miró pero, por una u otra razón, no era lo que buscaba. Ella buscaba algo atractivo pero simple y directo.

Podría desarrollar esa página pero creo que es mejor “enseñar a pescar que regalar el pescado”, así que me decidí a crear una plantilla simple, atractiva y de apariencia profesional. Y, en este post, le explico a ella, y a quien quiera, lo siguiente:

1. Cómo modificar esa plantilla para incluir los datos de su curriculum vitae
2. Cómo subirla a Internet , disponible para todo el mundo, a coste cero (sin necesidad de pagar un hosting de alojamiento). Para ello utilizaremos dropbox
3. Cómo conseguir un dominio tipo “tu_nombre_o_lo_que_quieras.tk” de forma gratuita.

Pincha en la imagen para ver el ejemplo.

[nota]Este post esta dirigido a personas con poca o nula experiencia en programación[/nota]

La plantilla está hecha con HTML5, CSS3 y Javascript y su uso es completamente libre. Para modificarla es necesario meterse en su código aunque, con las indicaciones que incluyo en este post y los comentarios que hay en la propia plantilla, creo que cualquier persona puede adaptarla a sus necesidades aunque no tenga ningún conocimiento de HTML. 

Crea tu curriculum web

Antes de nada deberemos comenzar por:

• Descargar Notepad++;  es el programa que utilizaremos para modificar la plantilla. Básicamente es como el bloc de notas de Windows solo que con muchas funcionalidades más. Pinchas en Download e instalas. La instalación es muy sencilla del tipo aceptar-siguiente-siguiente.
• Descargar la plantilla del curriculum

Una vez descargada  la plantilla la descomprimes y verás una serie de archivos y carpetas. Si pinchas en el archivo index.html se abrirá en el navegador la plantilla con los datos de ejemplo. Ese es el archivo que tenemos que modificar para añadir nuestros datos. Para ello pinchamos sobre index.html con el botón derecho y luego en Edit with Notepad++.

Veremos algo similar a esto:

Si es la primera vez que ves código te resultará bastante incomprensible (bienvenido al mundo del desarrollo web XD) pero no te preocupes… con la siguiente lista de indicaciones podrás  modificarla  sin muchos problemas:

1. Salvo casos excepcionales solo tienes que modificar los textos de color negro.
2. Los textos en color verde son comentarios de código que no se verán en la web. Hay tres tipos de comentarios en verde:
   • Comentarios de sección. Su objetivo es que te resulte más sencillo localizar el código que  corresponde a cada bloque o sección. Están escritos en mayúscula. Tenemos menú superior en negro, bloque de nombre y foto  y las distintas secciones, datos personales, presentación, formación , experiencia etc.
   • Comentarios de indicaciones; señalan cuales son los textos que debes modificar.
   • Otros. si no comprendes lo que dicen no son importantes a la hora de modificar la plantilla
3. Cambiar la foto. Requiere los siguientes pasos:
   1. Buscar una foto adecuada. Lo ideal es que sea de 200px por 200px y que la cara esté completamente centrada.
   2. Si no dispones de una de ese tamaño puedes utilizar resizeyourimage un servicio web que te permite redimensionarla  de forma sencilla. Subes la imagen pinchando en seleccionar archivo, pones 200 tanto en width como en height y juegas con el zoom y el posicionamiento hasta conseguir una foto de 200 de alto y 200 de ancho bien centrada. Pinchas en el “donuts” y guardas.
   3. Guarda la foto con el nombre foto.jpg
   4. En la plantilla dirígete a la carpeta img y sustituye tu foto por la de la chica de ejemplo.
4. A medida que vayas modificando y sustituyendo elementos recarga la página en el navegador (tecla F5 del teclado) para comprobar que los datos cambian y que no hay problemas con el diseño.
5. En la mayoría de los casos simplemente tendrás que sustituir los textos o datos del ejemplo por los tuyos. sin embargo, puede darse el caso que necesites añadir o eliminar elementos de una lista por ejemplo. Veamos como se haría:

Supongamos que queremos añadir un nuevo dato en la sección de Datos personales. El código que se corresponde es el siguiente:

<span class="personal">Email:</span> Aquí tu dirección de correo<br />
<span class="personal">Teléfono:</span> Aquí tu dirección de tlf<br />
<span class="personal">Dirección:</span> Aquí tu dirección<br />			
<span class="personal">Fecha de nacimiento:</span> Aqui tu fecha de nacimiento<br />

Supongamos que queremos añadir el campo de nacionalidad. Para ello tendríamos que copiar una de las líneas anteriores y modificar tanto la etiqueta como el valor del campo de forma que nos quedaría asi:

<span class="personal">Email:</span> Aquí tu dirección de correo<br />
<span class="personal">Teléfono:</span> Aquí tu dirección de tlf<br />
<span class="personal">Dirección:</span> Aquí tu dirección<br />			
<span class="personal">Fecha de nacimiento:</span> Aqui tu fecha de nacimiento<br />
<span class="personal">Nacionalidad:</span> Españao<br />

Del mismo modo si quieres eliminar un campo deberás eliminar toda la línea.

[nota]Evidentemente, el hecho de modificar esta plantilla siguiendo las breves explicaciones no va a hacer que aprendas desarrollo y maquetación web. Sin embargo, puede resultar una aproximación interesante a este mundillo y puede que te sirva de explicación para vislumbrar que es lo que hacemos los informáticos tantas horas delante de un pc.[/nota]

Sube tu curriculum a Internet 

Una vez tengas tu curriculum web terminado tendrás que subirlo a Internet para  que pueda ser visible por todo el mundo. Normalemte para subir una web necesitaríamos un servicio de hosting donde alojarla. Sin embargo, esta web no necesita de ningún servidor para poder visualizarse de forma que podemos usar nuestro dropbox a modo de hosting.

Simplemente deberás meter todo el proyecto en la carpeta public de tu dropbox. Una vez hecho esto dentro de dropbox pincha en el archivo index.html con el botón derecho y luego en Copiar vínculo público. Obtendrás un enlace del tipo:

https://dl.dropboxusercontent.com/u/4496121/Plantilla_curriculum/index.html

Al abrirlo podrás ver tu flamante curriculum web.

Obtener un dominio personalizado

Como es lógico, no podemos enviar nuestro curriculum web con una url tan fea. Lo ideal seria comprar el dominio.com de tu nombre que costaría unos 5-10 euros/año. Sin embargo si no quieres gastar ese dinero puedes utilizar los dominios gratuitos que ofrece  DOT.TK. Para ello entras en el servicio y en el cuadro de dialogo escribes tu nombre o el dominio que te interese y pinchas en GO. Te aparecerá una ventana como la siguiente en la que deberás cubrir los datos:

Luego simplemente tendrás que registrarte con un email y contraseña o mediante servicios como Gmail o Facebook.

Finalmente podrás entrar en tu curriculum web poniendo en el navegador la url con el dominio que acabas de crear. A veces tardan un poco en darlo de alta así que si no te entra al principio no te preocupes.

http://eugeniamontesinos.tk