generated from gllmAR/docsify-gabarit
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
+ ux and gen mermaid nav
Showing
10 changed files
with
384 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,230 @@ | ||
#!/bin/bash | ||
|
||
EXCLUDED_DIRS=(".git" "node_modules" "__pycache__" ".vscode") | ||
|
||
# Get the current working directory (root of the project) and ensure it ends with a slash | ||
ROOT_DIR=$(pwd) | ||
ROOT_DIR="${ROOT_DIR%/}/" | ||
|
||
# Function to extract the title from README.md | ||
get_title_from_readme() { | ||
local readme_path="$1" | ||
local title | ||
title=$(grep -m 1 "^# " "$readme_path" | sed 's/^# //') | ||
echo "$title" | ||
} | ||
|
||
# Function to check if README.md contains the generateMermaidNav comment | ||
contains_generate_mermaid_nav_comment() { | ||
local readme_path="$1" | ||
grep -q '<!-- generateMermaidNav -->' "$readme_path" | ||
} | ||
|
||
# Function to generate the Mermaid diagram content recursively | ||
generate_mermaid_content() { | ||
local parent_dir="$1" | ||
local parent_id="$2" | ||
local content_lines=() | ||
local subdirs=() | ||
|
||
# Remove trailing slash from parent_dir if any | ||
parent_dir="${parent_dir%/}" | ||
|
||
# Iterate over subdirectories | ||
for subdir in "$parent_dir"/*/; do | ||
if [[ -d "$subdir" ]]; then | ||
# Remove trailing slash from subdir | ||
subdir="${subdir%/}" | ||
|
||
local base_dir | ||
base_dir=$(basename "$subdir") | ||
|
||
# Skip excluded directories | ||
if [[ " ${EXCLUDED_DIRS[*]} " =~ " ${base_dir} " ]]; then | ||
continue | ||
fi | ||
|
||
local subdir_readme="$subdir/README.md" | ||
local subdir_title="$base_dir" | ||
|
||
# Use title from README.md if available | ||
if [[ -f "$subdir_readme" ]]; then | ||
local title_from_readme | ||
title_from_readme=$(get_title_from_readme "$subdir_readme") | ||
if [[ -n "$title_from_readme" ]]; then | ||
subdir_title="$title_from_readme" | ||
fi | ||
fi | ||
|
||
# Get relative path from ROOT_DIR | ||
local relative_subdir="${subdir#$ROOT_DIR}" | ||
relative_subdir="${relative_subdir#/}" # Remove leading slash | ||
|
||
# Generate a unique node ID based on relative path | ||
local node_id | ||
if [[ -z "$relative_subdir" ]]; then | ||
node_id="root" | ||
else | ||
node_id=$(echo "$relative_subdir" | sed 's/[^a-zA-Z0-9]/_/g') | ||
fi | ||
|
||
# Construct the link path with /#/ prefix | ||
local link_path="/#/$relative_subdir/" | ||
# Ensure there are no double slashes | ||
link_path=$(echo "$link_path" | sed 's#//*#/#g') | ||
|
||
# Escape special characters in titles | ||
subdir_title=$(echo "$subdir_title" | sed 's/"/\\"/g') | ||
|
||
# Add the node definition with clickable link | ||
content_lines+=(" $node_id[\"$subdir_title\"]") | ||
content_lines+=(" click $node_id \"$link_path\"") | ||
|
||
# Add the edge from parent to child if parent exists | ||
if [[ -n "$parent_id" ]]; then | ||
content_lines+=(" $parent_id --> $node_id") | ||
fi | ||
|
||
# Collect subdirectories for further processing | ||
subdirs+=("$subdir:$node_id") | ||
fi | ||
done | ||
|
||
# Process subdirectories recursively | ||
for entry in "${subdirs[@]}"; do | ||
IFS=':' read -r subdir child_id <<< "$entry" | ||
sub_content=$(generate_mermaid_content "$subdir" "$child_id") | ||
content_lines+=("$sub_content") | ||
done | ||
|
||
# Return the content lines | ||
printf "%s\n" "${content_lines[@]}" | ||
} | ||
|
||
# Function to update README.md with the new Mermaid diagram content | ||
update_readme_with_mermaid() { | ||
local readme_path="$1" | ||
local mermaid_content="$2" | ||
local tmpfile=$(mktemp) | ||
local in_section=0 | ||
local start_tag_found=0 | ||
local end_tag_found=0 | ||
|
||
while IFS= read -r line || [ -n "$line" ]; do | ||
if [[ "$line" == *'<!-- generateMermaidNav -->'* ]]; then | ||
echo "$line" >> "$tmpfile" | ||
in_section=1 | ||
start_tag_found=1 | ||
# Write the mermaid content immediately after the start tag | ||
echo '```mermaid' >> "$tmpfile" | ||
echo "$mermaid_content" >> "$tmpfile" | ||
echo '```' >> "$tmpfile" | ||
elif [[ "$line" == *'<!-- generateMermaidNavEnd -->'* ]]; then | ||
echo "$line" >> "$tmpfile" | ||
in_section=0 | ||
end_tag_found=1 | ||
elif [[ $in_section -eq 0 ]]; then | ||
echo "$line" >> "$tmpfile" | ||
fi | ||
# If in_section is 1 (between tags), skip the line | ||
done < "$readme_path" | ||
|
||
if [[ $start_tag_found -eq 1 && $end_tag_found -eq 0 ]]; then | ||
# Add the end tag if it was missing | ||
echo "<!-- generateMermaidNavEnd -->" >> "$tmpfile" | ||
fi | ||
|
||
if [[ $start_tag_found -eq 0 ]]; then | ||
# Start tag not found; append the content at the end of tmpfile | ||
{ | ||
echo -e "\n<!-- generateMermaidNav -->" | ||
echo '```mermaid' | ||
echo "$mermaid_content" | ||
echo '```' | ||
echo "<!-- generateMermaidNavEnd -->" | ||
} >> "$tmpfile" | ||
fi | ||
|
||
# Replace the original file with the updated content | ||
mv "$tmpfile" "$readme_path" | ||
} | ||
|
||
# Function to generate Mermaid diagram in README.md | ||
generate_mermaid_in_readme() { | ||
local dir_path="$1" | ||
local readme_path="$dir_path/README.md" | ||
|
||
# Get relative path from ROOT_DIR | ||
local relative_dir="${dir_path#$ROOT_DIR}" | ||
relative_dir="${relative_dir#/}" # Remove leading slash | ||
|
||
# Generate the root node ID | ||
local root_id | ||
if [[ -z "$relative_dir" ]]; then | ||
root_id="root" | ||
else | ||
root_id=$(echo "$relative_dir" | sed 's/[^a-zA-Z0-9]/_/g') | ||
fi | ||
|
||
local title | ||
title=$(get_title_from_readme "$readme_path") | ||
if [[ -z "$title" ]]; then | ||
title=$(basename "$dir_path") | ||
fi | ||
title=$(echo "$title" | sed 's/"/\\"/g') | ||
|
||
# Start the Mermaid content as an array | ||
local mermaid_lines=() | ||
mermaid_lines+=("flowchart LR") | ||
mermaid_lines+=(" $root_id[\"$title\"]") | ||
|
||
# Generate the rest of the content | ||
local sub_content | ||
sub_content=$(generate_mermaid_content "$dir_path" "$root_id") | ||
if [[ -n "$sub_content" ]]; then | ||
mermaid_lines+=("$sub_content") | ||
fi | ||
|
||
# Combine the lines into a single string | ||
local mermaid_content | ||
mermaid_content=$(printf "%s\n" "${mermaid_lines[@]}") | ||
|
||
# Update the README.md with the new mermaid content | ||
update_readme_with_mermaid "$readme_path" "$mermaid_content" | ||
} | ||
|
||
# Function to walk through directories and generate the mermaid content | ||
generate_mermaid_nav() { | ||
local dir_path="$1" | ||
|
||
# Remove trailing slash from dir_path if any | ||
dir_path="${dir_path%/}" | ||
|
||
# Check for README.md in the current directory | ||
if [[ -f "$dir_path/README.md" ]]; then | ||
# Check if README.md contains the generateMermaidNav comment | ||
if contains_generate_mermaid_nav_comment "$dir_path/README.md"; then | ||
generate_mermaid_in_readme "$dir_path" | ||
fi | ||
else | ||
echo "Skipped directory (no README.md): $dir_path" | ||
fi | ||
|
||
# Recurse into subdirectories, avoiding excluded directories | ||
for subdir in "$dir_path"/*/; do | ||
# Ensure subdir is a directory | ||
if [[ -d "$subdir" ]]; then | ||
# Remove trailing slash from subdir | ||
subdir="${subdir%/}" | ||
|
||
local base_dir | ||
base_dir=$(basename "$subdir") | ||
if [[ ! " ${EXCLUDED_DIRS[*]} " =~ " ${base_dir} " ]]; then | ||
generate_mermaid_nav "$subdir" | ||
fi | ||
fi | ||
done | ||
} | ||
|
||
# Start from the root directory | ||
generate_mermaid_nav "$ROOT_DIR" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,76 @@ | ||
# Expérience Utilisateur (UX) | ||
|
||
|
||
Offrent aux spectateurs une expérience immersive où l'interaction devient un moyen d'expression artistique à part entière. | ||
L'expérience utilisateur (UX) est essentielle pour concevoir des installations qui non seulement captivent le public, mais qui enrichissent également l'engagement émotionnel et intellectuel. | ||
|
||
## L'Importance de l'expérience utilisateur dans l'art interactif | ||
|
||
Dans une installation artistique interactive, l'UX va au-delà de la simple facilité d'utilisation. Elle englobe la manière dont le public perçoit, ressent et interprète l'œuvre. Une bonne UX permet de créer une connexion profonde entre l'installation et le spectateur, transformant l'expérience en une exploration personnelle et significative. Elle influence la manière dont l'art est vécu, compris et apprécié. | ||
|
||
## Principes de l'UX appliqués à la conception artistique | ||
|
||
### 1. Compréhension profonde du public | ||
|
||
- **Empathie artistique**: Comprendre les attentes, les émotions et les perspectives du public cible pour créer une œuvre qui résonne avec lui. | ||
- **Personas culturels**: Développer des profils types de visiteurs pour guider la conception et anticiper les interactions. | ||
|
||
### 2. Création d'une narration immersive | ||
|
||
- **Storytelling Visuel**: Utiliser des éléments visuels pour raconter une histoire ou transmettre un message puissant. | ||
- **Parcours Expérientiel**: Concevoir le cheminement du spectateur à travers l'installation comme une aventure sensorielle. | ||
|
||
### 3. Interactivité significative | ||
|
||
- **Engagement Actif**: Encourager le public à interagir de manière tangible avec l'œuvre, influençant son apparence ou son comportement. | ||
- **Réponse Dynamique**: Assurer que l'installation réagit de manière immédiate et pertinente aux actions du spectateur. | ||
|
||
### 4. Expérience multisensorielle | ||
|
||
- **Stimuli Sensoriels**: Intégrer des éléments sonores, visuels, tactiles, voire olfactifs pour enrichir l'expérience. | ||
- **Atmosphère Enveloppante**: Utiliser l'éclairage, la musique et la spatialisation pour créer une ambiance immersive. | ||
|
||
### 5. Accessibilité et inclusion artistique | ||
|
||
- **Art pour tous**: Concevoir des installations accessibles aux personnes de tous âges et capacités, y compris celles en situation de handicap. | ||
- **Diversité culturelle**: Prendre en compte les différentes perspectives culturelles pour élargir l'impact de l'œuvre. | ||
|
||
## Intégration de l'UX dans le processus de conception artistique | ||
|
||
1. **Phase de conceptualisation** | ||
|
||
- **Recherche créative**: Explorer des concepts artistiques tout en gardant à l'esprit l'interaction utilisateur. | ||
- **Esquisses et maquettes**: Visualiser l'installation et planifier les points d'interaction clés. | ||
|
||
2. **Phase de développement** | ||
|
||
- **Prototypage artistique**: Créer des modèles fonctionnels pour tester les interactions et l'impact esthétique. | ||
- **Feedback du public**: Organiser des séances de prévisualisation pour recueillir les impressions et affiner l'œuvre. | ||
|
||
3. **Phase d'installation** | ||
|
||
- **Mise en scène**: Disposer l'installation dans l'espace d'exposition de manière optimale pour l'expérience utilisateur. | ||
- **Adaptabilité**: Être prêt à ajuster l'installation en fonction des contraintes spatiales et des réactions du public. | ||
|
||
## Études de Cas | ||
|
||
|
||
|
||
### **Pulse Room** par Rafael Lozano-Hemmer | ||
|
||
Une salle remplie d'ampoules qui clignotent au rythme du cœur des participants, capturé par des capteurs. Cette œuvre transforme les données biométriques en une expérience visuelle collective. | ||
|
||
## Conclusion | ||
|
||
En intégrant les principes de l'expérience utilisateur dans la conception d'installations multimédias interactives artistiques, les artistes peuvent créer des œuvres qui engagent profondément le public. Cela permet non seulement d'enrichir l'expérience esthétique, mais aussi de faciliter une interaction significative entre l'œuvre et le spectateur. L'UX devient ainsi un outil puissant pour repousser les limites de l'art et explorer de nouvelles formes d'expression. | ||
|
||
## Ressources Supplémentaires | ||
|
||
- **Livres** | ||
- *"Interactive Art and Embodiment: The Implicit Body as Performance"* par Nathaniel Stern | ||
- *"Digital Performance: A History of New Media in Theater, Dance, Performance Art, and Installation"* par Steve Dixon | ||
|
||
- **Sites Web** | ||
- [Ars Electronica](https://ars.electronica.art/news/en/) | ||
- [Electra](https://www.elektramontreal.ca/) | ||
- [MUTEK](https://mutek.org/) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters