Advertisement
  1. Business
  2. Resumes

Cómo Usar una Plantilla HTML para Crear tu Curriculum Web Personal

by
Read Time:11 minsLanguages:
This post is part of a series called How to Make a Great Personal Resume Website (Ultimate Guide).
21 Best HTML Resume Templates to Make Personal Profile CV Websites (2021)
Should You Use an Online Resume Builder for Your Personal Site?

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Hay muchas maneras de crear tu currículum web personal.

Puedes usar uno o muchos constructores de sitios web o puedes optar por un CMS como WordPress, Drupal o similar. También puedes contratar a un desarrollador profesional para hacer uno por tí.

Con tantas opciones, puede ser difícil saber por dónde comenzar. Para hacer las cosas todavía más complicadas, cada una de éstas opciones viene con un diferente conjunto de pros y contras, por no mencionar el nivel de dificultad o precio involucrado.

Pero, hay otra magnífica manera de crear tu sitio personal en una razonable cantidad de tiempo. Y eso es usando una plantilla HTML para currículum. Son fáciles de usar y de subir a tu servidor de alojamiento.

Aquí están algunas de las mejores (para navegar rápidamente antes de continuar leyendo):

Lo mejor, el código detrás de una plantilla profesional para currículum es mucho menos complicado elegir para un novato que los lenguajes de programación más compleos usados en sistemas de gestión de contenido.

En ésta parte de la serie Creando un Magnífico Currículum Web Personal, recorremos el sencillo proceso de cómo modificar y subir una plantilla HTML para currículum.

Sigue éste flujo de trabajo para crear tu currículum web personal y personalizarlo con tu marca-para que puedas lanzar tu sitio en muy poco tiempo. 

¿Qué Necesitas para Tener Publicado tu Currículum Web Personal?

Antes que comencemos con la modificación de la plantilla, cubramos las herramientas que necesitarás para tener publicado el sitio web de tu currículum en HTML:

1. La Correcta Compañía de Alojamiento

Comprar el nombre de dominio para tu sitio es únicamente el primer paso en tu viaje. También necesitarás un servidor de alojamiento donde subirás los archivos para tu sitio web. Encontrar la correcta compañía de alojamiento no es fácil, especialmente porque hay muchísimas. La mayoría de los proveedores de alojamiento ofrecen paquetes de alojamiento básico entre $5 y $10 al mes. Algunas compañías ofrecen banda ancha y espacio ilimitado mientras otras ofrecen planes más restringidos.

Lo importante para tener en mente es que casi todos los proveedores de alojamiento soportan plantillas HTML. Cuando se busca una compañía de alojamiento, lee las FAQs (respuestas a las preguntas más comunes) y asegúrate de que la compañía ofrezca soporte al cliente, deberías necesitar cualquier ayuda con tu sitio web. También deberías hacer una pequeña investigación y leer las calificaciones de un host particular en sitios web independientes para ver qué tan satisfechos están sus clientes.

2. Un Cliente FTP

Una vez que encuentres una compañía de alojamiento, necesitarás descargar un cliente FTP. Un cliente FTP te permitirá subir tu plantilla a los servidores de alojamiento. La elección del programa FTP dependerá del sistema operativo que utiliza tu computadora.

Uno de los programas más populares es FileZilla. Es un programa FTP gratuito que es muy fácil de usar y está disponible en Windows, Mac y Linux.

3. Un Editor de Código

También necesitarás un editor de texto para realizar cambios a los archivos de tu  plantilla. Mientras que podrías usar  Notepad o TextEdit para efectuar cambios, usar un editor de código lo hará mucho más fácil. A diferencia de los editores de texto regulares, un editor de código incluye herramientas que facilitan la edición, como usar diferentes colores para diferentes partes del código lo cuál facilita ver lo que estás editando.

Para los fines de éste tutorial, estaré utilizando Sublime Text que puede ser usado en Mac, Windows y Linux y la versión de prueba puede descargarse gratuitamente. Aprende más sobre cómo trabajar con éste popuar editor de código:

4. La Plantilla HTML y las Imágenes Para Tu Currículum Web

Las últimas dos cosas que necesitas son tu plantilla HTML para currículum y las imágenes que planeas usar en tu sitio.

Para los fines de éste tutorial, estaré usando la plantilla HTML Flatrica para currículum web, mostrada aquí:

Flatrica HTML resume website templateFlatrica HTML resume website templateFlatrica HTML resume website template
Plantilla HTML Flatrica para currículum web personal

Puedes encontrar tu plantilla para currículum en el área de Descargas de tu cuenta de Envato después de que hayas hecho la compra. Una vez que hayas descargado la plantilla HTML, descomprime el directorio y guárdalo en tu escritorio para un fácil acceso.

Cuando se trata de imágenes, necesitarás tu foto de perfil y otras fotos que planees usar. También puede utilizar una imagen o motivo de fondo, así que asegúrate de tener todas las imágenes ordenadas en tu computadora para que puedas agregarlas a tu plantilla.

Cómo Editar el Contenido de Tu Plantilla para Currículum Web

Ahora que tienes todo en su lugar, es momento de personalizar la plantilla con tu información. Aprendamos cómo personalizar la plantilla HTML Flatrica:

1. La Estructura de Ésta Plantilla HTML para Currículum

Antes de comenzar a modificar los archivos, veamos la estructura de ésta plantilla HTML. Cuando descomprimes el directorio, notarás que contiene dos directorios: uno con la documentación y uno con los verdaderos archivos de la plantilla.

A look at the files included in this HTML resume website templateA look at the files included in this HTML resume website templateA look at the files included in this HTML resume website template
Una mirada a los archivos incluídos en ésta plantilla HTML para currículum.

El directorio con los archivos de la plantilla tiene varios subdirectorios adentro:

  • Colors, que tiene todos los códigos de colores y variables usadas en la plantilla del sitio.
  • Fonts, que contiene todas las fuentes de íconos.
  • Images con todos los marcadores de posición para imágenes.
  • Un directorio tiene todo el código JavaScript necesario para la plantilla funcione correctamente. En la mayoría de los casos, nunca necesitarás editar éste directorio o los archivos en él pues JavaScript proporciona funcionalidad extra como alternar el menú para abrir, controlar las animaciones del rotador de imágenes, y validar formularios.
  • Un directorio PHP que contiene código PHP necesario para que funcione el formulario de contacto. Solamete necesitarás editar una sola línea de código aquí para añadir tu dirección de correo electrónico.
  • El directori Sass contiene todas las variables para las hojas de estilo.
  • Stylesheets contiene los archivos CSS, que necesitarás para editar y añadir tu estilos a la plantilla y combinarlos con tu marca.

Aparte de éstos directorios, también hay varios archivos HTML: index-normal.html, index-video.html, single-blog.html, y single-portfolio.html.

Ten en mente que tu plantilla podría no tener todos éstos archivos y directorios, sin embargo, en la mayoría de los casos, encontrarás los directorios de stylesheets, images, JavaScript y PHP. Tu plantilla también podría tener más o menos archivos HTML.

2. Reemplazando la Información Predeterminada de la Plantilla HTML

Haz doble-click en index-normal-html (o index.html en caso que estés usando una plantilla diferente). Ésto abrirá el archivo en tu navegador y facilitará entender qué partes del código necesitarás editar y cómo encontrarlas en el archivo de tu plantilla HTML.

Browser code inspector view of the HTML templates codeBrowser code inspector view of the HTML templates codeBrowser code inspector view of the HTML templates code
Vista del inspector de código del navegador del código de la plantilla HTML.

Si observas la plantilla en tu navegador, verás que necesitarás editar:

  • Tu nombre e información de contacto.
  • La propaganda de texto arriba de los botones para descargar tu CV.
  • Diferentes secciones que tienen información sobre tu eduación, hablidades, experiencia, portafolio, clientes anteriores y más.

Una vez que sepas qué cambiar, puedes empezar a buscar el código correspondiente.

Haz click-derecho en el nombre que se lee John Doe y selecciona Inspeccionar. Notarás que emerge un panel en la parte inferior que muestra el código HTML que conforma nuestra plantilla.

La línea de código que contiene el nombre es seleccionada en el lado izquierdo del panel Inspector con el correspondiente estilo en el lado derecho.

Como puedes ver de la captura de pantalla de arriba, el nombre está entre las etiquetas <h4> que son las etiquetas HTML utilizadas para representar encabezados.

En la mayoría de los casos, pares de etiquetas así tienen una etiqueta de apertura y etiqueta de cierre y el contenido tiene que ser colocado entre esas etiquetas para mostrarse en una página web, así:

<h4>John Doe</h4>

Para editar la plantilla, todo lo que necesitas saber es cuáles etiquetas contienen la parte de la página que quieres editar, encuéntralas en el código, y reemplázalas con tu información.

Abre el archivo HTML en Tu Editor

Ahora, regresa al directorio de la plantilla, haz click-derecho en index-normal.html y selecciona Abrir con Sublime Text. Deberías ahora ver el código HTML completo que conforma tu plantilla.

Para comenzar a editar la plantilla, quieres encontrar el mismo código que viste en el panel Inspector de tu navegador.

Desplázate hacia abajo hasta que lo encuentres alrededor de las líneas 150-151. Luego, haz click entre las etiquetas <h4> y reemplaza el nombre con el tuyo.

Replacing the default name and contact informationReplacing the default name and contact informationReplacing the default name and contact information
Reemplazando el nombre predeterminado y la información de contacto predeterminada.

Después de eso, haz click entre las etiquetas <h6>, elimina el texto e ingresa tu profesión.

Repetir éstos pasos una y otra vez te permitirá reemplazar toda la información de ejemplo con la tuya.

Si hay una sección en la plantilla que no necesitas, simplemente elimínala. En la captura de pantalla de abajo, he seleccionado todo en la sección de la tabla Pricing y eliminé todo el código en ella.

You can delete sections of the code you dont need You can delete sections of the code you dont need You can delete sections of the code you dont need
Puedes eliminar secciones del código que no necesitas.

Cómo Reemplazar Imágenes Con las Tuyas

Para reemplazar las imágenes con las tuyas, simplemente selecciona todas las imágenes en el directorio correspondiente, elimínalas, y coloca tus imágenes en el mismo directorio. Si seguiste el consejo anterior, nombra tus imágenes con los mismos nombres que los marcadores de posición, lo que hace más rápido editar la plantilla.

Si quieres agregar más información, selecciona el código existente en la sección deseada, cópiala al hacer click CTRL/CMD + C y luego pégala abajo con CTRL/CMD + V. En la captura de pantalla de abajo, quería agregar otra barra de habilidades así que seleccioné el código para la cuarta habilidad y la copié inmediatamente debajo:

You can duplicate sections of HTML if you need toYou can duplicate sections of HTML if you need toYou can duplicate sections of HTML if you need to
Puedes duplicar las secciones de HTML si lo necesitas.

Y el resultado final se ve así:

The end product of adding another skill barThe end product of adding another skill barThe end product of adding another skill bar
El producto final de agregar otra barra de habilidades.

Cómo Cambiar la Apariencia de Tu Plantilla HTML para Currículum

Una vez que hayas reemplazado toda la información, es momento de aplicar estilo a la plantilla del currículum web a tu gusto. Por defecto, la plantilla HTML Flatrica viene con varias hojas de estilo diferentes. Si miras el directorio stylesheets, notarás que son nombrados como los colores utilizados:

Flatrica comes with numerous stylesheet optionsFlatrica comes with numerous stylesheet optionsFlatrica comes with numerous stylesheet options
Flatrica viene con numerosas opciones de hojas de estilo.

Puedes rápidamente ajustar el color al reemplazar la hoja de estilos en el head del documento con el nombre de tu hoja de estilos preferida. Busca la línea de código que dice:

<!-- CUSTOM STYLE -->

<link href="stylesheets/style.css" id="switch_style" rel="stylesheet">

Cambiar el nombre a style_blue.css da a nuestra plantilla un color y apariencia totalmente distinta:

The results of apply the blue stylesheetThe results of apply the blue stylesheetThe results of apply the blue stylesheet
Los resultados de aplicar la hoja de estilos azul.

Si tienes ganas de aventurarte, puedes editar la hoja de estilos llamada style.css con fuentes y colores de tu propia elección. Por ejemplo, puedes editar el color de fondo en style.css al ingresar un código HEX de tu color deseado así:

background-color: #65b5c1;

Editar CSS puede hacerse de la misma manera que editamos el HTML. Click-derecho en el elemento que quieres aplicar estilo y click en Inspeccionar. Ésta vez, querrás buscar el código en el lado derecho de la pestaña Inspector y luego encuentra el mismo código en el editor de código.

A look at the resume website templates CSS fileA look at the resume website templates CSS fileA look at the resume website templates CSS file
Un aspecto del archivo CSS de la plantilla del sitio.

Cómo Subir los Archivos de Tu Sitio Web al Servidor

Después de que has modificado los archivos de la plantilla del sitio a tu gusto, necesitarás subirlos a tu servidor de alojamiento. Deberías haber recibido un correo de tu host conteniendo la información necesaria para transferir archivos vía FTP.

Para comenzar el proceso de subir achivos, lanza tu programa FTP. En éste caso, estoy usando FileZilla. Ingresa la información proporcionada por tu host en la barra superior y luego haz click en Conexión rápida:

Inserting information into FileZillaInserting information into FileZillaInserting information into FileZilla
Insertando información en FileZilla.

Localiza el directorio con tu plantilla en tu computadora en el lado izquierdo de la pantalla, y haz click en él para expandirlo. En la parte de abajo del lado izquierdo, selecciona todos los archivos y directorios y arrástralos al lado derecho de la pantalla.

Asegúrate de subirlos al directorio raíz de tu servidor de alojamiento en el directorio public_html.

Uploading files to the server via FTPUploading files to the server via FTPUploading files to the server via FTP
Subiendo archivos al servidor vía FTP.

Una vez que todos los archivos han sido subidos, abre tu navegador e ingresa el nombre de tu dominio. ¡Felicidades, tu currículum web ahora está publicado!

Cuatro Rápidos Consejos Para Hacer Fabuloso Tu Currículum Web Personal

Ahora que sabes cómo usar una plantilla HTML para currículum, aquí están cuatro consejos que te ayudarán a hacer aún más sorprendente tu currículum web:

  1. Comprime Tus Imágenes - Antes de subir los archivos a tu servidor de alojamiento, asegúrate de reducir el tamaño del archivo de tus imágenes al optimizarlas. Ésto te ayudará a agilizar tu sitio web. Puedes usar una herramienta como TinyJPG para comprimir las imágenes sin afectar su calidad.
  2. Consdera Minificar Tus Hojas de Estilo y Archivos JavaScript - Al igual que con las imágenes, reducir el tamaño del archivo ayudará a tu sitio a cargar más rápido. Herramientas como CSS Minifier y JSCompress harán el trabajo por tí.
  3. Agrega Tu Sitio a Tus Perfiles de Redes Sociales - Trabajaste duro para crear tu sitio, ahora es momento de dejar que el mundo sepa de él. Incrementa tu visibilidad al agregar tu sitio a tus perfiles de redes sociales.
  4. Úsalo como Parte de Tu Firma de Correo Electrónico - Una de las mejores formas de promocionar tu sitio es agregarlo a tu firma de correo electrónico. Es sencillo, gratis y solo toma segundos configurarlo, y los beneficios son numerosos.

Configura la Plantilla HTML de Tu Currículum Web 

Al principio editar una plantilla HTML puede parecer intimidante, pero no es tan difícil una vez que entiendes cómo la plantilla está estructurada y lo que necesita editarse. Si tambén te tomas el tiempo de leer unos cuántos tutoriales, dominarás HTML y CSS en muy poco tiempo. Usa nuestra guía de arriba para modificar la plantilla de tu currículum web e incrementa tus posibilidades de ser contratado.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.