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ó

--- materialize [2023/02/01 16:43]
enric_mieza_sanchez [Primera plantilla]
+++ materialize [2024/02/05 20:15] (actual)
enric_mieza_sanchez [Primera plantilla Cordova + Materialize]
@@ Línia 5: / Línia 5: @@
 Estava dirigit a ser "agnòstic" respecte als //frameworks// de JavaScript, però molts dels gadgets i eines que té necessiten de **jQuery** per ser utilitzades amb facilitat. Per tant, el treballarem amb jQuery.
-La web principal és https://materializecss.com
+Referències:
+  * Web principal: https://materializecss.com
+  * [[https://fonts.google.com/icons|Material icons]]
+  * [[https://materializecss.com/getting-started.html|Getting started - templates]].
 {{ materialize.svg }}
@@ Línia 17: / Línia 20: @@
 ===== Context =====
 Tenim bàsicament 2 interessos per treballar amb Materialize CSS:
- * Si estem treballant en una web que volem que sigui responsive.
+  * Si estem treballant en una web que volem que sigui responsive.
- * Si estem treballant en aplicacions mòbils basades en HTML i CSS com [[Cordova]].
+  * Si estem treballant en aplicacions mòbils basades en HTML i CSS com [[Cordova]].
 Aquest article treballa Materialize assumint que estem en un context del //framework// [[Cordova]] , pel què caldria que reviséssiu primer aquest article per seguir aquestes explicacions.
@@ Línia 24: / Línia 27: @@
 \\
-===== Instal·lació =====
+===== Grid (la quadrícula) =====
+La part més important del Material Design, en el què respecta a la //responsiveness//, és el que anomenem la [[https://materializecss.com/grid.html|Grid]].
-Creem el nostre projecte Cordova i mirem els arxius HTML a la carpeta ''www'':
+El referent històric més conegut és Twitter Bootstrap, un dels //frameworks// CSS més exitosos. Va definir l'espai visual en 12 columnes, que és el que ens trobem encara en MaterializeCSS.
+<WRAP todo>
+  - Llegeix la [[https://materializecss.com/grid.html|documentació de la Grid de MaterializeCSS]] per veure exemples.
+  - Descarrega el //starter template// de la secció [[https://materializecss.com/getting-started.html|getting started]].
+  - Modifica'l i crea 6 elements amb icones (els ''div'' amb ''class='col' '') que responguin de la següent manera:
+    * (s)mall screen: 1 sol element
+    * (m)edium screen: 2 elements
+    * (l)arge screen: 4 elements
+  - Aplica noves icones de [[https://fonts.google.com/icons|material-icons]].
+</WRAP>
+\\
+===== Creació projecte Cordova =====
+Si volem treballar en [[Cordova]] podem crear un projecte així:
   $ cordova create materialapp
@@ Línia 34: / Línia 54: @@
 \\
-===== Primera plantilla =====
+===== Primera plantilla Cordova + Materialize =====
+<WRAP info>
+L'objectiu ara serà crear una aplicació Cordova que utilitzi correctament la plantilla de MaterializeCSS. Necessitem fusionar adequadament els arxius d'ambdós //templates//.
+</WRAP>
 Descarrega el Starter-Template al final d'aquesta pàgina: https://materializecss.com/getting-started.html
@@ Línia 41: / Línia 65: @@
 Pel què fa a index.html no el podem copiar directament ja que necessitem barrejar els dos arxius.
-Fes un backup del template index.html de Cordova i llavors sí, copia ''index.html'' del template de MaterializeCSS
+Fes un backup del template ''index.html'' de Cordova i llavors sí, copia ''index.html'' del template de MaterializeCSS
 Comprova que el visualitzem correctament:
@@ Línia 93: / Línia 117: @@
 </file>
-Arrenquem de nou amb el browser i comprovem que a la consola de Javascript no tenim cap error.
+Arrenquem de nou amb el //browser// i comprovem que a la consola de Javascript no tenim cap error.
+<WRAP important>
+Si us dona un error tipus: "Failed to load resource cordova_plugins.js".
+Una [[https://stackoverflow.com/questions/18486362/cordova-plugins-js-is-missing|solució que apareix a Stackoverflow]] és instal·lar el //package// [[https://www.npmjs.com/package/cordova-plugin-device|cordova-plugin-device]]:
+  $ cordova plugin add cordova-plugin-device
+</WRAP>
+<WRAP info>
+Ull, perquè el "include" del codi de jQuery (que hem copiat del //starter template//) l'estem descarregant de la CDN, en concret en aquesta línia:
+<file html index.html>
+<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+</file>
+Si executessim l'app en algun lloc sense cobertura, no funcionaria ja que li faltaria la llibreria de jQuery. Seria més adient descarregar la llibreria a la carpeta ''js'', com les altres, i carregar-la en local.
+<file html index.html>
+<script src="js/jquery-2.1.1.min.js"></script>
+</file>
+</WRAP>
+<WRAP todo>
+Segueix totes les passes indicades per disposar d'una app Cordova amb el //starter template// de MaterializeCSS.
+Comprova que funciona correctament:
+  - Revisa que no hi hagi missatges d'error a la consola del //browser//.
+  - Comprova que el menú lateral funciona quan cliquem el //hamburger menu//.
+</WRAP>
 \\
@@ Línia 127: / Línia 180: @@
  */
+/* body fix: perquè ocupi tota la pantalla */
 html, body {
   height: 100vh;
@@ Línia 135: / Línia 189: @@
 }
+/*
+ * afegir la class tabs-content a cada div de contingut
+ * per solucionar el contingut scollable de cada pestanya
+ */
 .tabs-content {
   height: 100%;

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina