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

De binefa.com
Salta a la navegació Salta a la cerca
m
m
Línia 1: Línia 1:
−
= Visualitzador Markdown Web =
+
= Prova del Visualitzador Markdown Web 🌐 =
  
−
Aplicació web pura (HTML + CSS + JavaScript) per visualitzar fitxers Markdown amb capacitat de copiar el contingut formatat a processadors de text.
+
Benvingut al '''visualitzador de Markdown''' basat en web. Aquest document mostra totes les funcionalitats.
  
−
== 🌐 Característiques ==
+
== Funcionalitats principals ⚡ ==
  
−
* ✅ '''100% client-side''' - No necessita servidor
+
Aquest visualitzador suporta:
−
* ✅ '''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 ==
+
1. '''Conversió automàtica''' de Markdown a HTML
 +
2. '''Còpia amb format''' al portapapers
 +
3. '''Drag & Drop''' de fitxers
 +
4. '''Estils inline''' per compatibilitat amb LibreOffice
  
−
=== Opció 1: Obrir directament ===
+
----
  
−
Simplement obre <code>index.html</code> amb qualsevol navegador modern:
+
== Text formatat 📝 ==
  
−
``<code>bash
+
Pots usar '''negreta''', ''cursiva'', ~~ratllat~~ i <code>codi inline</code>.
−
= Des de la terminal =
+
 
−
firefox index.html
+
També pots combinar-los: '''''negreta i cursiva''''' o '''_negreta amb cursiva_'''.
−
= o =
+
 
−
google-chrome index.html
+
=== Codi de programació 💻 ===
−
= o =
+
 
−
open index.html  # macOS
+
==== Python ====
 +
 
 +
``<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>
  
−
=== Opció 2: Servidor local ===
+
==== JavaScript ====
  
−
Si vols servir-ho localment:
+
</code>`<code>javascript
 +
const factorial = (n) => {
 +
    return n <= 1 ? 1 : n * factorial(n - 1);
 +
};
  
−
</code>`<code>bash
+
console.log(factorial(5)); // 120
−
= Python 3 =
+
</code>`<code>
−
python -m http.server 8000
 
  
−
= Node.js (si tens http-server instal·lat) =
+
==== HTML/CSS ====
−
npx http-server
 
  
−
= PHP =
+
</code>`<code>html
−
php -S localhost:8000
+
<div class="container">
 +
    <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 📊 ==
 +
 
 +
=== Comparativa de tecnologies ===
  
−
=== Opció 3: Publicar online ===
+
| Tecnologia | Dificultat | Popularitat | Ús recomanat |
 +
|------------|------------|-------------|--------------|
 +
| Python | Baixa | ⭐⭐⭐⭐⭐ | Data Science, Backend |
 +
| JavaScript | Mitjana | ⭐⭐⭐⭐⭐ | Frontend, Full-stack |
 +
| Rust | Alta | ⭐⭐⭐ | Sistemes, Performance |
 +
| Go | Baixa | ⭐⭐⭐⭐ | Backend, Microserveis |
  
−
Puja </code>index.html<code> a qualsevol hosting estàtic:
+
=== Taula de símbols ===
−
* GitHub Pages
 
−
* Netlify
 
−
* Vercel
 
−
* GitLab Pages
 
  
−
== 📋 Com funciona ==
+
| Símbol | Nom | Codi HTML | Ús |
 +
|--------|-----|-----------|-----|
 +
| α | Alfa | </code>&alpha;<code> | Matemàtiques |
 +
| β | Beta | </code>&beta;<code> | Estadística |
 +
| π | Pi | </code>&pi;<code> | Geometria |
 +
| Σ | Suma | </code>&Sigma;<code> | Sumatori |
  
−
=== 1. Obrir fitxer ===
+
----
  
−
* '''Mètode 1''': Clica "📂 Obrir Markdown"
+
== Llistes 📋 ==
−
* '''Mètode 2''': Arrossega un fitxer .md a la finestra
 
  
−
=== 2. Visualitzar ===
+
=== Llista ordenada ===
  
−
El contingut es converteix automàticament de Markdown a HTML amb estils professionals.
+
1. '''Primer pas''': Obrir el fitxer Markdown
 +
2. '''Segon pas''': Visualitzar el contingut
 +
3. '''Tercer pas''': Copiar amb format
 +
4. '''Quart pas''': Enganxar a LibreOffice
  
−
=== 3. Copiar ===
+
=== Llista desordenada ===
  
−
* '''Botó "📋 Copiar Formatat"''': Copia tot amb format
+
* Components electrònics:
−
* '''Selecció manual''': Selecciona amb el ratolí i Ctrl+C
+
  - Raspberry Pi 4
−
* '''A LibreOffice''': Enganxa amb Ctrl+V
+
  - ESP32-S3
 +
  - Arduino Nano
 +
* Protocols de comunicació:
 +
  - CAN Bus
 +
  - I2C
 +
  - MQTT
 +
* Llenguatges de programació:
 +
  - Python 🐍
 +
  - C/C++ ⚙️
 +
  - JavaScript 🌐
  
−
=== 4. Recarregar ===
+
=== Llista de tasques ===
  
−
Si modifiques el fitxer extern, clica "🔄 Recarregar" per veure els canvis.
+
* [x] Implementar visualitzador
 +
* [x] Afegir suport de taules
 +
* [x] Implementar còpia amb format
 +
* [ ] Afegir exportació a PDF
 +
* [ ] Implementar mode fosc
  
−
== 🛠️ Tecnologies ==
+
----
  
−
=== Marked.js ===
+
== Cites i referències 💬 ==
−
Llibreria JavaScript per convertir Markdown a HTML:
 
−
* '''CDN''': https://cdn.jsdelivr.net/npm/marked/marked.min.js
 
−
* '''Documentació''': https://marked.js.org/
 
  
−
=== Clipboard API ===
+
: "La millor manera d'aprendre és ensenyant."
−
API moderna del navegador per copiar al portapapers:
+
: > — '''Proverbis educatius'''
−
</code>`<code>javascript
 
−
await navigator.clipboard.write([clipboardItem]);
 
−
</code>`<code>
 
  
−
Amb fallback per navegadors antics:
+
: '''Nota important''': Els estils inline garanteixen que el format es mantingui quan copies el contingut a processadors de text com LibreOffice o Microsoft Word.
−
</code>`<code>javascript
 
−
document.execCommand('copy');
 
−
</code>`<code>
 
  
−
== 🎨 Format suportat ==
+
=== Cita niuada ===
  
−
El visualitzador renderitza:
+
: Aquest és el primer nivell de cita.
 +
: > > Això és una cita dins d'una altra cita.
 +
: >
 +
: > > I això és un tercer nivell!
  
−
* '''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)
 
  
−
== 💡 Avantatges vs versions desktop ==
+
== Enllaços i imatges 🔗 ==
  
−
=== Pros: ===
+
=== Enllaços ===
−
* ✅ 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: ===
+
* [https://www.markdownguide.org/ Documentació de Markdown]
−
* ❌ Requereix navegador modern
+
* [https://marked.js.org/ Marked.js Library]
−
* ❌ Limitat per la sandbox del navegador
+
* [https://github.com GitHub]
−
* ❌ Clipboard API pot no funcionar en alguns navegadors
 
  
−
== 🌍 Compatibilitat de navegadors ==
+
=== Enllaços amb títol ===
  
−
=== Funcionalitat completa: ===
+
* [https://claude.ai "Intel·ligència Artificial" Anthropic Claude]
−
* Chrome/Edge 76+
+
* [https://developer.mozilla.org "Documentació web" MDN Web Docs]
−
* Firefox 87+
 
−
* Safari 13.1+
 
  
−
=== Funcionalitat limitada (sense Clipboard API moderna): ===
+
----
−
* IE11 (amb fallback)
 
−
* Navegadors antics (selecció manual funciona)
 
  
−
== 🔒 Seguretat ==
+
== Separadors horitzontals ==
  
−
* '''Tot el processament és client-side'''
+
Pots usar diferents estils per crear línies:
−
* '''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: ===
+
== Text especial 🎯 ==
−
* Visualitzar apunts en Markdown
 
−
* Copiar contingut per treballs
 
−
* Compartir l'eina via USB
 
  
−
=== Per a professors: ===
+
=== Subíndexs i superíndexs ===
−
* Crear materials educatius
 
−
* Distribuir via intranet escolar
 
−
* Funciona sense connexió
 
  
−
=== Per a desenvolupadors: ===
+
* Fórmula química: H₂O (subíndex)
−
* Previsualitzar README.md
+
* Potència: 2⁵ = 32 (superíndex)
−
* Convertir documentació a format editable
+
* Equació: E = mc² (relativitat)
−
* Integrar en altres projectes web
 
  
−
== 🔧 Personalització ==
+
=== Caràcters especials ===
  
−
=== Canviar colors ===
+
* Matemàtiques: ∑, ∫, ∂, ∞, ≈, ≠, ≤, ≥
 +
* Greeks: α, β, γ, δ, ε, θ, λ, μ, π, σ, τ, φ, ψ, ω
 +
* Fletxes: ← → ↑ ↓ ↔ ⇒ ⇐ ⇔
 +
* Símbols: ✓ ✗ ★ ☆ ♠ ♣ ♥ ♦ © ® ™
  
−
Edita les variables CSS a la secció </code><style><code>:
+
----
  
−
</code>`<code>css
+
== Blocs de codi inline ==
−
/'' Colors principals ''/
 
−
#3498db  →  El teu color primari
 
−
#2c3e50  →  Color del text
 
−
#f4f4f4  →  Fons del codi
 
−
</code>`<code>
 
  
−
=== Afegir extensions Marked ===
+
Quan vols destacar codi dins d'una frase, usa </code>codi inline<code> com aquest:
  
−
</code>`<code>javascript
+
* La funció </code>print()<code> en Python mostra text
−
marked.setOptions({
+
* L'element </code><div><code> en HTML és un contenidor
−
    breaks: true,
+
* La propietat </code>display: flex<code> en CSS crea layouts flexibles
−
    gfm: true,
 
−
    // Afegeix més opcions aquí
 
−
});
 
−
</code>`<code>
 
  
−
=== Canviar estils inline ===
+
----
  
−
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
 +
= Declaració de variables =
 +
nom = "Jordi"
 +
edat = 35
 +
altura = 1.75
 +
es_professor = True
  
−
1. Descarrega Marked.js:
+
print(f"{nom} té {edat} anys i mesura {altura}m")
−
</code>`<code>bash
 
−
wget https://cdn.jsdelivr.net/npm/marked/marked.min.js
 
 
</code>`<code>
 
</code>`<code>
  
−
2. Canvia la línia al HTML:
+
=== Pràctica 2: Sessions en PHP ===
−
</code>`<code>html
+
 
−
<!-- De -->
+
</code>`<code>php
−
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+
<?php
 +
session_start();
  
−
<!-- A -->
+
// Guardar dades a la sessió
−
<script src="marked.min.js"></script>
+
$_SESSION['usuari'] = 'alumne01';
−
</code>``
+
$_SESSION['rol'] = 'estudiant';
  
−
Ara funciona sense connexió! ✈️
+
// Llegir dades de la sessió
 +
echo "Benvingut, " . $_SESSION['usuari'];
 +
?>
 +
</code>`<code>
  
−
== 🐛 Solució de problemes ==
+
=== 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
 
  
−
=== Els estils no es mantenen a LibreOffice ===
+
== Taula complexa amb format 📈 ==
  
−
* Assegura't d'usar Ctrl+V (no Ctrl+Shift+V)
+
| Component | Tensió | Corrent | Potència | Preu | Disponibilitat |
−
* 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 ===
+
----
  
−
* Verifica que l'extensió sigui .md o .markdown
+
== Blockquote amb format ==
−
* Comprova que el fitxer tingui contingut
 
  
−
== 📊 Comparativa de versions ==
+
: ### ⚠️ Advertiment Important
 +
: > 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 |
 
  
−
*Amb Marked.js descarregat
+
== Conclusió 🎉 ==
  
−
== 🎓 Aprenentatge ==
+
Aquest visualitzador de Markdown ofereix:
  
−
Aquest projecte és ideal per aprendre:
+
1. ✅ '''Visualització professional''' amb estils moderns
 +
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
  
−
* FileReader API
+
'''Prova-ho ara!''' Obre aquest fitxer, clica "Copiar Formatat" i enganxa'l a LibreOffice per veure com manté tots els estils. 🚀
−
* 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.
+
''Document generat per a proves del visualitzador Markdown - © 2024''

Revisió del 18:40, 10 des 2025

Prova del Visualitzador Markdown Web 🌐

Benvingut al visualitzador de Markdown basat en web. Aquest document mostra totes les funcionalitats.

Funcionalitats principals ⚡

Aquest visualitzador suporta:

1. Conversió automàtica de Markdown a HTML 2. Còpia amb format al portapapers 3. Drag & Drop de fitxers 4. Estils inline per compatibilitat amb LibreOffice

Text formatat 📝

Pots usar negreta, cursiva, ~~ratllat~~ i codi inline.

També pots combinar-los: negreta i cursiva o _negreta amb cursiva_.

Codi de programació 💻

Python

``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)}")

`

JavaScript

`javascript const factorial = (n) => { 

   return n <= 1 ? 1 : n * factorial(n - 1);

};

console.log(factorial(5)); // 120 `

HTML/CSS

`html

Hola món!

Aquest és un exemple d'HTML.

`

Taules 📊

Comparativa de tecnologies

| Tecnologia | Dificultat | Popularitat | Ús recomanat | |------------|------------|-------------|--------------| | Python | Baixa | ⭐⭐⭐⭐⭐ | Data Science, Backend | | JavaScript | Mitjana | ⭐⭐⭐⭐⭐ | Frontend, Full-stack | | Rust | Alta | ⭐⭐⭐ | Sistemes, Performance | | Go | Baixa | ⭐⭐⭐⭐ | Backend, Microserveis |

Taula de símbols

| Símbol | Nom | Codi HTML | Ús | |--------|-----|-----------|-----| | α | Alfa | α | Matemàtiques | | β | Beta | β | Estadística | | π | Pi | π | Geometria | | Σ | Suma | Σ | Sumatori |

Llistes 📋

Llista ordenada

1. Primer pas: Obrir el fitxer Markdown 2. Segon pas: Visualitzar el contingut 3. Tercer pas: Copiar amb format 4. Quart pas: Enganxar a LibreOffice

Llista desordenada

  • Components electrònics:
 - Raspberry Pi 4
 - ESP32-S3
 - Arduino Nano
  • Protocols de comunicació:
 - CAN Bus
 - I2C
 - MQTT
  • Llenguatges de programació:
 - Python 🐍
 - C/C++ ⚙️
 - JavaScript 🌐

Llista de tasques

  • [x] Implementar visualitzador
  • [x] Afegir suport de taules
  • [x] Implementar còpia amb format
  • [ ] Afegir exportació a PDF
  • [ ] Implementar mode fosc

Cites i referències 💬

"La millor manera d'aprendre és ensenyant."
> — 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.

Cita niuada

Aquest és el primer nivell de cita.
> > Això és una cita dins d'una altra cita.
>
> > I això és un tercer nivell!

Enllaços i imatges 🔗

Enllaços

Enllaços amb títol

Separadors horitzontals

Pots usar diferents estils per crear línies:

*

___

Text especial 🎯

Subíndexs i superíndexs

  • Fórmula química: H₂O (subíndex)
  • Potència: 2⁵ = 32 (superíndex)
  • Equació: E = mc² (relativitat)

Caràcters especials

  • Matemàtiques: ∑, ∫, ∂, ∞, ≈, ≠, ≤, ≥
  • Greeks: α, β, γ, δ, ε, θ, λ, μ, π, σ, τ, φ, ψ, ω
  • Fletxes: ← → ↑ ↓ ↔ ⇒ ⇐ ⇔
  • Símbols: ✓ ✗ ★ ☆ ♠ ♣ ♥ ♦ © ® ™

Blocs de codi inline

Quan vols destacar codi dins d'una frase, usa codi inline com aquest:

  • La funció print() en Python mostra text
  • L'element
    en HTML és un contenidor
  • La propietat display: flex en CSS crea layouts flexibles

Exemples d'ús en educació 🎓

Pràctica 1: Variables en Python

`python

Declaració de variables

nom = "Jordi" edat = 35 altura = 1.75 es_professor = True

print(f"{nom} té {edat} anys i mesura {altura}m") `

Pràctica 2: Sessions en PHP

`php <?php session_start();

// Guardar dades a la sessió $_SESSION['usuari'] = 'alumne01'; $_SESSION['rol'] = 'estudiant';

// Llegir dades de la sessió echo "Benvingut, " . $_SESSION['usuari']; ?> `

Pràctica 3: Formulari HTML

`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> ``

Taula complexa amb format 📈

| Component | Tensió | Corrent | Potència | Preu | Disponibilitat | |-----------|--------|---------|----------|------|----------------| | 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 |

Blockquote amb format

### ⚠️ Advertiment Important
> 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! ✨

Conclusió 🎉

Aquest visualitzador de Markdown ofereix:

1. ✅ Visualització professional amb estils moderns 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. 🚀

Document generat per a proves del visualitzador Markdown - © 2024

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