Cómo utilizar una plantilla de curriculum vitae HTML para hacer su sitio personal

Hay muchas formas de crear tu página web personal.. 

Puede usar uno de los muchos creadores de sitios web o puede optar por un CMS como WordPress, Drupal o similar. También puedes contratar a un desarrollador profesional para que te haga uno..

Con tantas opciones, puede ser difícil saber por dónde empezar. Para hacer las cosas aún más complicadas, cada una de estas opciones viene con un conjunto diferente de ventajas y desventajas, sin mencionar el nivel de dificultad o la etiqueta de precio involucrada..

Pero hay otra excelente manera de crear su sitio personal en un tiempo razonable. Y eso es mediante el uso de una plantilla de currículum HTML. Son fáciles de usar y cargar en su servidor de alojamiento.. 

Aquí hay algunos de los mejores (para navegar rápidamente antes de seguir leyendo): 

Además de eso, el código detrás de una plantilla de sitio web de currículum profesional es mucho menos complicado para un principiante que los lenguajes de programación más complejos utilizados en los sistemas de administración de contenido..

En esta parte de la serie del sitio web Making a Great Personal Resume, le explicamos el sencillo proceso de modificar y cargar una plantilla de currículum HTML.. 

Siga este flujo de trabajo para hacer su sitio web de currículum y personalícelo a su marca personal, para que pueda lanzar su sitio en poco tiempo. 

¿Qué necesitas para tener tu sitio web en vivo??

Antes de comenzar con la modificación de la plantilla del sitio, veamos las herramientas que necesitará para poner en marcha su sitio web de currículum HTML:

1. La empresa de alojamiento de derecho

Comprar el nombre de dominio para su sitio es solo el primer paso en su viaje. También necesitará un servidor de alojamiento donde cargará los archivos para su sitio web. Encontrar la compañía de alojamiento adecuada no es fácil, especialmente porque hay muchos de ellos. La mayoría de los proveedores de alojamiento ofrecen paquetes básicos de alojamiento entre $ 5 y $ 10 por mes. Algunas compañías ofrecen ancho de banda y espacio ilimitados, mientras que otras ofrecen planes más restringidos.

Lo importante a tener en cuenta es que casi todos los proveedores de alojamiento admiten plantillas HTML. Cuando busque una compañía de hospedaje, lea sus preguntas frecuentes y asegúrese de que la compañía brinda asistencia al cliente, en caso de que necesite ayuda con su sitio web. También debe investigar un poco y leer las reseñas de un servidor en particular en sitios web independientes para ver qué tan satisfechos están sus clientes..

2. Un cliente FTP

Una vez que encuentre una empresa de alojamiento, deberá descargar un cliente FTP. Un cliente FTP le permitirá cargar su plantilla a los servidores de alojamiento. La elección del programa FTP dependerá del sistema operativo que use su 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á un editor de texto para realizar cambios en los archivos de su plantilla. Si bien puede usar Notepad o TextEdit para realizar cambios, usar un editor de código lo hará mucho más fácil. A diferencia de los editores de texto normales, un editor de código incluye herramientas que facilitan la edición, como el uso de diferentes colores para diferentes partes del código, lo que facilita ver lo que está editando..  

Para los fines de este tutorial, usaré Sublime Text, que se puede usar en Mac, Windows y Linux, y la versión de prueba se puede descargar gratis. Aprenda más sobre cómo trabajar con este editor de código popular: 

4. La plantilla HTML y las imágenes de tu sitio web de currículum

Las dos últimas cosas que necesita son su plantilla de currículum HTML y las imágenes que planea usar en su sitio.. 

Para los propósitos de este tutorial, estaré usando el Plantilla de sitio web de Flatrica HTML, se muestra aquí: 

Plantilla de sitio web de Flatrica HTML.

Puede encontrar la plantilla de su sitio web en el Descargas Área de su cuenta de Envato después de realizar su compra. Una vez que haya descargado la plantilla de sitio HTML, descomprima la carpeta y guárdela en su escritorio para un fácil acceso. 

Cuando se trate de imágenes, necesitará su foto en la cabeza y cualquier otra foto personal que piense usar. También puede usar una imagen de fondo o un patrón, así que asegúrese de tener todas las imágenes almacenadas en su computadora para poder agregarlas a su plantilla.

Cómo editar el contenido de la plantilla de tu sitio web

Ahora que tiene todo en su lugar, es hora de personalizar la plantilla con su información. Veamos cómo personalizar la plantilla HTML de Flatrica: 

1. La estructura de esta plantilla de currículum HTML

Antes de comenzar a modificar los archivos, echemos un vistazo a la estructura de esta plantilla HTML. Al descomprimir la carpeta, notará que contiene dos carpetas: una con documentación y otra con los archivos de plantilla reales..

Un vistazo a los archivos incluidos en esta plantilla de sitio web HTML curriculum vitae.

La carpeta con los archivos de plantilla del sitio real tiene varias subcarpetas dentro:

  • Colores, que tiene todos los códigos de color y las variables utilizadas en la plantilla del sitio.
  • Fuentes, que contiene todas las fuentes de iconos.
  • Imágenes con todas las imágenes de marcador de posición.
  • Una carpeta tiene todas las JavaScript Código necesario para que la plantilla funcione correctamente. En la mayoría de los casos, nunca necesitará editar esta carpeta o los archivos que contiene, ya que JavaScript proporciona una funcionalidad adicional, como alternar el menú para abrir, controlar las animaciones de diapositivas y validar formularios.
  • UNA PHP carpeta que contiene el código PHP necesario para que funcione el formulario de contacto. Solo tendrá que editar una sola línea de código aquí para agregar su dirección de correo electrónico.
  • los Hablar con descaro a carpeta contiene todas las variables para las hojas de estilo.
  • Hojas de estilo contiene los archivos CSS, que deberá editar para agregar su estilo a la plantilla y combinarlo con su marca.

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

Tenga en cuenta que su plantilla puede no tener todos estos archivos y carpetas; Sin embargo, en la mayoría de los casos, se encontrará con las carpetas de hojas de estilo, imágenes, JavaScript y PHP. Su plantilla también puede tener menos o más archivos HTML.

2. Reemplazar la información de plantilla HTML predeterminada

Haga doble clic index-normal.html(o index.html en caso de que estés usando una plantilla diferente). Esto abrirá el archivo en su navegador, lo que facilitará la comprensión de qué partes del código necesitará editar y cómo encontrarlas en su archivo de plantilla HTML..

Vista del inspector de código del navegador del código de la plantilla HTML.

Si observa la plantilla en su navegador, verá que necesita editar:

  • Su nombre e información de contacto.
  • La propaganda del texto sobre los botones para descargar tu CV.
  • Diferentes secciones que tienen información sobre su educación, habilidades, experiencia, portafolio, clientes pasados ​​y más.

Una vez que sepa qué cambiar, puede comenzar a buscar el código correspondiente.

Haga clic derecho en el nombre que lee John Doe y seleccione Inspeccionar. Notará un panel emergente en la parte inferior que muestra el código HTML que conforma nuestra plantilla..

La línea de código que contiene el nombre se selecciona en el lado izquierdo de la Inspector Panel, con el estilo correspondiente en el lado derecho..

Como se puede ver en la captura de pantalla anterior, el nombre está entre

Etiquetas, que son las etiquetas HTML utilizadas para representar encabezados..

En la mayoría de los casos, los pares de etiquetas como este tienen una etiqueta de apertura y una de cierre, y el contenido debe colocarse entre esas etiquetas para aparecer en una página web, como esta:

John Doe

Para editar la plantilla, todo lo que necesita saber es qué etiquetas contienen la parte de la página que desea editar, buscarlas en el código y reemplazarlas con su información..

Abra el archivo HTML en su editor

Ahora, vuelva a la carpeta de plantillas, haga clic derecho en index-normal.html, y seleccione Abrir con texto sublime. Ahora debería ver el código HTML completo que conforma su plantilla.

Para comenzar a editar la plantilla, desea encontrar el mismo código que vio en el panel Inspector de su navegador.

Desplácese hacia abajo hasta encontrar líneas 150-151. Luego, haga clic entre

etiquetas y sustituye el nombre por el tuyo.

Reemplazo del nombre predeterminado y la información de contacto.

Después de eso, haga clic entre

etiquetas, elimine el texto e ingrese su profesión.

Repetir estos pasos una y otra vez le permitirá reemplazar toda la información falsa con la suya..

Si hay una sección en la plantilla que no necesita, simplemente bórrela. En la captura de pantalla a continuación, seleccioné todo en la sección de tabla de Precios y borré todo el código que contiene..

Puede borrar secciones del código que no necesita. 

Cómo reemplazar imágenes con las tuyas

Para reemplazar las imágenes con las suyas, simplemente seleccione todas las imágenes en la carpeta correspondiente, elimínelas y coloque sus imágenes en la misma carpeta. Si siguió el consejo anterior, nombró sus imágenes con los mismos nombres que los marcadores de posición, lo que facilita la edición de la plantilla..

Si desea agregar más información, seleccione el código existente en la sección deseada, cópielo haciendo clic en Control / Comando-C, y luego pegarlo abajo con Control / Comando-V. En la captura de pantalla a continuación, quise agregar otra barra de habilidades, así que seleccioné el código para la cuarta barra de habilidades y lo copié inmediatamente a continuación:

Puedes duplicar secciones de HTML si necesitas.

Y el resultado final se ve así: 

El producto final de añadir otra barra de habilidades..

Cómo cambiar la apariencia de su sitio de currículum HTML

Una vez que haya reemplazado toda la información, es hora de diseñar la plantilla del sitio web del currículum a su gusto. Por defecto, la plantilla HTML de Flatrica viene con varias hojas de estilo diferentes. Si observa la carpeta de hojas de estilo, notará que llevan el nombre de los colores utilizados:

Flatrica viene con numerosas opciones de hojas de estilo..

Puede ajustar rápidamente el color al reemplazar la hoja de estilo en la parte superior del documento con el nombre de su hoja de estilo preferida. Busque la línea de código que dice:

   

Cambiando el nombre a style_blue.css le dará a nuestra plantilla un nuevo color y apariencia:

Los resultados de la aplicación de la hoja de estilo azul..

Si te sientes aventurero, puedes editar la hoja de estilo principal llamada style.css Con fuentes y colores a tu elección. Por ejemplo, puede editar el color de fondo en el style.css ingresando un código HEX de su color deseado así:

color de fondo: # 65b5c1;

La edición de CSS se puede hacer de la misma manera que editamos el HTML. Haga clic derecho en el elemento que desea estilizar y haga clic en Inspeccionar. Esta vez, querrá buscar el código en el lado derecho de la Inspector pestaña y luego encontrar el mismo código en el editor de código.

Un vistazo al archivo CSS de la plantilla del sitio..

Cómo subir los archivos de su sitio web al servidor

Una vez que haya modificado los archivos de plantilla del sitio a su gusto, deberá subirlos a su servidor de alojamiento. Debería haber recibido un correo electrónico de su host con la información necesaria para transferir archivos a través de FTP.

Para comenzar el proceso de carga, inicie su programa FTP. En este caso, estoy usando FileZilla. Ingrese la información provista por su anfitrión en la barra superior, y luego haga clic en Conexión rápida:

Insertando información en FileZilla.

Localice la carpeta con su plantilla en su computadora en el lado izquierdo de la pantalla y haga clic en ella para expandirla. En la parte inferior izquierda, seleccione todos los archivos y carpetas y arrástrelos hacia el lado derecho de la pantalla.

Asegúrese de subirlos a la carpeta raíz de su servidor de alojamiento en el public_html carpeta.

Subiendo archivos al servidor vía FTP.

Una vez que se hayan cargado todos los archivos, abra su navegador e ingrese su nombre de dominio. Enhorabuena, tu nuevo sitio web de currículum ya está en vivo.!

4 consejos rápidos para hacer su sitio de currículum impresionante

Ahora que sabe cómo usar una plantilla de currículum HTML, aquí hay cuatro consejos rápidos que lo ayudarán a hacer su sitio personal aún más impresionante:

  1. Comprime tus imágenes: Antes de cargar archivos a su servidor de alojamiento, asegúrese de reducir el tamaño del archivo de sus imágenes optimizándolas. Esto te ayudará a acelerar tu sitio web. Puedes usar una herramienta como TinyJPG para comprimir las imágenes sin afectar su calidad.
  2. Considere minimizar sus hojas de estilo y archivos de JavaScript: Al igual que con las imágenes, reducir el tamaño del archivo ayudará a que su sitio se cargue más rápido. Herramientas como CSS Minifier y JSCompress harán el trabajo por usted..
  3. Agregue su sitio a sus perfiles de redes sociales: Trabajaste duro para crear tu sitio, y ahora es el momento de que el mundo lo sepa. Aumente su visibilidad agregando su sitio a sus perfiles de redes sociales.
  4. Úselo como parte de su firma de correo electrónico: Una de las mejores maneras de promover su sitio es agregarlo a su firma de correo electrónico. Es simple, gratuito y toma segundos para configurarlo, pero los beneficios son numerosos. 

Configure su plantilla de currículum HTML

La edición de una plantilla HTML puede parecer intimidante al principio, pero no es tan difícil una vez que comprende cómo está estructurada la plantilla y qué se necesita editar. Si también te tomas el tiempo de leer algunos tutoriales, dominarás el HTML y el CSS en poco tiempo. Use nuestra guía de arriba para modificar la plantilla de su currículum y aumentar sus posibilidades de ser contratado.