Skip to content

andres-happy/Proyecto-Final-Primeros-pasos-del-desarrollo-frontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Proyecto-Final-Primeros-pasos-del-desarrollo-frontend

Proyecto de curriculum TICMAS de Argentina Programa 4.0

Introducción

El siguiente repositorio refleja el trabajo realizado para el proyecto final del curso Primeros pasos del desarrollo frontend en el marco del proyecto Argentina programa 4.0. Se trata de un curriculum vitae modelo, que busca aplicar los conocimientos adquiridos en HTML (HyperText Markup Language), CSS (Cascading Style Sheets) y JS (JavaScript) utilizando los recursos brindados. Se incluyeron links a redes como github o linkedin a modo de contacto con el individuo.

El proyecto se subió a GitHub Pages: https://andres-happy.github.io/Proyecto-Final-Primeros-pasos-del-desarrollo-frontend/

Descripción del proyecto

Se buscó desarrollar un trabajo donde se apliquen distintos tipos de etiquetas HTML que mejoren la semántica del documento y que incorpore la información básica de un curriculum vitae (tales como redes, información personal, experiencia laboral, entre otros). Una utilidad interesante es la barra de navegación superior que redirige hacia los distintos títulos del documento, lo que ayuda a ir directamente a la información de interés en caso de ser necesario.

Se decidió diseñar una capa de presentación agradable a la vista con la implementación de un estilo único en CSS sin utilizar alguna plantilla modelo. La paleta de colores, tanto del modo oscuro como del modo claro se eligió con la ayuda del recurso web coolors; la tipografía elegida fue obtinida del recurso proporcionado en el enunciado. Los tamaños y tipos de fuentes fueron decididos por criterio personal. La ubicación de los distintos elementos así como su orden se decidieron realizando un análisis de su utilidad e importancia con respecto al resto.

Con JS se obtuvo los datos de una persona ficticia de forma aleatoria desde randomuser (recurso brindado en el enunciado). Para poder trabajar con datos de forma estandarizada se decidió que los resultados fueran solo de personas españolas (no había disponible personas de Argentina). Se agregaron iconos para ocultar/mostrar el contenido de los distintos apartados (Información personal y de contacto, Experiencia laboral, etc). También se incorporó la funcionalidad de subir al inicio de la página para el dado caso de que el documento se vuelva demasiado extenso.

Enunciado

¡Llegó el momento de validar lo aprendido!

Para la realización de este proyecto, te invitamos a imaginarte que sos un desarrollador recién incorporado en un nuevo emprendimiento tecnológico.

En tu primera tarea en la empresa, te solicitan que realices una página web que posea un curriculum vitae. La creación de este cv onlinte te permitirá llevar a la práctica todo lo que fuimos trabajando a lo largo de los módulos. El CV comprende información personal, experiencia y habilidades.

Etapa 1

Como en todo proyecto, es clave “bajar a papel” lo que vamos a desarrollar, por eso te proponemos que en una hoja escribas toda la información que quieras incluir en el CV, para poder empezar a pensar en qué estructura le darás al proyecto.

Como no es necesario que incluyas tu información personal, te proponemos usar esta web, de la cual podrás obtener datos personales de personas ficticias.

Si te animás, podés hasta incluir la foto que proporciona el sitio a modo de ejemplo.

Etapa 2

Ya tenemos la información que vamos a llevar al proyecto, ahora debemos elegir qué elementos HTML le darán vida. Considerá utilizar la barra de navegación con links ancla, listas desordenadas, foto de perfil, entre otros elementos que hagan que tu CV sea único.

Etapa 3

Ahora que ya tenés la información y la estructura, vamos a agregarle diseño al CV. Para ello, te proponemos que con CSS le puedas otorgar los estilos que consideres necesarios para que el CV se vea impecable. Podés importar tipografías de Google Fonts, utilizar una foto tuya y usar Font Awesome para emplear íconos que ilustren el proyecto.

Fase 2

Ahora incorporaremos funcionalidades que implementan JavaScript, de manera tal que sumemos comportamientos a lo desarrollado. Por ejemplo, dar información complementaria cuando el usuario haga clic sobre determinados botones. Para ello, tendremos que trabajar con los eventos vistos, más los que quieras incorporar.

¡Importante!

Usá funciones que permitan tener un código fuente reutilizable y mantenible.

Entrega del proyecto

Finalmente, subirás el proyecto terminado a GitHub pages. Luego pegarás el enlace de tu GitHub en el bloque "Proyectos" que se encuentra en la página principal del curso, en la plataforma. Recordá que este último paso es imprescindible para que el proyecto sea enviado y que pase luego a la instancia de corrección por el tutor designado.

Guía de inicio rápido para GitHub Pages.

Cómo crear un espacio en GitHub.

Si tenés dudas acerca de cómo subir tu proyecto a GitHub, te recomendamos que vuelvas a ver el módulo "Alojamiento y tipos de servidores", del presente curso. ¡Muchos éxitos!