Diferència entre revisions de la pàgina «Alguns recursos personalitzats»

De binefa.com
Salta a la navegació Salta a la cerca
(Es crea la pàgina amb «= Prova del Visualitzador Markdown Web 🌐 = Benvingut al '''visualitzador de Markdown''' basat en web. Aquest document mostra totes les funcionalitats. == Funciona...».)
 
m
Línia 1: Línia 1:
−
= Prova del Visualitzador Markdown Web 🌐 =
+
= Visualitzador Markdown Web =
  
−
Benvingut al '''visualitzador de Markdown''' basat en web. Aquest document mostra totes les funcionalitats.
+
Aplicació web pura (HTML + CSS + JavaScript) per visualitzar fitxers Markdown amb capacitat de copiar el contingut formatat a processadors de text.
  
−
== Funcionalitats principals ⚡ ==
+
== 🌐 Característiques ==
  
−
Aquest visualitzador suporta:
+
* ✅ '''100% client-side''' - No necessita servidor
 +
* ✅ '''Zero dependències locals''' - Usa CDN per Marked.js
 +
* ✅ '''Drag & Drop''' - Arrossega fitxers directament
 +
* ✅ '''Copiar formatat''' - Compatible amb LibreOffice i Word
 +
* ✅ '''Responsive''' - Funciona en mòbil i escriptori
 +
* ✅ '''Estils inline''' - Els estils es mantenen en copiar
  
−
1. '''Conversió automàtica''' de Markdown a HTML
+
== 🚀 Ús ==
−
2. '''Còpia amb format''' al portapapers
 
−
3. '''Drag & Drop''' de fitxers
 
−
4. '''Estils inline''' per compatibilitat amb LibreOffice
 
  
−
----
+
=== Opció 1: Obrir directament ===
  
−
== Text formatat 📝 ==
+
Simplement obre <code>index.html</code> amb qualsevol navegador modern:
  
−
Pots usar '''negreta''', ''cursiva'', ~~ratllat~~ i <code>codi inline</code>.
+
``<code>bash
−
 
+
= Des de la terminal =
−
També pots combinar-los: '''''negreta i cursiva''''' o '''_negreta amb cursiva_'''.
+
firefox index.html
−
 
+
= o =
−
=== Codi de programació 💻 ===
+
google-chrome index.html
−
 
+
= o =
−
==== Python ====
+
open index.html  # macOS
−
 
 
−
``<code>python
 
−
def fibonacci(n):
 
−
    """Calcula la seqüència de Fibonacci"""
 
−
    if n <= 1:
 
−
        return n
 
−
    return fibonacci(n-1) + fibonacci(n-2)
 
−
 
 
−
= Exemple =
 
−
for i in range(10):
 
−
    print(f"F({i}) = {fibonacci(i)}")
 
 
</code>`<code>
 
</code>`<code>
  
−
==== JavaScript ====
+
=== Opció 2: Servidor local ===
  
−
</code>`<code>javascript
+
Si vols servir-ho localment:
−
const factorial = (n) => {
 
−
    return n <= 1 ? 1 : n * factorial(n - 1);
 
−
};
 
  
−
console.log(factorial(5)); // 120
+
</code>`<code>bash
−
</code>`<code>
+
= Python 3 =
 +
python -m http.server 8000
  
−
==== HTML/CSS ====
+
= Node.js (si tens http-server instal·lat) =
 +
npx http-server
  
−
</code>`<code>html
+
= PHP =
−
<div class="container">
+
php -S localhost:8000
−
    <h1 style="color: blue;">Hola món!</h1>
 
−
    <p>Aquest és un exemple d'HTML.</p>
 
−
</div>
 
 
</code>`<code>
 
</code>`<code>
  
−
----
+
Després obre: http://localhost:8000
  
−
== Taules 📊 ==
+
=== Opció 3: Publicar online ===
  
−
=== Comparativa de tecnologies ===
+
Puja </code>index.html<code> a qualsevol hosting estàtic:
 +
* GitHub Pages
 +
* Netlify
 +
* Vercel
 +
* GitLab Pages
  
−
| Tecnologia | Dificultat | Popularitat | Ús recomanat |
+
== 📋 Com funciona ==
−
|------------|------------|-------------|--------------|
 
−
| Python | Baixa | ⭐⭐⭐⭐⭐ | Data Science, Backend |
 
−
| JavaScript | Mitjana | ⭐⭐⭐⭐⭐ | Frontend, Full-stack |
 
−
| Rust | Alta | ⭐⭐⭐ | Sistemes, Performance |
 
−
| Go | Baixa | ⭐⭐⭐⭐ | Backend, Microserveis |
 
  
−
=== Taula de símbols ===
+
=== 1. Obrir fitxer ===
  
−
| Símbol | Nom | Codi HTML | Ús |
+
* '''Mètode 1''': Clica "📂 Obrir Markdown"
−
|--------|-----|-----------|-----|
+
* '''Mètode 2''': Arrossega un fitxer .md a la finestra
−
| α | Alfa | </code>&alpha;<code> | Matemàtiques |
 
−
| β | Beta | </code>&beta;<code> | Estadística |
 
−
| π | Pi | </code>&pi;<code> | Geometria |
 
−
| Σ | Suma | </code>&Sigma;<code> | Sumatori |
 
  
−
----
+
=== 2. Visualitzar ===
  
−
== Llistes 📋 ==
+
El contingut es converteix automàticament de Markdown a HTML amb estils professionals.
  
−
=== Llista ordenada ===
+
=== 3. Copiar ===
  
−
1. '''Primer pas''': Obrir el fitxer Markdown
+
* '''Botó "📋 Copiar Formatat"''': Copia tot amb format
−
2. '''Segon pas''': Visualitzar el contingut
+
* '''Selecció manual''': Selecciona amb el ratolí i Ctrl+C
−
3. '''Tercer pas''': Copiar amb format
+
* '''A LibreOffice''': Enganxa amb Ctrl+V
−
4. '''Quart pas''': Enganxar a LibreOffice
 
  
−
=== Llista desordenada ===
+
=== 4. Recarregar ===
  
−
* Components electrònics:
+
Si modifiques el fitxer extern, clica "🔄 Recarregar" per veure els canvis.
−
  - Raspberry Pi 4
 
−
  - ESP32-S3
 
−
  - Arduino Nano
 
−
* Protocols de comunicació:
 
−
  - CAN Bus
 
−
  - I2C
 
−
  - MQTT
 
−
* Llenguatges de programació:
 
−
  - Python 🐍
 
−
  - C/C++ ⚙️
 
−
  - JavaScript 🌐
 
  
−
=== Llista de tasques ===
+
== 🛠️ Tecnologies ==
  
−
* [x] Implementar visualitzador
+
=== Marked.js ===
−
* [x] Afegir suport de taules
+
Llibreria JavaScript per convertir Markdown a HTML:
−
* [x] Implementar còpia amb format
+
* '''CDN''': https://cdn.jsdelivr.net/npm/marked/marked.min.js
−
* [ ] Afegir exportació a PDF
+
* '''Documentació''': https://marked.js.org/
−
* [ ] Implementar mode fosc
 
  
−
----
+
=== Clipboard API ===
 +
API moderna del navegador per copiar al portapapers:
 +
</code>`<code>javascript
 +
await navigator.clipboard.write([clipboardItem]);
 +
</code>`<code>
  
−
== Cites i referències 💬 ==
+
Amb fallback per navegadors antics:
 +
</code>`<code>javascript
 +
document.execCommand('copy');
 +
</code>`<code>
  
−
: "La millor manera d'aprendre és ensenyant."
+
== 🎨 Format suportat ==
−
: > — '''Proverbis educatius'''
 
  
−
: '''Nota important''': Els estils inline garanteixen que el format es mantingui quan copies el contingut a processadors de text com LibreOffice o Microsoft Word.
+
El visualitzador renderitza:
  
−
=== Cita niuada ===
+
* '''Capçaleres''' (h1-h6) amb vores de color
 +
* '''Negreta''' i ''cursiva''
 +
* </code>Codi inline<code> amb fons gris i text vermell
 +
* Blocs de codi amb vora blava
 +
* '''Taules''' amb capçalera blava i files zebrades
 +
* Llistes ordenades i desordenades
 +
* Cites (blockquotes) amb vora blava
 +
* Enllaços en blau
 +
* Imatges (responsive)
  
−
: Aquest és el primer nivell de cita.
+
== 💡 Avantatges vs versions desktop ==
−
: > > Això és una cita dins d'una altra cita.
 
−
: >
 
−
: > > I això és un tercer nivell!
 
  
−
----
+
=== Pros: ===
 +
* ✅ No requereix instal·lació
 +
* ✅ Funciona en qualsevol sistema operatiu
 +
* ✅ Es pot compartir via URL
 +
* ✅ Més lleuger (un sol fitxer HTML)
 +
* ✅ Fàcil d'actualitzar
  
−
== Enllaços i imatges 🔗 ==
+
=== Cons: ===
 +
* ❌ Requereix navegador modern
 +
* ❌ Limitat per la sandbox del navegador
 +
* ❌ Clipboard API pot no funcionar en alguns navegadors
  
−
=== Enllaços ===
+
== 🌍 Compatibilitat de navegadors ==
  
−
* [https://www.markdownguide.org/ Documentació de Markdown]
+
=== Funcionalitat completa: ===
−
* [https://marked.js.org/ Marked.js Library]
+
* Chrome/Edge 76+
−
* [https://github.com GitHub]
+
* Firefox 87+
 +
* Safari 13.1+
  
−
=== Enllaços amb títol ===
+
=== Funcionalitat limitada (sense Clipboard API moderna): ===
 +
* IE11 (amb fallback)
 +
* Navegadors antics (selecció manual funciona)
  
−
* [https://claude.ai "Intel·ligència Artificial" Anthropic Claude]
+
== 🔒 Seguretat ==
−
* [https://developer.mozilla.org "Documentació web" MDN Web Docs]
 
  
−
----
+
* '''Tot el processament és client-side'''
 +
* '''No s'envien dades a cap servidor'''
 +
* '''Marked.js sanititza HTML per defecte'''
 +
* '''No executa scripts dels fitxers Markdown'''
  
−
== Separadors horitzontals ==
+
== 📱 Ús en mòbil ==
  
−
Pots usar diferents estils per crear línies:
+
L'aplicació funciona en mòbils però amb limitacions:
  
−
----
+
* ✅ Visualització funciona perfectament
 +
* ⚠️ Copiar formatat pot ser limitat
 +
* ⚠️ Alguns navegadors mòbils no suporten Clipboard API
  
−
''*''
+
== 🎯 Casos d'ús ==
  
−
___
+
=== Per a estudiants: ===
 +
* Visualitzar apunts en Markdown
 +
* Copiar contingut per treballs
 +
* Compartir l'eina via USB
  
−
----
+
=== Per a professors: ===
 +
* Crear materials educatius
 +
* Distribuir via intranet escolar
 +
* Funciona sense connexió
  
−
== Text especial 🎯 ==
+
=== Per a desenvolupadors: ===
 +
* Previsualitzar README.md
 +
* Convertir documentació a format editable
 +
* Integrar en altres projectes web
  
−
=== Subíndexs i superíndexs ===
+
== 🔧 Personalització ==
  
−
* Fórmula química: H₂O (subíndex)
+
=== Canviar colors ===
−
* Potència: 2⁵ = 32 (superíndex)
 
−
* Equació: E = mc² (relativitat)
 
  
−
=== Caràcters especials ===
+
Edita les variables CSS a la secció </code><style><code>:
  
−
* Matemàtiques: ∑, ∫, ∂, ∞, ≈, ≠, ≤, ≥
+
</code>`<code>css
−
* Greeks: α, β, γ, δ, ε, θ, λ, μ, π, σ, τ, φ, ψ, ω
+
/'' Colors principals ''/
−
* Fletxes: ← → ↑ ↓ ↔ ⇒ ⇐ ⇔
+
#3498db  → El teu color primari
−
* Símbols: ✓ ✗ ★ ☆ ♠ ♣ ♥ ♦ © ® ™
+
#2c3e50  →  Color del text
 +
#f4f4f4  →  Fons del codi
 +
</code>`<code>
  
−
----
+
=== Afegir extensions Marked ===
  
−
== Blocs de codi inline ==
+
</code>`<code>javascript
−
 
+
marked.setOptions({
−
Quan vols destacar codi dins d'una frase, usa </code>codi inline<code> com aquest:
+
    breaks: true,
 +
    gfm: true,
 +
    // Afegeix més opcions aquí
 +
});
 +
</code>`<code>
  
−
* La funció </code>print()<code> en Python mostra text
+
=== Canviar estils inline ===
−
* L'element </code><div><code> en HTML és un contenidor
 
−
* La propietat </code>display: flex<code> en CSS crea layouts flexibles
 
  
−
----
+
Modifica l'objecte </code>styles<code> dins la funció </code>applyInlineStyles()<code>.
  
−
== Exemples d'ús en educació 🎓 ==
+
== 📦 Versió offline ==
  
−
=== Pràctica 1: Variables en Python ===
+
Per fer-la completament offline:
  
−
</code>`<code>python
+
1. Descarrega Marked.js:
−
= Declaració de variables =
+
</code>`<code>bash
−
nom = "Jordi"
+
wget https://cdn.jsdelivr.net/npm/marked/marked.min.js
−
edat = 35
 
−
altura = 1.75
 
−
es_professor = True
 
−
 
 
−
print(f"{nom} té {edat} anys i mesura {altura}m")
 
 
</code>`<code>
 
</code>`<code>
  
−
=== Pràctica 2: Sessions en PHP ===
+
2. Canvia la línia al HTML:
 +
</code>`<code>html
 +
<!-- De -->
 +
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  
−
</code>`<code>php
+
<!-- A -->
−
<?php
+
<script src="marked.min.js"></script>
−
session_start();
+
</code>``
  
−
// Guardar dades a la sessió
+
Ara funciona sense connexió! ✈️
−
$_SESSION['usuari'] = 'alumne01';
 
−
$_SESSION['rol'] = 'estudiant';
 
  
−
// Llegir dades de la sessió
+
== 🐛 Solució de problemes ==
−
echo "Benvingut, " . $_SESSION['usuari'];
 
−
?>
 
−
</code>`<code>
 
  
−
=== Pràctica 3: Formulari HTML ===
+
=== El botó copiar no funciona ===
−
 
 
−
</code>`<code>html
 
−
<form method="POST" action="processa.php">
 
−
    <label for="nom">Nom:</label>
 
−
    <input type="text" id="nom" name="nom" required>
 
−
   
 
−
    <label for="email">Email:</label>
 
−
    <input type="email" id="email" name="email" required>
 
−
   
 
−
    <button type="submit">Enviar</button>
 
−
</form>
 
−
</code>``
 
  
−
----
+
* Obre amb HTTPS o localhost (requeriment de Clipboard API)
 +
* Usa la selecció manual + Ctrl+C com alternativa
  
−
== Taula complexa amb format 📈 ==
+
=== Els estils no es mantenen a LibreOffice ===
  
−
| Component | Tensió | Corrent | Potència | Preu | Disponibilitat |
+
* Assegura't d'usar Ctrl+V (no Ctrl+Shift+V)
−
|-----------|--------|---------|----------|------|----------------|
+
* Prova "Enganxa especial" → HTML
−
| ESP32-S3 | 3.3V | 500mA | 1.65W | 8€ | ✅ En stock |
 
−
| Raspberry Pi 4 | 5V | 3A | 15W | 55€ | ⚠️ Limitada |
 
−
| Arduino Nano | 5V | 40mA | 0.2W | 4€ | ✅ En stock |
 
−
| Sensor DHT22 | 3.3-5V | 1.5mA | 0.0075W | 3€ | ✅ En stock |
 
  
−
----
+
=== No es pot obrir el fitxer ===
  
−
== Blockquote amb format ==
+
* Verifica que l'extensió sigui .md o .markdown
 +
* Comprova que el fitxer tingui contingut
  
−
: ### ⚠️ Advertiment Important
+
== 📊 Comparativa de versions ==
−
: > Quan copies el contingut amb el botó '''"Copiar Formatat"''', tots aquests estils es mantenen:
 
−
: > - Colors de text
 
−
: - Mides de font
 
−
: - Vores i taules
 
−
: - Estils de codi
 
−
: > Això garanteix que el document es vegi professional a LibreOffice Writer! ✨
 
  
−
----
+
| Característica | Web | PyQt6 | PySide6+QML |
 +
|----------------|-----|-------|-------------|
 +
| Instal·lació | ❌ No | ✅ Sí | ✅ Sí |
 +
| Multiplataforma | ✅ | ✅ | ✅ |
 +
| Pes | 1 fitxer | ~50MB | ~50MB |
 +
| Offline | ✅* | ✅ | ✅ |
 +
| Distribució | URL | Executable | Executable |
  
−
== Conclusió 🎉 ==
+
*Amb Marked.js descarregat
  
−
Aquest visualitzador de Markdown ofereix:
+
== 🎓 Aprenentatge ==
  
−
1. ✅ '''Visualització professional''' amb estils moderns
+
Aquest projecte és ideal per aprendre:
−
2. ✅ '''Còpia amb format''' compatible amb processadors de text
 
−
3. ✅ '''Interfície intuïtiva''' amb drag & drop
 
−
4. ✅ '''100% client-side''' sense necessitat de servidor
 
  
−
'''Prova-ho ara!''' Obre aquest fitxer, clica "Copiar Formatat" i enganxa'l a LibreOffice per veure com manté tots els estils. 🚀
+
* FileReader API
 +
* Clipboard API moderna
 +
* Drag & Drop API
 +
* DOM manipulation
 +
* Conversió Markdown → HTML
 +
* Estils inline vs CSS extern
  
−
----
+
== 📄 Llicència ==
  
−
''Document generat per a proves del visualitzador Markdown - © 2024''
+
Codi lliure per a ús educatiu i personal.

Revisió del 18:38, 10 des 2025

Visualitzador Markdown Web

Aplicació web pura (HTML + CSS + JavaScript) per visualitzar fitxers Markdown amb capacitat de copiar el contingut formatat a processadors de text.

🌐 Característiques

  • ✅ 100% client-side - No necessita servidor
  • ✅ Zero dependències locals - Usa CDN per Marked.js
  • ✅ Drag & Drop - Arrossega fitxers directament
  • ✅ Copiar formatat - Compatible amb LibreOffice i Word
  • ✅ Responsive - Funciona en mòbil i escriptori
  • ✅ Estils inline - Els estils es mantenen en copiar

🚀 Ús

Opció 1: Obrir directament

Simplement obre index.html amb qualsevol navegador modern:

``bash

Des de la terminal

firefox index.html

o

google-chrome index.html

o

open index.html # macOS `

Opció 2: Servidor local

Si vols servir-ho localment:

`bash

Python 3

python -m http.server 8000

Node.js (si tens http-server instal·lat)

npx http-server

PHP

php -S localhost:8000 `

Després obre: http://localhost:8000

Opció 3: Publicar online

Puja index.html a qualsevol hosting estàtic:

  • GitHub Pages
  • Netlify
  • Vercel
  • GitLab Pages

📋 Com funciona

1. Obrir fitxer

  • Mètode 1: Clica "📂 Obrir Markdown"
  • Mètode 2: Arrossega un fitxer .md a la finestra

2. Visualitzar

El contingut es converteix automàticament de Markdown a HTML amb estils professionals.

3. Copiar

  • Botó "📋 Copiar Formatat": Copia tot amb format
  • Selecció manual: Selecciona amb el ratolí i Ctrl+C
  • A LibreOffice: Enganxa amb Ctrl+V

4. Recarregar

Si modifiques el fitxer extern, clica "🔄 Recarregar" per veure els canvis.

🛠️ Tecnologies

Marked.js

Llibreria JavaScript per convertir Markdown a HTML:

Clipboard API

API moderna del navegador per copiar al portapapers: `javascript await navigator.clipboard.write([clipboardItem]); `

Amb fallback per navegadors antics: `javascript document.execCommand('copy'); `

🎨 Format suportat

El visualitzador renderitza:

  • Capçaleres (h1-h6) amb vores de color
  • Negreta i cursiva
  • Codi inline amb fons gris i text vermell
  • Blocs de codi amb vora blava
  • Taules amb capçalera blava i files zebrades
  • Llistes ordenades i desordenades
  • Cites (blockquotes) amb vora blava
  • Enllaços en blau
  • Imatges (responsive)

💡 Avantatges vs versions desktop

Pros:

  • ✅ No requereix instal·lació
  • ✅ Funciona en qualsevol sistema operatiu
  • ✅ Es pot compartir via URL
  • ✅ Més lleuger (un sol fitxer HTML)
  • ✅ Fàcil d'actualitzar

Cons:

  • ❌ Requereix navegador modern
  • ❌ Limitat per la sandbox del navegador
  • ❌ Clipboard API pot no funcionar en alguns navegadors

🌍 Compatibilitat de navegadors

Funcionalitat completa:

  • Chrome/Edge 76+
  • Firefox 87+
  • Safari 13.1+

Funcionalitat limitada (sense Clipboard API moderna):

  • IE11 (amb fallback)
  • Navegadors antics (selecció manual funciona)

🔒 Seguretat

  • Tot el processament és client-side
  • No s'envien dades a cap servidor
  • Marked.js sanititza HTML per defecte
  • No executa scripts dels fitxers Markdown

📱 Ús en mòbil

L'aplicació funciona en mòbils però amb limitacions:

  • ✅ Visualització funciona perfectament
  • ⚠️ Copiar formatat pot ser limitat
  • ⚠️ Alguns navegadors mòbils no suporten Clipboard API

🎯 Casos d'ús

Per a estudiants:

  • Visualitzar apunts en Markdown
  • Copiar contingut per treballs
  • Compartir l'eina via USB

Per a professors:

  • Crear materials educatius
  • Distribuir via intranet escolar
  • Funciona sense connexió

Per a desenvolupadors:

  • Previsualitzar README.md
  • Convertir documentació a format editable
  • Integrar en altres projectes web

🔧 Personalització

Canviar colors

Edita les variables CSS a la secció <style>:

`css / Colors principals /

  1. 3498db → El teu color primari
  2. 2c3e50 → Color del text
  3. f4f4f4 → Fons del codi

`

Afegir extensions Marked

`javascript marked.setOptions({ 

   breaks: true,
   gfm: true,
   // Afegeix més opcions aquí

}); `

Canviar estils inline

Modifica l'objecte styles dins la funció applyInlineStyles().

📦 Versió offline

Per fer-la completament offline:

1. Descarrega Marked.js: `bash wget https://cdn.jsdelivr.net/npm/marked/marked.min.js `

2. Canvia la línia al HTML: `html <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

<script src="marked.min.js"></script> ``

Ara funciona sense connexió! ✈️

🐛 Solució de problemes

El botó copiar no funciona

  • Obre amb HTTPS o localhost (requeriment de Clipboard API)
  • Usa la selecció manual + Ctrl+C com alternativa

Els estils no es mantenen a LibreOffice

  • Assegura't d'usar Ctrl+V (no Ctrl+Shift+V)
  • Prova "Enganxa especial" → HTML

No es pot obrir el fitxer

  • Verifica que l'extensió sigui .md o .markdown
  • Comprova que el fitxer tingui contingut

📊 Comparativa de versions

| Característica | Web | PyQt6 | PySide6+QML | |----------------|-----|-------|-------------| | Instal·lació | ❌ No | ✅ Sí | ✅ Sí | | Multiplataforma | ✅ | ✅ | ✅ | | Pes | 1 fitxer | ~50MB | ~50MB | | Offline | ✅* | ✅ | ✅ | | Distribució | URL | Executable | Executable |

  • Amb Marked.js descarregat

🎓 Aprenentatge

Aquest projecte és ideal per aprendre:

  • FileReader API
  • Clipboard API moderna
  • Drag & Drop API
  • DOM manipulation
  • Conversió Markdown → HTML
  • Estils inline vs CSS extern

📄 Llicència

Codi lliure per a ús educatiu i personal.

Obtingut de «https://www.binefa.com/index.php?title=Alguns_recursos_personalitzats&oldid=11347»