|
|
| (Hi ha 24 revisions intermèdies del mateix usuari que no es mostren) |
| Línia 1: |
Línia 1: |
| − | = 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] |
| − | Aplicació web pura (HTML + CSS + JavaScript) per visualitzar fitxers Markdown amb capacitat de copiar el contingut formatat a processadors de text.
| + | * [https://broker.binefa.cat/wordpressTraefik.html Guia completa: Instal·lació de Traefik + WordPress + PHP + MariaDB des de zero] |
| − | | + | * [https://broker.binefa.cat/ Broker MQTT] |
| − | == 🌐 Característiques ==
| + | * [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!] |
| − | * ✅ '''100% client-side''' - No necessita servidor
| + | * [https://snap.berkeley.edu/snap/snap.html#present:Username=jordibinefa&ProjectName=IoT-02_board_segur_EIC Control amb Snap! de la placa IoT-02] |
| − | * ✅ '''Zero dependències locals''' - Usa CDN per Marked.js
| + | * [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) |
| − | * ✅ '''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 <code>index.html</code> amb qualsevol navegador modern:
| |
| − | | |
| − | ``<code>bash
| |
| − | = Des de la terminal =
| |
| − | firefox index.html
| |
| − | = o =
| |
| − | google-chrome index.html
| |
| − | = o =
| |
| − | open index.html # macOS
| |
| − | </code>`<code>
| |
| − | | |
| − | === Opció 2: Servidor local ===
| |
| − | | |
| − | Si vols servir-ho localment:
| |
| − | | |
| − | </code>`<code>bash
| |
| − | = Python 3 =
| |
| − | python -m http.server 8000
| |
| − | | |
| − | = Node.js (si tens http-server instal·lat) =
| |
| − | npx http-server
| |
| − | | |
| − | = PHP =
| |
| − | php -S localhost:8000
| |
| − | </code>`<code>
| |
| − | | |
| − | Després obre: http://localhost:8000
| |
| − | | |
| − | === Opció 3: Publicar online ===
| |
| − | | |
| − | Puja </code>index.html<code> 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:
| |
| − | * '''CDN''': https://cdn.jsdelivr.net/npm/marked/marked.min.js | |
| − | * '''Documentació''': https://marked.js.org/
| |
| − | | |
| − | === Clipboard API ===
| |
| − | API moderna del navegador per copiar al portapapers:
| |
| − | </code>`<code>javascript
| |
| − | await navigator.clipboard.write([clipboardItem]);
| |
| − | </code>`<code>
| |
| − | | |
| − | Amb fallback per navegadors antics:
| |
| − | </code>`<code>javascript
| |
| − | document.execCommand('copy');
| |
| − | </code>`<code>
| |
| − | | |
| − | == 🎨 Format suportat ==
| |
| − | | |
| − | El visualitzador renderitza:
| |
| − | | |
| − | * '''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 ==
| |
| − | | |
| − | === 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ó </code><style><code>:
| |
| − | | |
| − | </code>`<code>css
| |
| − | /'' Colors principals ''/ | |
| − | #3498db → El teu color primari
| |
| − | #2c3e50 → Color del text
| |
| − | #f4f4f4 → Fons del codi | |
| − | </code>`<code>
| |
| − | | |
| − | === Afegir extensions Marked ===
| |
| − | | |
| − | </code>`<code>javascript
| |
| − | marked.setOptions({
| |
| − | breaks: true,
| |
| − | gfm: true,
| |
| − | // Afegeix més opcions aquí
| |
| − | });
| |
| − | </code>`<code>
| |
| − | | |
| − | === Canviar estils inline === | |
| − | | |
| − | Modifica l'objecte </code>styles<code> dins la funció </code>applyInlineStyles()<code>.
| |
| − | | |
| − | == 📦 Versió offline ==
| |
| − | | |
| − | Per fer-la completament offline:
| |
| − | | |
| − | 1. Descarrega Marked.js:
| |
| − | </code>`<code>bash
| |
| − | wget https://cdn.jsdelivr.net/npm/marked/marked.min.js
| |
| − | </code>`<code>
| |
| − | | |
| − | 2. Canvia la línia al HTML:
| |
| − | </code>`<code>html
| |
| − | <!-- De -->
| |
| − | <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
| |
| − | | |
| − | <!-- A -->
| |
| − | <script src="marked.min.js"></script>
| |
| − | </code>``
| |
| − | | |
| − | 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.
| |
