bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí:
materialize

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ó

Ambdós costats versió prèvia Revisió prèvia
Següent revisió 		Revisió prèvia
materialize [2022/03/04 18:49]
enrique_mieza_sanchez [Obrir una pestanya] 		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. 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 }} {{ materialize.svg }}
Línia 17: Línia 20:
 ===== Context ===== ===== Context =====
 Tenim bàsicament 2 interessos per treballar amb Materialize CSS: 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. 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   $ 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 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. 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: Comprova que el visualitzem correctament:
Línia 49: Línia 73:
 Copiem els ''tags meta'' que hi ha a la capçalera per ajustar les condicions de seguretat de Cordova. A més, caldrà afegir l'origen de les fonts que necessita el template, en particular ''https://code.jquery.com https://fonts.gstatic.com'' i ''https://fonts.googleapis.com''. Al final, aquesta secció hauria de quedar aproximadament així: Copiem els ''tags meta'' que hi ha a la capçalera per ajustar les condicions de seguretat de Cordova. A més, caldrà afegir l'origen de les fonts que necessita el template, en particular ''https://code.jquery.com https://fonts.gstatic.com'' i ''https://fonts.googleapis.com''. Al final, aquesta secció hauria de quedar aproximadament així:
  
-<sxh html>+<WRAP prewrap> 
 +<file html index.html>
   <meta http-equiv="Content-Security-Policy" content="default-src https://code.jquery.com https://fonts.gstatic.com 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src https://fonts.googleapis.com 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">   <meta http-equiv="Content-Security-Policy" content="default-src https://code.jquery.com https://fonts.gstatic.com 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src https://fonts.googleapis.com 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
   <meta name="format-detection" content="telephone=no">   <meta name="format-detection" content="telephone=no">
Línia 55: Línia 80:
   <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">   <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
   <meta name="color-scheme" content="light dark">   <meta name="color-scheme" content="light dark">
-</sxh>+</file> 
 +</WRAP>
  
 Engega-ho en el browser i assegura't que no hi ha cap missatge d'error a la consola JavaScript i que els continguts es veuen bé. Comprova també que si redueixes la pantalla del navegador o et poses en mode responsive enlloc del menú superior **ens apareix el clàssic "hamburger menu"**. Engega-ho en el browser i assegura't que no hi ha cap missatge d'error a la consola JavaScript i que els continguts es veuen bé. Comprova també que si redueixes la pantalla del navegador o et poses en mode responsive enlloc del menú superior **ens apareix el clàssic "hamburger menu"**.
Línia 61: Línia 87:
 Afegeix també els scripts al final de la pàgina, hauria de quedar algo així: Afegeix també els scripts al final de la pàgina, hauria de quedar algo així:
  
-<sxh html>+<WRAP prewrap> 
 +<file html index.html>
   <!--  Scripts  -->   <!--  Scripts  -->
   <script src="cordova.js"></script>   <script src="cordova.js"></script>
Línia 67: Línia 94:
   <script src="js/materialize.js"></script>   <script src="js/materialize.js"></script>
   <script src="js/init.js"></script>   <script src="js/init.js"></script>
-</sxh>+</file> 
 +</WRAP>
  
 A ''init.js'' li afegirem el codi que també tenim a l'aplicació original de Cordova, hauria de quedar així: A ''init.js'' li afegirem el codi que també tenim a l'aplicació original de Cordova, hauria de quedar així:
  
-<sxh js> +<file javascript init.js>
-// Arxiu init.js + index.js +
 (function($){ (function($){
   $(function(){   $(function(){
- 
     $('.sidenav').sidenav();     $('.sidenav').sidenav();
- 
   }); // end of document ready   }); // end of document ready
 })(jQuery); // end of jQuery name space })(jQuery); // end of jQuery name space
Línia 91: Línia 115:
     //document.getElementById('deviceready').classList.add('ready');     //document.getElementById('deviceready').classList.add('ready');
 } }
-</sxh>+</file> 
 + 
 +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.
  
-Arrenquem de nou amb el browser i comprovem que a la consola de Javascript no tenim cap error.+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 { html, body {
   height: 100vh;   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 { .tabs-content {
   height: 100%;   height: 100%;
materialize.1646419772.txt.gz · Darrera modificació: 2022/03/04 18:49 per enrique_mieza_sanchez

Eines de la pàgina

Excepte on es digui una altra cosa, el contingut d'aquest wiki està subjecte a la llicència següent: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki