Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jairo51067/accessible-form-ui

Este proyecto consiste en un formulario diseñado para actualizar un perfil de usuario, centrado en la accesibilidad y la experiencia de usuario. Implementa validaciones en tiempo real, un sistema gráfico de progreso interactivo con SVG y un diseño moderno optimizado para navegadores actuales.
https://github.com/jairo51067/accessible-form-ui

css3 html5 javascript semantic-web svg-animations

Last synced: about 1 month ago
JSON representation

Este proyecto consiste en un formulario diseñado para actualizar un perfil de usuario, centrado en la accesibilidad y la experiencia de usuario. Implementa validaciones en tiempo real, un sistema gráfico de progreso interactivo con SVG y un diseño moderno optimizado para navegadores actuales.

Awesome Lists containing this project

README

        

# "Formulario accesible para actualizar perfil con interfaz moderna"
Este proyecto consiste en un formulario diseñado para actualizar un perfil de usuario, centrado en la accesibilidad y la experiencia de usuario. Implementa validaciones en tiempo real, un sistema gráfico de progreso interactivo con SVG y un diseño moderno optimizado para navegadores actuales. Durante el desarrollo, se abordaron desafíos como la optimización para accesibilidad (atributos aria), el uso de tecnologías modernas para gráficos dinámicos y la gestión de estados en formularios complejos. Este proyecto muestra habilidad para combinar diseño funcional con prácticas modernas de desarrollo web.

# Formulario Accesible - Actualizar Perfil
[Enlace al proyecto](https://jairo51067.github.io/Accessible-Form-UI/)

Imagen del proyecto
![Formulario Accesible](https://github.com/user-attachments/assets/616371fd-09e2-47ee-8c95-171c02c82d15)

## Descripción
Este formulario permite a los usuarios actualizar su información de perfil de manera accesible y eficiente. Su propósito principal es demostrar cómo integrar buenas prácticas de accesibilidad, validación y diseño moderno en un formulario de uso cotidiano. Este proyecto fue inspirado por la necesidad de formularios más inclusivos y visualmente atractivos.

## Características
- **Accesibilidad mejorada**: Uso de etiquetas semánticas y atributos `aria` para navegación asistida.
- **Validación dinámica**: Revisión de datos en tiempo real con mensajes de guía para el usuario.
- **Visualización de progreso**: Gráficos SVG interactivos que reflejan el estado de avance del usuario.
- **Gestión de contraseñas**: Opciones para mostrar/ocultar contraseñas con un solo clic.

## Tecnologías Utilizadas
- **HTML5**: Organización semántica del contenido.
- **CSS3**: Diseño responsivo con Flexbox y animaciones básicas para gráficos.
- **JavaScript**: Implementación de validaciones dinámicas y control de estado de los elementos interactivos.
- **SVG**: Creación de gráficos circulares para representar el progreso.

## Instalación
1. Clona el repositorio:
```bash
git clone https://github.com/jairo51067/actualizar-perfil.git
```
2. Abre el archivo `index.html` en tu navegador para ver el proyecto.

## Cómo Contribuir
Si deseas contribuir, sigue estos pasos:
1. Haz un fork del repositorio.
2. Crea una nueva rama:
```bash
git checkout -b nueva-rama
```
3. Realiza tus cambios y súbelos:
```bash
git commit -m "Descripción de los cambios"
git push origin nueva-rama
```
4. Envía un pull request.

¡Tu contribución es bienvenida!

## Licencia
Distribuido bajo la licencia MIT.

## Autor
Proyecto desarrollado por **Jairo Cárdenas**.
- Correo electrónico: [[email protected]](mailto:[email protected])
- GitHub: [@jairo51067](https://github.com/jairo51067)

https://roadmap.sh/projects/accessible-form-ui