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:
−
= Prova de taula MQTT =
+
= Prova del Visualitzador Markdown Web 🌐 =
  
−
Els tipus de missatges i codis de control que es trameten al protocol MQTT són els següents:
+
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'', <s>ratllat</s> i '''''INLINE''CODE''0'''''.
 +
 
 +
També pots combinar-los: '''''negreta i cursiva''''' o '''''negreta amb cursiva'''''.
 +
 
 +
=== Codi de programació 💻 ===
 +
 
 +
==== 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 ====
 +
 
 +
 
 +
const factorial = (n) => {
 +
    return n <= 1 ? 1 : n * factorial(n - 1);
 +
};
 +
 +
console.log(factorial(5)); // 120
 +
 
 +
 
 +
==== HTML/CSS ====
 +
 
 +
 
 +
<div class="container">
 +
    <h1 style="color: blue;">Hola món!</h1>
 +
    <p>Aquest és un exemple d'HTML.</p>
 +
</div>
 +
 
 +
 
 +
----
 +
 
 +
== Taules 📊 ==
 +
 
 +
=== Comparativa de tecnologies ===
 +
 
 +
 
 +
{| class="wikitable" style="margin:auto"
 +
! 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 ===
 +
 
 +
 
 +
{| class="wikitable" style="margin:auto"
 +
! Símbol !! Nom !! Codi HTML !! Ús
 +
|-
 +
| α || Alfa || '''''INLINE''CODE''1''''' || Matemàtiques
 +
|-
 +
| β || Beta || '''''INLINE''CODE''2''''' || Estadística
 +
|-
 +
| π || Pi || '''''INLINE''CODE''3''''' || Geometria
 +
|-
 +
| Σ || Suma || '''''INLINE''CODE''4''''' || 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
 +
 
 +
__
 +
 
 +
----
 +
 
 +
== 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 '''''INLINE''CODE''5''''' com aquest:
 +
 
 +
* La funció '''''INLINE''CODE''6''''' en Python mostra text
 +
* L'element '''''INLINE''CODE''7''''' en HTML és un contenidor
 +
* La propietat '''''INLINE''CODE''8''''' en CSS crea layouts flexibles
 +
 
 +
----
 +
 
 +
== Exemples d'ús en educació 🎓 ==
 +
 
 +
=== Pràctica 1: Variables en 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
 +
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 ===
 +
 
 +
 
 +
<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 📈 ==
  
  
 
{| class="wikitable" style="margin:auto"
 
{| class="wikitable" style="margin:auto"
−
! Mensaje !! Código
+
! Component !! Tensió !! Corrent !! Potència !! Preu !! Disponibilitat
 +
|-
 +
| ESP32-S3 || 3.3V || 500mA || 1.65W || 8€ || ✅ En stock
 
|-
 
|-
−
| CONNECT || 0x10
+
| Raspberry Pi 4 || 5V || 3A || 15W || 55€ || ⚠️ Limitada
 
|-
 
|-
−
| CONNACK || 0x20
+
| Arduino Nano || 5V || 40mA || 0.2W || 4€ || ✅ En stock
 
|-
 
|-
−
| PUBLISH || 0x30
+
| Sensor DHT22 || 3.3-5V || 1.5mA || 0.0075W || 3€ || ✅ En stock
 
|}
 
|}
  
−
Aquesta taula hauria de convertir-se correctament.
+
----
 +
 
 +
== 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! ✨
 +
 
 +
----
 +
 
 +
''Document generat per a proves del visualitzador Markdown - © 2024''

Revisió del 19:42, 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 INLINECODE0.

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

Codi de programació 💻

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

const factorial = (n) => {
    return n <= 1 ? 1 : n * factorial(n - 1);
};

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


HTML/CSS

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 INLINECODE1 Matemàtiques
β Beta INLINECODE2 Estadística
π Pi INLINECODE3 Geometria
Σ Suma INLINECODE4 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

__

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 INLINECODE5 com aquest:

  • La funció INLINECODE6 en Python mostra text
  • L'element INLINECODE7 en HTML és un contenidor
  • La propietat INLINECODE8 en CSS crea layouts flexibles

Exemples d'ús en educació 🎓

Pràctica 1: Variables en 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
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

<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! ✨

Document generat per a proves del visualitzador Markdown - © 2024

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