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:
−
= Format d'Espai Inicial per Codi a MediaWiki =
+
= Prova del Visualitzador Markdown Web 🌐 =
  
−
== 🎯 Què és? ==
+
Benvingut al '''visualitzador de Markdown''' basat en web. Aquest document mostra totes les funcionalitats.
  
−
A MediaWiki, qualsevol línia que comença amb '''un espai en blanc''' es mostra com a codi amb format '''''INLINE''CODE''0'''''.
+
== Funcionalitats principals ⚡ ==
  
−
Aquest és el mètode '''més senzill''' i funciona '''sense cap extensió'''.
+
Aquest visualitzador suporta:
  
−
== 📝 Exemple ==
+
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
  
−
=== Codi original (Markdown): ===
+
----
  
−
def hola():
+
== Text formatat 📝 ==
−
    print("Hola món!")
 
  
 +
Pots usar '''negreta''', ''cursiva'', <s>ratllat</s> i '''''INLINE''CODE''0'''''.
  
−
=== Convertit a Wiki (amb espai inicial): ===
+
També pots combinar-los: '''''negreta i cursiva''''' o '''''negreta amb cursiva'''''.
  
−
def hola():
+
=== Codi de programació 💻 ===
−
      print("Hola món!")
 
  
 +
==== Python ====
  
−
'''Nota:''' Cada línia comença amb '''un espai'''.
 
  
−
== ✅ Avantatges ==
+
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"
 +
 
 +
| Tecnologia || Dificultat || Popularitat || Ús recomanat
 +
|}
 +
 
 +
 
 +
{| class="wikitable"
 +
 
 +
| Python || Baixa || ⭐⭐⭐⭐⭐ || Data Science, Backend
 +
 
 +
| JavaScript || Mitjana || ⭐⭐⭐⭐⭐ || Frontend, Full-stack
 +
 
 +
| Rust || Alta || ⭐⭐⭐ || Sistemes, Performance
 +
 
 +
| Go || Baixa || ⭐⭐⭐⭐ || Backend, Microserveis
 +
|}
 +
 
 +
=== Taula de símbols ===
 +
 
 +
{| class="wikitable"
 +
 
 +
| Símbol || Nom || Codi HTML || Ús
 +
|}
 +
 
 +
 
 +
{| class="wikitable"
 +
 
 +
| α || 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
 +
 
 +
----
 +
 
 +
== 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:
 +
 
 +
----
 +
 
 +
----
 +
 
 +
----
 +
 
 +
----
  
−
1. '''No necessita extensions''' - Funciona a qualsevol MediaWiki
+
== Text especial 🎯 ==
−
2. '''Molt senzill''' - Només afegir un espai
 
−
3. '''Manté la indentació''' - Preserva el format del codi
 
−
4. '''Línia buida?''' - Posar només un espai per mantenir-la
 
  
−
== ❌ Desavantatges ==
+
=== Subíndexs i superíndexs ===
  
−
1. '''Sense ressaltat de sintaxi''' - Tot el codi és del mateix color
+
* Fórmula química: H₂O (subíndex)
−
2. '''No especifica llenguatge''' - No es pot diferenciar Python de JavaScript
+
* Potència: 2⁵ = 32 (superíndex)
−
3. '''Menys visual''' - No tan professional com SyntaxHighlight
+
* Equació: E = mc² (relativitat)
  
−
== 🔄 Comparativa ==
+
=== Caràcters especials ===
  
−
=== Amb SyntaxHighlight (necessita extensió): ===
+
* Matemàtiques: ∑, ∫, ∂, ∞, ≈, ≠, ≤, ≥
 +
* Greeks: α, β, γ, δ, ε, θ, λ, μ, π, σ, τ, φ, ψ, ω
 +
* Fletxes: ← → ↑ ↓ ↔ ⇒ ⇐ ⇔
 +
* Símbols: ✓ ✗ ★ ☆ ♠ ♣ ♥ ♦ © ® ™
  
−
<syntaxhighlight lang="python">
+
----
−
def hola():
 
−
    print("Hola món!")
 
−
</syntaxhighlight>
 
  
−
✅ Ressaltat de colors
+
== Blocs de codi inline ==
−
✅ Números de línia opcionals
 
−
❌ Necessita extensió instal·lada
 
  
−
=== Amb espai inicial (sense extensions): ===
+
Quan vols destacar codi dins d'una frase, usa '''''INLINE''CODE''5''''' com aquest:  
  
−
def hola():
+
* La funció '''''INLINE''CODE''6''''' en Python mostra text
−
      print("Hola món!")
+
* L'element '''''INLINE''CODE''7''''' en HTML és un contenidor
 +
* La propietat '''''INLINE''CODE''8''''' en CSS crea layouts flexibles
  
−
✅ Funciona sempre
+
----
−
✅ Molt senzill
 
−
❌ Sense colors
 
  
−
== 📋 Regles importants ==
+
== Exemples d'ús en educació 🎓 ==
  
−
=== 1. Cada línia ha de començar amb un espai ===
+
=== Pràctica 1: Variables en Python ===
  
−
línia 1 de codi
 
−
  línia 2 de codi
 
  
 +
# Declaració de variables
 +
nom = "Jordi"
 +
edat = 35
 +
altura = 1.75
 +
es_professor = True
 +
 +
print(f"{nom} té {edat} anys i mesura {altura}m")
  
−
=== 2. Línies buides també necessiten un espai ===
 
  
−
  primer bloc
+
=== Pràctica 2: Sessions en PHP ===
 +
 
 +
 
 +
  <?php
 +
session_start();
 +
 +
// Guardar dades a la sessió
 +
$_SESSION['usuari'] = 'alumne01';
 +
$_SESSION['rol'] = 'estudiant';
 
   
 
   
−
  segon bloc després de línia buida
+
// Llegir dades de la sessió
 +
echo "Benvingut, " . $_SESSION['usuari'];
 +
?>
  
  
−
=== 3. La indentació original es manté ===
+
=== Pràctica 3: Formulari HTML ===
  
−
def funcio():
 
−
      if True:
 
−
          print("Indentat")
 
  
 +
<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>
  
−
=== 4. Sortir del bloc: línia sense espai ===
 
  
−
codi aquí
+
----
−
  més codi
 
−
Això ja no és codi (no té espai inicial)
 
  
 +
== Taula complexa amb format 📈 ==
  
−
== 🛠️ Com ho fa el convertidor ==
+
{| class="wikitable"
  
−
El convertidor '''''INLINE''CODE''1''''' fa:
+
| Component || Tensió || Corrent || Potència || Preu || Disponibilitat
 +
|}
  
−
1. Detecta blocs de codi: '''''INLINE''CODE''2'''''`'''''INLINE''CODE''3'''''`'''''INLINE''CODE''4'''''
 
−
2. Agafa cada línia del codi
 
−
3. Afegeix un espai al principi de cada línia
 
−
4. Les línies buides es converteixen en un sol espai
 
  
−
=== Exemple de transformació: ===
+
{| class="wikitable"
  
−
'''Entrada (Markdown):'''
+
| ESP32-S3 || 3.3V || 500mA || 1.65W || 8€ || ✅ En stock
  
−
+
| Raspberry Pi 4 || 5V || 3A || 15W || 55€ || ⚠️ Limitada
−
python
+
 
−
def test():
+
| Arduino Nano || 5V || 40mA || 0.2W || 4€ || ✅ En stock
−
    return True
+
 
 +
| 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. 🚀
 +
 
 +
----
  
−
print(test())
+
''Document generat per a proves del visualitzador Markdown - © 2024''
−
``'''''INLINE''CODE''5'''''`'''''INLINE''CODE''6''''' '''''INLINE''CODE''7'''''<syntaxhighlight>'''''INLINE''CODE''8'''''<pre>'''''INLINE''CODE''9'''''<syntaxhighlight>`.
 

Revisió del 19:05, 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

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

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=11351»