Añadir un currículum (o CV)
En los capítulos anteriores, aprendimos cómo agregar todo tipo de contenido a nuestras páginas HTML. Ahora veremos cómo agregar estructura a una página grande de contenido. Realizaremos una página de currículum.
Ahora, un currículum será diferente para diferentes personas. Si está en el mundo académico, puede crear un curriculum vitae. Las personas que han trabajado durante muchos años pueden tener un currículum extenso, mientras que los estudiantes en la universidad pueden no tener mucho historial laboral.
No se preocupe si no tienes mucha experiencia. Puede agregar secciones que destaquen su educación, en particular títulos, trabajos en cursos y actividades escolares. O puede concentrarse en el trabajo voluntario o a tiempo parcial que haya realizado.
Otra opción es hacerlo menos como un currículum y más como una cartera de proyectos si eso es más aplicable a usted. Puede incluir cualquier habilidad relevante que tenga (¡como HTML!). Pruebe una búsqueda en la web para obtener consejos sobre currículums. La web está llena de consejos sobre currículums para personas en diferentes momentos de sus carreras.
Pero si no siente que este asunto del currículum es para usted, también está bien. Siéntase libre de tomar las ideas de marcado que exploramos aquí y utilizarlas como quiera. Es su sitio web y es importante que disfrute haciéndolo y aprendiendo un montón durante el proceso práctico que estamos llevando a cabo.
Crear el archivo del currículum
Creee un archivo de nivel superior de nuestra jerarquía de archivos, llamado currículum.html
, y copie el contenido de una de las otras páginas de nivel superior en él.
Independientemente de cómo cree el archivo, asegúrese de actualizar el <título>
, <h1>
, y <nav>
. En mi caso pondré el nombre en la etiqueta <h1>
y mis estudios y experiencia debajo en una etiqueta <p>
.
<header>
<nav>
<a href="index.html">Inicio</a>
<a href="blog/index.html">Blog</a>
<a href="about.html">Acerca de</a>
<a href="currículum.html" aria-current="page">Currículum</a>
</nav>
<h1>Victorhck</h1>
<p><em>Aprendiz de todo lo que me interesa</em></p>
</header>
Un documento con secciones
Un currículum a menudo está dividido en secciones, las más comunes son la experiencia, la educación y los conocimientos. HTML tiene la herramienta para crear una sección genérica en un documento, la etiqueta <section>
. Cada sección debería tener un encabezado según la documentación.
Cabe la pena destacar que es válido utilizar únicamente encabezados en este caso, si lo desea. Opto por utilizar la etiqueta <section>
para ofrecer un ejemplo de cómo utilizarla y porque el estilo que da Simple.css a esta etiqueta ofrece un vistoso espaciado y divisores entre las distintas secciones.
Crearé las siguientes secciones. Pero recuerde, que puede añadir o quitar según desee para su caso personal y no es necesario que utilice las mismas que yo o incluso el mismo orden. Siéntase libre de adaptarlo a sus necesidades.
- Conocimientos
- Experiencia
- Proyectos seleccionados
- Educación
Conocimientos
Para esta sección, hará un listado de los conocimientos más relevantes, listándolos con pequeños puntos azules. Utilizaré un encabezado de nivel 2 y englobaré todo en una etiqueta <section>.
<section>
<h2>Conocimientos</h2>
<ul>
<li>HTML / CSS</li>
<li>JavaScript</li>
<li>TypeScript</li>
<li>Vue</li>
<li>PHP</li>
<li>Sass</li>
<li>Electron</li>
<li>Sketch</li>
</ul>
</section>
Que se vería así.
Es una visión clara del listado de conocimientos. Pero a decir verdad, creo que hay un poco de espacio desperdiciado. Estaría mejor si pudiera dividir la lista en dos columnas. No hay una manera estricta en HTML de hacer esto, pero creo que utilizando un poco de CSS podríamos conseguirlo.
Hasta ahora ha visto muchas veces las etiquetas utilizando atributos. Cada página de nuestro sitio que estamos construyendo tiene enlaces mediante la etiqueta <a>
, y cada enlace tiene el atributo href
, por poner un ejemplo. Otro atributo muy útil es style
. Este, nos permite aplicar un estilo CSS directamente a un elemento HTML. Trataré más sobre CSS en uno de los capítulos extra al final de este libro, pero por ahora vamos a utilizar el atributo style
para dividir la lista en dos columnas.
<section>
<h2>Conocimientos</h2>
<ul style="columns: 2">
<li>HTML / CSS</li>
<li>JavaScript</li>
<li>TypeScript</li>
<li>Vue</li>
<li>PHP</li>
<li>Sass</li>
<li>Electron</li>
<li>Sketch</li>
</ul>
</section>
Lo que resulta en una lista más agradable de ver y un mejor aprovechamiento del espacio.
Experiencia
No soy un experto en currículums, pero creo que pondré mi experiencia laboral a continuación, ya que probablemente es lo que más le interesa a un posible empleador en mi campo. Esto será diferente si no tiene mucha experiencia o siente que la educación u otras calificaciones son más relevantes.
Marcar contenido es tanto un arte como una ciencia. No existe una única forma correcta de hacerlo. Un principio rector para elegir qué etiquetas usar es garantizar que las opciones sean significativas y no se basen únicamente en la apariencia.
Por ejemplo, puede estar tentado a utilizar un encabezado <h6>
en alguna parte de su página, porque quiere un encabezado que no sea muy grande. Pero a menos que ese encabezado tenga efectivamente 6 niveles, <h6>
no es la mejor elección.
Le mostraré qué marca escogí yo, qué aspecto tiene y luego lo explicaré.
<section>
<h2>Experiencia</h2>
<h3>Ingeniero Frontend</h3>
<p>
<strong>MRI Technologies</strong><br>
<time datetime="2019-08">Agosto de 2019</time>–Presente
</p>
<ul>
<li>Crear y mantener una aplicación de gestión de trajes espaciales para la NASA</li>
<li>
Construir y mantener un sistema de gestión de documentos para Collins Aerospace
</li>
<li>Crear interfaces reactivas con Vue, API REST y GraphQL</li>
</ul>
<!-- ...el resto de trabajos irán aquí -->
</section>
Esto nos dará una sección que tendrá un aspecto como este.
Enumeraré varios puestos de trabajo que he tenido, por lo que utilizaré el título del puesto como título (nivel 3, ya que se incluye en el título de nivel 2 de Experiencia). A continuación, quiero mostrar el empleador y el período de tiempo. Elegí usar un solo párrafo para mostrarlos juntos. Estoy usando un salto de línea manual para llevar el rango de tiempo a la segunda línea.
Otra forma de hacerlo es poner el nombre del empleador en el encabezado después del puesto de trabajo. No creo que una forma sea más correcta que la otra y prefiero reducir la cantidad de texto grande en la página.
Envolvemos la fecha en una etiqueta <time>
y proporcionamos fecha en formato legible por la máquina con un atributo datetime
. Estoy utilizando una entidad HTML, –
para colocar un guion entre la fecha de comienzo y de final. Esto es para utilizar el caracter guion, que es un poco más largo que el guion normal (-
) y es utilizado en tipografía para rangos numéricos.
Finalmente, he utilizado una lista sin orden para mostrar unos puntos en los que enumero mi papel en la empresa y las responsabilidades.
Continuaré y añadiré el resto de mi experiencia laboral. Añadiré el código completo para esto al final del capítulo. También puede echar un vistazo a mi currículum de demostración y ver código fuente.
Proyectos seleccionados
Cambiamos a la sección siguiente, en la que me gustaría llamar la atención sobre los proyectos seleccionados en los que he trabajado. Esta es una versión para el currículum de lo que es un portafolio o muestra del trabajo realizado, donde puedo mostrar los sitios web que he realizado e incluir enlaces a ellos. Los currículums impresos tienen que estar basados en texto, pero como esta es una página web, podría incluir una imagen o dos en esta sección.
Para estos proyectos utilizaré la etiqueta <h3>
para el título del proyecto y pondré un párrafo con una descripción. Si el proyecto sigue activo en la red, añadiré un enlace a él. Aquí hay un ejemplo.
<section>
<h2>Proyectos seleccionado</h2>
<h3>Mississippi Gulf Coast Community College</h3>
<p>
Trabajé en este sitio web en mi rol de diseñador y desarrollador en Mad Genius. Creé varias de las secciones dinámicas y con uso intensivo de datos, como el catálogo de cursos con capacidad de búsqueda y el índice completo "de la A a la Z". Estas secciones hicieron un uso intensivo de la interfaz de usuario reactiva, integraciones de API de terceros y desarrollo de complementos personalizados de WordPress.
</p>
<p><a href="https://mgccc.edu/">mgccc.edu</a></p>
<!-- ...el resto de proyectos iría aquí -->
</section>
Formación
Y finalmente, añadiré mis títulos universitarios, año de graduación y áreas de estudio. Utilizaré párrafos simples usando la etiqueta <strong>
para las palabras a las que quiero dar énfasis y <br>
para los saltos de línea manuales.
<section>
<h2>Formación</h2>
<p>
<strong>Master of Business Administration</strong>, <time>2009</time><br>
<em>Mississippi State University, Starkville, MS</em>
</p>
<p>
<strong>Bachelor of Business Administration</strong>, Information Systems,
<time>2007</time><br>
<em>Mississippi State University, Starkville, MS</em>
</p>
</section>
Ejemplo completo
Aquí tiene el código completo, incluyendo la cabecera y las áreas de los diversos contenidos.
<header>
<nav>
<a href="index.html">Inicio</a>
<a href="blog/index.html">Blog</a>
<a href="about.html">Acerca de</a>
<a href="resume.html" aria-current="page">Currículum</a>
</nav>
<h1>Victorhck</h1>
<p><em>Ingeniero Frontend</em></p>
</header>
<main>
<section>
<h2>Skills</h2>
<ul style="columns: 2">
<li>HTML / CSS</li>
<li>JavaScript</li>
<li>TypeScript</li>
<li>Vue</li>
<li>PHP</li>
<li>Sass</li>
<li>Electron</li>
<li>Sketch</li>
</ul>
</section>
<section>
<h2>Experiencia</h2>
<h3>Ingeniero Frontend</h3>
<p>
<strong>MRI Technologies</strong><br>
<time datetime="2019-08">Agosto de 2019</time>–Presente
</p>
<ul>
<li>Crear y mantener una aplicación de gestión de trajes espaciales para la NASA</li>
<li>Construir y mantener un sistema de gestión de documentos para Collins Aerospace</li>
<li>Crear interfaces reactivas con Vue, API REST y GraphQL</li>
</ul>
<h3>Desarrollador Web/Diseñador</h3>
<p>
<strong>Mad Genius</strong><br>
<time datetime="2015-05">Mayo de 2015</time>–<time datetime="2019-08">Agosto de 2019</time>
</p>
<ul>
<li>Bocetos, creación de prototipos y diseño de interfaz de usuario</li>
<li>Desarrollo de temas y complementos para WordPress</li>
<li>UI reactiva con Vue y Knockout</li>
<li>Integraciones de API de terceros</li>
</ul>
<h3>Desarrollador web</h3>
<p>
<strong>Trabajador por cuenta propia</strong><br>
<time>2007</time>–<time>2015</time>
</p>
<ul>
<li>Comunicación con clientes</li>
<li>Desarrollar sitios web cumpliendo los estándares y funcionales</li>
<li>Realizar sitios web adaptadas a todos los dispositivos</li>
<li>Participar como voluntario en muchos proyectos sin ánimo de lucro</li>
</ul>
</section>
<section>
<h2>Formación</h2>
<p>
<strong>Master en administración de empresas</strong>, <time>2009</time><br>
<em>Mississippi State University, Starkville, MS</em>
</p>
<p>
<strong>Ciclo formativo de Información de sistemas</strong> <time>2007</time><br>
<em>Mississippi State University, Starkville, MS</em>
</p>
</section>
</main>
Puede ver el resultado en el sitio web de prueba, pero aquí tiene una captura de pantalla de la página completa.
A continuación
Hemos creado un montón de nuevo contenido. En el próximo capítulo, vamos a tomar un respiro y haremos un intermedio para echar un vistazo a cómo podemos poner en marcha un servidor web en nuestro equipo, que se parece más a lo que realmente es un sitio web real.