Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

--- playground:prova [2022/12/14 18:49]
enric_mieza_sanchez
+++ playground:prova [2023/06/30 16:56] (actual)
isaac_gonzalo_rivero
@@ Línia 1: / Línia 1: @@
-====== Cordova ======
+proves vàries
-Apache Cordova (inicialment PhoneGap) son unes llibreries per al desenvolupament d'apps mòbils utilitzant [[JavaScript]], [[HTML]] i [[CSS]]. La principal avantatge és que permet utilitzar un llenguatge web genèric (JS) i compilar l'app per a diverses plataformes diferents, d'entre les que destaquem les majoritàries [[Android]] i [[iOS]].
-El seu funcionament es basa en tenir una aplicació nadiua amb una simple WebView que ocupa tota la pantalla sencera. Implementant codi JavaScript dins la WebView ens permetrà controlar la interfície gràfica. Per accedir a les funcionalitats pròpies del dispositiu mòbil disposarem de certes llibreries (càmera, filesystem, acceleròmetre, etc).
-{{ cordova.png?400 }}
-{{tag> #Dam #DamMp08 #DamMpDual #DawMpDual Android iOS Cordova HTML JavaScript }}
-===== Introducció i requisits =====
-Per poder seguir aquest article se suposa que has de tenir coneixements de [[JavaScript]], [[HTML]] i [[CSS]].
-Si tens coneixements molt bàsics també t'interessaria [[https://www.w3schools.com/js/js_htmldom.asp|repassar els conceptes del DOM o Document Object Model]].
-Abans de començar a treballar amb Cordova caldrà que tinguem instal·lats els entorns de desenvolupament: llegeix [[Java]] i [[Android]] primerament.
-Per instal·lar Cordova necessites un bon plegat d'eines. De forma general necessitaràs:
-  - **Android Studio** que ens facilitarà les eines de l'Android SDK.
-  - **Java 8 JDK** no ens servirà cap altra versió.
-  - **NodeJS** que ens facilitarà el gestor de paquets NPM amb el què podrem instal·lar Cordova
-  - **Gradle** en la darrera versió.
-En cas de que puguis treballar en un Mac, hauràs d'instal·lar Xcode (des de la pròpia AppStore) i activar les CLI (Command Line Interface) Tools. En la versió Xcode 10 (High Sierra) seria:
-  XCode -> Preferences -> Locations -> Command Line Tools
-MacOS: [[https://evothings.com/doc/build/cordova-install-osx.html|Instal·lació de Cordova per a MacOS]].
-Tens algun material per [[https://cacauet.org/wiki/index.php/Android|començar amb Cordova a Cacauet.org]]
-\\
-===== Instal·lació en Ubuntu =====
-  - Primer cal tenir instal·lat **Anrdoid Studio**:<code>$ sudo snap install android-studio --classic</code>
-    - Prova de crear un projecte dins d'Android Studio i llençar-lo sobre una VM Android (emulador) abans de seguir amb el tutorial.
-  - Cal **instal·lar Java 8 JDK, només funcionarà amb aquesta versió** de Java.
-    - Vigila que no tens cap altra versió instal·lada. Si la tens, desinstal·la-la. Comprova si la tens amb (ha de sortir-te openjdk version 1.8):<code>$ java -version</code>
-    - Instal·la Java 8 JDK:<code>$ sudo apt install openjdk-8-jdk</code>
-    - Ajusta la variable d'entorn ''ANDROID_SDK_ROOT'':<code>$ export ANDROID_SDK_ROOT=~/Android/Sdk</code>
-    - Millor que afegeixis aquest export a l'arxiu ''~/.profile'' (afegiu-lo al final del fitxer). Si no, caldrà que facis l'export cada cop que obris una //shell// per treballar amb Cordova.
-  - Necessitarem **instal·lar NodeJS**, no pel servidor web, sinó perquè necessitem el gestor de paquets ''npm'':
-    - Canviem repos per [[https://github.com/nodesource/distributions/blob/master/README.md|descarregar la versió LTS]]:<code>$ curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -</code>
-    - Instal·lar nodejs:<code>$ sudo apt install nodejs</code>
-  - Instal·lar **Cordova**: <code>$ sudo npm install -g cordova</code>
-  - També ens caldrà **Gradle**:
-    - Ajustem [[https://launchpad.net/~cwchien/+archive/ubuntu/gradle|repos ppa]] per tal que s'instal·li la darrera versió:<code>$ sudo add-apt-repository ppa:cwchien/gradle
-$ sudo apt install gradle</code>
-    - Comprova que és una versió recent (7.x durant l'any 2022) amb:<code>$ gradle -v</code>
-\\
-===== Quickstart ======
-La seqüência típica per iniciar un projecte és com s'indica a continuació:
-  - Crear projecte: <code>$ cordova create proj1</code>
-  - Entrar al directori del projecte: <code>$ cd proj1</code>
-  - Afegir plataformes (android/ios/browser): <code>$ cordova platform add android</code>
-  - Compilar per Android: <code>$ cordova build android</code>
-  - Arrencar el projecte a l'emulador: <code>$ cordova run android</code>
-De vegades no arrenca bé l'emulador. Pots obrir-lo des del Android Studio, però llavors el IDE consumeix força recursos, i complica l'execució. Si tanques el projecte (''File -> Close Project'' a Android Studio) pots  **obrir el AVD Manager** des de la pantalla d'inici d'Android Studio a ''Configure -> AVD Manager''.
-També pots provar d'**arrencar l'emulador des de la línia de comandes**, com explica la doc oficial https://developer.android.com/studio/run/emulator-commandline
-  $ emulator -avd <el_meu_emulador>
-Per exemple:
-  $ emulator -avd Pixel_2_API_28
-==== Devices ====
-Per córrer l'aplicació sobre un device real només cal que afegiu ''--device'' a la comanda:
-  $ cordova run android --device
-Abans, però, caldrà que **configureu el vostre dispositiu en mode developer** buscant les dades del dispositiu i clicant 7 cops seguits al nº de compilació. Després **activeu la Depuració USB**.
-\\
-===== Troubleshooting =====
-==== Emulador KVM (Android Studio) ====
-Si no et deixa crear una màquina virtual al Android Studio pq li falten permisos d'execució a KVM:
-  $ sudo chmod 777 /dev/kvm
-==== Variables d'entorn GNU/Linux ====
-Si al llançar el ''run'' ens dona errors en Ubuntu perquè no troba les llibreries (SDK, JDK), executa:
-  export ANDROID_SDK_ROOT=~/Android/Sdk
-El millor és que incloguis aquestes darreres instruccions a l'arxiu ''~/.profile'' del teu //home directory// i així no caldrà picar-les cada cop que vulguis treballar amb Cordova. Si ho fas, per tal de no reiniciar la màquina, pots carregar l'//script// manualment:
-  $ source ~/.profile
-==== Variables d'entorn Windows ====
-Alguna comanda no et funciona, és perquè necessita estar al PATH per poder ser trobada.
-Cerca "variables" amb el cercador de Windows i t'hauria de facilitar accedir a les variables d'entorn. Modifica la variable PATH per afegir el què et calgui, com per exemple Gradle o el Android SDK que sol estar a:
-  \Users\usuari\AppData\Local\Android\Sdk
-Però cerca abans per assegurar-te d'on son exactament les eines.
-==== Altres ====
-Si es queixa de:
-  No usable Android build tools found. Highest 30.x installed version is 30.0.2; minimum version required is 30.0.3
-[[https://stackoverflow.com/questions/70002327/ionic-cordova-android-no-usable-android-build-tools-found-highest-30-x-install|aquest post explica com corregir-ho, simplement seleccionant la versió que necessitem del SDK Manager]]:
-  Android Studio -> Tools -> SDK Manager -> Android SDK -> SDK Tools
-i **activant ''Show package details''**.
-==== Java version ====
-Si tenim el Java 11 no serveix, ha de ser Java 8. Això ho pots saber amb
-  $ java -version
-Si tenim la 11, podem instal·lar en paral·lel la 8 amb:
-  $ sudo apt install openjdk-8-jdk
-I posar la 8 com a versió per defecte amb:
-  $ sudo update-alternatives --config java
-  $ sudo update-alternatives --config javac
-Si es queixa de que no troba JAVA_HOME, l'haurem d'afegir a l'arxiu ''.profile'':
-  export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64/
-Si aquest no fos el //path// adequat de JAVA_HOME us donaria un error. Mireu quin és buscant on està la ruta del compilador java
-  $ ll `which javac`
-  $ ll /etc/alternatives/javac
-==== Gradle ====
-Si es queixa de que li falta //gradle//, l'instal·lem.
-Instal·lar //gradle// per a GNU/Linux:
-  $ sudo add-apt-repository ppa:cwchien/gradle
-  $ sudo apt install gradle
-Instal·lar //gradle// per a Windows:
-  - Descarrega [[https://gradle.org/releases/|la darrera versió de Gradle]]
-  - Descomprimeix Gradle a una carpeta tipus C:\Gradle
-  - Ajusta la variable d'entorn ''PATH'' per tal que inclogui C:\Gradle\bin
-Instal·lar //gradle// per a MacOS: ...coming soon... probablement brew install gradle
-I ja pots tornar a provar el ''cordova run android''
-==== Llicències ====
-Si es queixa de que li falten llicències per acceptar, entra a ''Android Studio -> SDK Manager'' i accepta les llicències pertinents. També ho pots fer per comandes:
-  $ ~/Android/Sdk/tools/bin/sdkmanager --licenses
-==== Apple, ios, macos ====
-Treballant amb Apple podem trobar alguns problemes una mica diferents.
-Les variables d'entorn cal ajustar-les d'aquesta manera (en macos Monterey):
-  export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_311.jdk/Contents/Home/
-  export ANDROID_SDK_ROOT=~/Library/Android/sdk
-També hi ha un [[https://stackoverflow.com/questions/68387270/android-studio-error-installed-build-tools-revision-31-0-0-is-corrupted|problema amb el nom dels executables del compilador DX]]. Cal renombrar o fer un symlink als arxiu ''d8'' i ''lib/d8.jar'' (en la meva instal·lació estan a ''~/Library/Android/sdk/build-tools/32.0.0-rc1'').
-[[https://github.com/apache/cordova-ios/issues/407|A la versió Xcode 10 tenim una issue]] que ens fa afegir un paràmetre una mica incòmode a la línia de comandes:
-  $ cordova build ios --buildFlag='-UseModernBuildSystem=0'
-  $ cordova run ios --buildFlag='-UseModernBuildSystem=0'
-Sembla que a partir de Xcode 11 ja no apareix aquest problema.
-Si falla amb el missatge <code>xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance</code>
-[[https://github.com/nodejs/node-gyp/issues/569|Aquest post explica la solució]]:
-  $ sudo xcode-select -s /Applications/Xcode-Beta.app/Contents/Developer
-\\
-====== Construint una App amb JavaScript ======
-Ara que tenim l'entorn preparat, es tracta de desenvolupar una app com si es tractés d'una aplicació web (com si fos pel //browser//) amb JavaScript. Podem aplicar llibreries típiques com jQuery o AngularJS, i a més disposarem d'algunes mes per poder accedir al //hardware// del mòbil.
-\\
-===== Primera App =====
-<WRAP todo>
-Mira l'article [[Introducció Javascript]] i realitza l'exercici de //login// i registre d'usuaris dins d'una aplicació Cordova.
-</WRAP>
-\\
-===== Afegint jQuery =====
-jQuery ens pot ajudar molt a agilitzar el desenvolupament.
-  - **Instal·lació "a mà"**. Cal incloure els arxius de jQuery al nostre projecte. Ho pots fer de diverses maneres:
-    - Descarregar els arxius de la web oficial http://jquery.com
-    - Utilitzar els repositoris online (CDN). Pots veure com fer-ho en aquest tutorial:
-    - https://www.w3schools.com/jquery/jquery_get_started.asp
-  - Instal·lació amb el **//package// cordova-jquery de NodeJS** que ens ho facilita (permet posar alguna plantilla típica per a apps mòbils).
-    - Està força obsolet, però té alguns //templates// que permeten començar ràpid.
-    - https://www.npmjs.com/package/cordova-jquery
-    - Instal·la-ho a l'arrel del teu projecte Cordova:<code>$ npm install cordova-jquery</code>
-    - Configura el template.
-      * En Linux executa:<code>$ node_modules/cordova-jquery/cordova-jquery</code>
-      * En Windows fes des del CMD:<code>node node_modules/cordova-jquery/cordova-jquery</code>
-  - Mira com queda la plantilla fent de nou:<code>$ cordova run browser</code>
-  - Prova diversos //templates// (per exemple: multipage, accordion, listview). Observa el codi que ens genera per cadascun d'ells, en particular el ''index.html''.
-  - Ens quedarem amb el ''listview'' ja que ens anirà bé com a base per a fer un exercici de //tasklist//.
-    * La [[https://api.jquerymobile.com/listview/|documentació oficial de jQuery movile listview]] ens serà útil per a saber com utilitzar-la.
-<WRAP important>
-Hi ha un petit error a les plantilles. Quan arrenquis l'aplicació mira la consola (CTRL+SHIFT+K) i veuràs un error a la línia 28 del ''index.js''. Elimina aquesta línia ja que no ens cal i ens atura l'execució de la nostra aplicació.
-</WRAP>
-\\
-===== Cordova no vol inlines =====
-Típicament podríem fer una aplicació en JavaScript en una pàgina HTML i podríem posar botons que cridin a funcions del nostre codi amb un //onclick// (el què coneixem per crida //inline//). Doncs bé, Cordova no ens deixa fer //inlines//.
-Forma de solventar-ho: fer els botons més senzills, sense //onclick// (però amb //id//):
-  <button id="boto1">Prem per afegir</button>
-I després, en el nostre ''index.js'', ja li afegim el //onclick// (jQuery version):
-  $('#addButton').click(addElem);
-En aquest exemple, cridaríem a la funció ''addElem()''.
-I un darrer apunt, la crida a aquesta funció no pot anar al principi del document, pq en el //head// encara no existeix el nostre //button//. Tenim 2 solucions:
-  - Posar el tag ''<script src=...'' al final del doc (just després del //button//).
-  - Posar el codi d'inicialització dins la funció onclick del document, perquè s'executi al acabar de carregar (exemple segueix):<sxh javascript>
-$(document).ready( function ()  {
-	// initialize
-	$('#addButton').click(addElem);
-	$('#apiButton').click(callAPI);
-});
-</sxh>
-===== Exercici Tasklist v1 =====
-<WRAP todo>
-Tasklist:
-  - Inicia un projecte Cordova.
-  - Implementa una plantilla amb el [[https://www.npmjs.com/package/cordova-jquery|package NPM cordova-jquery]], tal i com es descriu mes amunt (secció [[#afegint_jquery]]).
-    * Es recomana utilitzar la plantilla ''listView''.
-  - Implementa el **botó d'afegir tasca**. Caldrà que tinguis clar com utilitzar el ''DOM'' amb jQuery:
-    * Afegir elements (el text l'agafem d'un //input form// o bé amb un [[https://developer.mozilla.org/es/docs/Web/API/Window/prompt|prompt]]).
-    * Tingues en compte la [[https://api.jquerymobile.com/listview/|documentació oficial de la jQuery mobile listview]]. En particular mira el mètode ''refresh()'' que ens aplicarà els estils perquè quan insertem un nou element a la listview quedi amb els estils CSS adequats.
-</WRAP>
-\\
-===== Local Storage =====
-''localStorage'' és un objecte //built-in// de [[JavaScript]] dintre dels //browsers// que ens permet emmagatzemar dades persistents en una BD interna del tipus //KEY-VALUE//.
-Les aplicacions web no estaven pensades per emmagatzemar dades, només per ser visualitzades, i en tot cas per interaccionar amb el servidor. Per això aquest recurs va trigar en implementar-se en els navegadors. A més, cal tenir en compte que, per raons de seguretat, l'accés al disc dur en un navegador sempre s'ha limitat molt (JavaScript no té accés al //filesystem// per seguretat de les dades de l'usuari).
-És molt senzill d'utilitzar, al capdavall una DB //key-value// no deixa de ser un diccionari. En principi en tindreu prou amb els mètodes:
-  * localStorage.getItem
-  * localStorage.setItem
-Mira't la [[https://www.w3schools.com/jsref/prop_win_localstorage.asp|doc de W3Schools]] per aprendre a utilitzar-ho.
-<WRAP tip>
-==== Objectes a localStorage ====
-''localStorage'' només emmagatzema //strings//. Si volem posar objectes complexes, com diccionaris o arrays, caldrà utilitzar algun mètode de serialització. Les funcions típiques que s'empren per a això son:
-  - [[https://www.w3schools.com/js/js_json_stringify.asp|JSON.stringify()]] ens transforma l'objecte en un string per poder ser insertat al ''localStorage''.
-  - [[https://www.w3schools.com/js/js_json_parse.asp|JSON.parse()]] ens permet recuperar un string serialitzat i el restitueix com a objecte.
-</WRAP>
-\\
-===== Exercici Tasklist v2 =====
-Aplicarem tot l'exposat fins aquí en el següent exercici:
-<WRAP todo>
-Continua de l'anterior exercici Tasklist v1:
-  - Implementa un **botó Elimina** dins de cada element de la llista que esborri aquell element. Convé fer-ho en la pròpia creació de l'element ''jQuery''.
-    * Per saber més [[https://demos.jquerymobile.com/1.4.3/listview/|sobre jQuery UI listview]]
-  - Implementa un **botó Edita** dins de cada element de la llista que ens porti a una altra pàgina que ens permeti editar la tasca.
-    * Mireu l'exemple inicial on cada element de la llista ens porta a una pàgina. En tenim prou amb tenir dues pàgines: la //home// (on hi ha la ''listview'' i la pàgina //edita//.
-  - Fes la //tasklist// persistent utilitzant el ''localStorage'', tal i com s'explica més amunt.
-</WRAP>
-\\
-===== Utilitzant APIs amb AJAX =====
-Treballar aplicacions en HTML+JS accedir a dades externes és molt còmode utilitzant crides asíncrones amb AJAX.
-Una API web, també conegut com a //web service// és una interfície via web per demanar dades, així que es podria considerar una crida remota, d'aquí que en diguem API, com les llibreries de programació.
-Explorarem la API externa per accedir a dades de www.musicbrainz.org
-Exploreu els següents recursos:
-  - API (respon en XML): https://musicbrainz.org/doc/Development/XML_Web_Service/Version_2
-  - Crides en JSON: https://musicbrainz.org/doc/Development/JSON_Web_Service
-    * Per obtenir les dades en JSON cal que adjunteu el //header// de curl "Accept:application/json"
-  - Per fer //pretty print// d'un JSON va molt bé "empipar-lo" a aquesta comanda:<code>$ curl ... | python3 -m json.tool</code>
-Exemple:
-  $ curl -H 'Accept:application/json'  http://musicbrainz.org/ws/2/artist/5b11f4ce-a62d-471e-81fc-a69a8278c7da | python3 -m json.tool
-==== AJAX amb jQuery ====
-Aquestes mateixes les podem demanar des d'un document/aplicació HTML+JS amb crides asíncrones, el que solem conèixer per AJAX. Utilitzarem [[http://api.jquery.com/jquery.ajax/|AJAX amb jQuery]] que ens ajudarà a simplificar el codi. Els exemples estan a la mateixa documentació, però us poso aquí un d'essencial per fer la crida i que ens retorni un objecte JSON de la API de musicbrainz.org :
-<code javascript>
-$.ajax({
-  method: "GET",
-  url: "https://musicbrainz.org/ws/2/artist?query=queen",
-  dataType: "json",   // necessitem això pq ens retorni un objecte JSON
-}).done(function (msg) {
-  for(let item in msg.artists) {
-    console.log(msg.artists[item]);
-    // aquí caldría fer mes coses, of course...
-    // ...
-  };
-}).fail(function () {
-	alert("ERROR");
-});
-</code>
-Cal tenir en compte que les URLs a les que cridis amb AJAX han de tenir habilitada la capçalera de CORS (Cross-Origin Resource Sharing). Les APIs solen tenir-ho habilitat. Totes les APIs públiques ho tenen activat.
-Pots veure una demo i explicació de com funciona a http://ieti.cat/cors/
-[[https://ahorasomos.izertis.com/solidgear/lidiando-con-el-cors/|Aquí s'explica els orígens de CORS]] força correctament.
-<WRAP important>
-Dins la nostra aplicació cal autoritzar l'accés a les dades externes del domini en qüestió. Si no ho fem, ens apareixerà un error a la consola similar a:
-<WRAP prewrap>
-  Content Security Policy: Els paràmetres de la pàgina han blocat la càrrega d'un recurs a https://musicbrainz.org/ws/2/ («default-src»).
-</WRAP>
-Per tal d'autoritzar la petició, caldrà que a la capçalera META amb la política de seguretat validem la font de dades a l'apartat ''data:'':
-<WRAP prewrap>
-<code html>
-<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.gstatic.com https://code.jquery.com  data: https://musicbrainz.org gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' https://fonts.googleapis.com 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
-</code>
-</WRAP>
-</WRAP>
-==== Public APIs a go-go ====
-<WRAP tip>
-[[https://github.com/public-apis/public-apis|En aquest repositori hi ha un llistat de public APIs]] per poder fer aplicacions amb les seves dades. [[https://api.spaceflightnewsapi.net/v3/documentation#/|Mira't la documentació d'aquesta de space news]].
-Fes-li un cop d'ull i troba el teu //hobby// en una API!
-</WRAP>
-==== Queries a la API de MUSICBRAINZ.COM ====
-Documentació de musicbrainz:
-  * [[https://musicbrainz.org/doc/Development/XML_Web_Service/Version_2|Doc oficial API Musicbrainz]]. Els exemples ens venen en XML.
-  * [[https://musicbrainz.org/doc/Development/JSON_Web_Service|Instruccions per obtenir resultats en format JSON]].
-=== Exemples ===
-Obtenir els resultats (en XML) dels grups amb "queen" al seu nom:
-  $ curl https://musicbrainz.org/ws/2/artist?query=queen
-Per obtenir els resultats en format JSON cal afegir un //header// a la //request// de la query, per exemple:
-  $ curl https://musicbrainz.org/ws/2/artist?query=queen -H "Accept:application/json"
-Si volem mostrar els resultats de forma mes clara en la //shell//, podem utilitzar una eina per indentar correctament:
-  $ curl ...url_query... | python -m json.tool
-\\
-===== Materialize CSS =====
-<WRAP tip>
-MaterializeCSS és un //framework// CSS per crear interfícies atractives i responsive. Segueix aquest tutorial sobre [[Materialize]] per iniciar un nou projecte amb aquesta eina.
-</WRAP>
-<WRAP todo>
-Rock band searcher:
-  - Crea un nou projecte Cordova
-  - Implementa una plantilla amb [[Materialize]].
-  - Accedeix a la API de musicbrainz.org i fes una recerca de grups i de cançons, tal i com s'explica més avall.
-    - Primer prova-ho amb ''curl''
-    - Després implementa-ho en el HTML del projecte Cordova
-  - Mostra els resultats de la cerca en una llista HTML
-</WRAP>
-\\
-===== Plugins =====
-...
-\\
-====== Depuració (debug) ======
-Per depurar el més fàcil és utilitzar al nostre codi missatges amb
-  console.log("missatge...")
-Per poder mostrar aquests missatges dependrà de la plataforma que utilitzem:
-===== Browser =====
-Premem F12 per veure el Inspector de Chrome, i anem a la pestanya "Console". També ens serà útil aquesta eina per poder depurar a nivell gràfic i CSS
-===== Android =====
-Un cop llançada la app, executem:
-  $ ./platforms/android/cordova/log
-Com que surten chorrocientos missatges, és més clar si filtrem només els què ens interessa (tot i que en determinats moments ens pot interessar treure el filtre per veure-ho tot). En aquest cas filtrem amb ''grep'', //case insensitive// (-i), tots els missatges que continguin "console" o "cordova":
-  $ ./platforms/android/cordova/log | grep -i 'console\|cordova'
-Potser la manera més còmoda seria posar-ho tot a la mateixa comanda:
-  $ cordova run android ; ./platforms/android/cordova/log | grep -i 'console\|cordova'
+^ Heading 1      ^ Heading 2       ^ Heading 3          ^
+| Row 1 Col 1    | Row 1 Col 2     | Row 1 Col 3        |
+| Row 2 Col 1    | some colspan (note the double pipe) ||
+| Row 3 Col 1    | Row 3 Col 2     | Row 3 Col 3        |

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina