|
|
| (Hi ha 25 revisions intermèdies del mateix usuari que no es mostren) |
| Línia 1: |
Línia 1: |
| − | = Prova del Visualitzador Markdown Web 🌐 =
| + | * [https://binefa.com/md/ Intèrpret de markdown a text copiable i codis copiables] ([https://binefa.com/md/ESCAPAMENT_HTML.md ex1], [https://binefa.com/md/prova_web.md ex2] i [https://binefa.com/md/README_Web.md ex3]) |
| − | | + | * [https://binefa.com/md/wiki.html Convertidor de format markdown a format wiki] |
| − | Benvingut al '''visualitzador de Markdown''' basat en web. Aquest document mostra totes les funcionalitats.
| + | * [https://broker.binefa.cat/wordpressTraefik.html Guia completa: Instal·lació de Traefik + WordPress + PHP + MariaDB des de zero] |
| − | | + | * [https://broker.binefa.cat/ Broker MQTT] |
| − | == Funcionalitats principals ⚡ ==
| + | * [https://broker.binefa.cat/guia.html Guia completa: Instal·lació de Mosquitto MQTT amb Traefik en VPS] |
| − | | + | * [https://snap.berkeley.edu/snap/snap.html#present:Username=jordibinefa&ProjectName=Interacci%C3%B3%20m%C3%B2bil&noRun&editMode Interacció mòbil des d'Snap!] (Al mòbil interacciona amb [https://broker.binefa.cat/cam/ càmera] i [https://broker.binefa.cat/sens/ sensor]). I es poden [https://snap.berkeley.edu/snap/snap.html#present:Username=jordibinefa&ProjectName=reboImatges rebre imatges amb aquest codi d'Snap!] |
| − | Aquest visualitzador suporta:
| + | * [https://snap.berkeley.edu/snap/snap.html#present:Username=jordibinefa&ProjectName=IoT-02_board_segur_EIC Control amb Snap! de la placa IoT-02] |
| − | | + | * [https://snap.berkeley.edu/snap/snap.html#open:https://raw.githubusercontent.com/jordibinefa/IoT-Vertebrae/refs/heads/main/snap/plcEdu_20250902.xml Control amb Snap! del ][[IoT-Vertebrae PLC Edu]] (cal activar les extensions de JavaScript) |
| − | 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 <code>codi inline</code>.
| |
| − | | |
| − | També pots combinar-los: '''''negreta i cursiva''''' o '''_negreta amb cursiva_'''.
| |
| − | | |
| − | === Codi de programació 💻 ===
| |
| − | | |
| − | ==== 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>
| |
| − | | |
| − | ==== JavaScript ====
| |
| − | | |
| − | </code>`<code>javascript
| |
| − | const factorial = (n) => {
| |
| − | return n <= 1 ? 1 : n * factorial(n - 1);
| |
| − | };
| |
| − | | |
| − | console.log(factorial(5)); // 120
| |
| − | </code>`<code>
| |
| − | | |
| − | ==== HTML/CSS ====
| |
| − | | |
| − | </code>`<code>html
| |
| − | <div class="container">
| |
| − | <h1 style="color: blue;">Hola món!</h1>
| |
| − | <p>Aquest és un exemple d'HTML.</p>
| |
| − | </div>
| |
| − | </code>`<code>
| |
| − | | |
| − | ----
| |
| − | | |
| − | == 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 | </code>α<code> | Matemàtiques |
| |
| − | | β | Beta | </code>β<code> | Estadística |
| |
| − | | π | Pi | </code>π<code> | Geometria |
| |
| − | | Σ | Suma | </code>Σ<code> | 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 ===
| |
| − | | |
| − | * [https://www.markdownguide.org/ Documentació de Markdown] | |
| − | * [https://marked.js.org/ Marked.js Library] | |
| − | * [https://github.com GitHub] | |
| − | | |
| − | === Enllaços amb títol === | |
| − | | |
| − | * [https://claude.ai "Intel·ligència Artificial" Anthropic Claude]
| |
| − | * [https://developer.mozilla.org "Documentació web" MDN Web Docs]
| |
| − | | |
| − | ----
| |
| − | | |
| − | == 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 </code>codi inline<code> com aquest:
| |
| − | | |
| − | * La funció </code>print()<code> en Python mostra text
| |
| − | * L'element </code><div><code> en HTML és un contenidor
| |
| − | * La propietat </code>display: flex<code> en CSS crea layouts flexibles
| |
| − | | |
| − | ----
| |
| − | | |
| − | == Exemples d'ús en educació 🎓 == | |
| − | | |
| − | === Pràctica 1: Variables en Python ===
| |
| − | | |
| − | </code>`<code>python
| |
| − | = Declaració de variables =
| |
| − | nom = "Jordi"
| |
| − | edat = 35
| |
| − | altura = 1.75
| |
| − | es_professor = True
| |
| − | | |
| − | print(f"{nom} té {edat} anys i mesura {altura}m")
| |
| − | </code>`<code>
| |
| − | | |
| − | === Pràctica 2: Sessions en PHP ===
| |
| − | | |
| − | </code>`<code>php
| |
| − | <?php
| |
| − | session_start();
| |
| − | | |
| − | // Guardar dades a la sessió
| |
| − | $_SESSION['usuari'] = 'alumne01';
| |
| − | $_SESSION['rol'] = 'estudiant';
| |
| − | | |
| − | // Llegir dades de la sessió | |
| − | echo "Benvingut, " . $_SESSION['usuari'];
| |
| − | ?>
| |
| − | </code>`<code>
| |
| − | | |
| − | === Pràctica 3: Formulari HTML ===
| |
| − | | |
| − | </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>``
| |
| − | | |
| − | ---- | |
| − | | |
| − | == 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''
| |
