CursosEmpresasBlogLiveConfPrecios

Creación de un Portafolio Accesible con HTML, CSS y JavaScript

Clase 7 de 35 • Curso de Accesibilidad Web

Contenido del curso

Refactorizar HTML para ser mas accessible

Extender la accesibilidad usando JavaScript

Tomar examen
Resumen

¿Por qué crear un portafolio accesible?

Crear un portafolio accesible es una herramienta poderosa para cualquier desarrollador o diseñador. No solo permite mostrar tus habilidades y proyectos al público en general, sino que también demuestra un compromiso con la accesibilidad digital, un valor cada vez más importante en el mundo de la tecnología. Un portafolio accesible garantiza que personas con diversas capacidades puedan interactuar con tu contenido, ampliando tu audiencia potencial y mejorando la experiencia de usuario.

¿Cómo comenzamos con el proyecto?

El proyecto de portafolio accesible que estarás llevando a cabo inicia con un código base que está configurado para ser personalizado según tus necesidades. Este es un portafolio que, aunque inicialmente es poco accesible, será transformado para adherirse a buenas prácticas de accesibilidad. Aquí tienes una estructura básica con una plantilla de ejemplo. Este portafolio incluirá:

  • Una imagen de portada
  • Navegación por secciones
  • Una breve sección "Sobre mí"
  • Enlaces a redes sociales
  • Un carrusel de proyectos
  • Un formulario de contacto

¿Cómo podemos clonar el proyecto?

Para clonar el proyecto y comenzar a trabajar en él, puedes seguir estos sencillos pasos:

  1. Accede al repositorio: El enlace al repositorio está en la sección de enlaces del curso. Cópielo y pégalo en tu navegador para acceder.

  2. Clonación en GitHub: Una vez en el repositorio de GitHub, busca el botón verde que dice "Code" para copiar el enlace del proyecto. Este paso no muestra una notificación, pero puedes estar seguro de que el enlace está copiado.

  3. Uso de terminal: Abre tu terminal favorito y clona el repositorio en cualquier carpeta de tu máquina utilizando el enlace copiado.

git clone [enlace-copiado]

¿Qué estructura tiene el proyecto?

El portafolio que vas a personalizar está compuesto principalmente por archivos de HTML, CSS y JavaScript. Es un proyecto sencillo, ideal tanto para principiantes como para aquellos con experiencia que desean mejorar la accesibilidad de sus proyectos. Encontrarás los siguientes elementos:

  • Archivo HTML: Contiene la estructura base del sitio, donde se integran los elementos principales.
<!DOCTYPE html>
<html lang="es">
<head>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <!-- Contenido del portafolio -->
    <script src="script.js"></script>
</body>
</html>

  • Archivo CSS: Se llama estilos.css y está vinculado para dar estilo a los elementos HTML.

  • Archivo JavaScript: Denominado script.js, este archivo añade funcionalidad a los componentes interactivos del portafolio.

¿Qué más incluye el proyecto?

El proyecto también viene con un archivo README que contiene información básica del repositorio, un archivo .gitignore para omitir archivos innecesarios en el repositorio, y una carpeta con imágenes para usar en el portafolio. Puedes personalizar estas imágenes según tus preferencias, asegurando que el portafolio refleje tu identidad visual.

Recuerda, empezar un portafolio accesible es un excelente primer paso, pero la verdadera magia está en los detalles de accesibilidad que irás agregando mientras avanzas en el curso. Así que prepárate para aprender y aplicar aquellas mejoras que harán tu portafolio realmente destacable para todos los usuarios.