bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc


Barra lateral

ASIX Administració de Sistemes Informàtics i Xarxes
Tots els mòduls del cicle
MP01 Implantació de sistemes operatius
Totes les UFs del modul
MP02 Gestió de bases de dades
Totes les UFs del modul
MP03 Programació bàsica
Totes les UFs del modul
MP04 Llenguatges de marques i sistemes de gestió d'informació
Totes les UFs del modul
MP05 Fonaments de maquinari
Totes les UFs del modul
MP06 Administració de sistemes operatius
Totes les UFs del modul
MP07 Planificació i administració de xarxes
Totes les UFs del modul
MP08 Serveis de xarxa i Internet
Totes les UFs del modul
MP09 Implantació d'aplicacions web
Totes les UFs del modul
MP10 Administració de sistemes gestors de bases de dades
Totes les UFs del modul
MP11 Seguretat i alta disponibilitat
Totes les UFs del modul
MP12 Formació i orientació laboral
Totes les UFs del modul
MP13 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP14 Projecte
Totes les UFs del modul
DAM Desenvolupament d’aplicacions multiplataforma
Tots els mòduls del cicle
MP01 Sistemes informàtics
Totes les UFs del modul
MP02 Bases de dades
Totes les UFs del modul
MP03 Programació bàsica
Totes les UFs del modul
MP04 Llenguatges de marques i sistemes de gestió d'informació
Totes les UFs del modul
MP05 Entorns de desenvolupament
Totes les UFs del modul
MP06 Accés a dades
Totes les UFs del modul
MP07 Desenvolupament d’interfícies
Totes les UFs del modul
MP08 Programació multimèdia i dispositius mòbils
Totes les UFs del modul
MP09 Programació de serveis i processos
Totes les UFs del modul
MP10 Sistemes de gestió empresarial
Totes les UFs del modul
MP11 Formació i orientació laboral
Totes les UFs del modul
MP12 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP13 Projecte de síntesi
Totes les UFs del modul
MPDual Mòdul Dual / Projecte
DAW Desenvolupament d’aplicacions web
Tots els mòduls del cicle
MP01 Sistemes informàtics
Totes les UFs del modul
MP02 Bases de dades
Totes les UFs del modul
MP03 Programació
Totes les UFs del modul
MP04 Llenguatge de marques i sistemes de gestió d’informació
Totes les UFs del modul
MP05 Entorns de desenvolupament
Totes les UFs del modul
MP06 Desenvolupament web en entorn client
Totes les UFs del modul
MP07 Desenvolupament web en entorn servidor
Totes les UFs del modul
MP08 Desplegament d'aplicacions web
Totes les UFs del modul
MP09 Disseny d'interfícies web
Totes les UFs del modul
MP10 Formació i Orientació Laboral
Totes les UFs del modul
MP11 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP12 Projecte de síntesi
Totes les UFs del modul
SMX Sistemes Microinformàtics i Xarxes
Tots els mòduls del cicle
MP01 Muntatge i manteniment d’equips
Totes les UFs del modul
MP02 Sistemes Operatius Monolloc
Totes les UFs del modul
MP03 Aplicacions ofimàtiques
Totes les UFs del modul
MP04 Sistemes operatius en xarxa
Totes les UFs del modul
MP05 Xarxes locals
Totes les UFs del modul
MP06 Seguretat informàtica
Totes les UFs del modul
MP07 Serveis de xarxa
Totes les UFs del modul
MP08 Aplicacions Web
Totes les UFs del modul
MP09 Formació i Orientació Laboral
Totes les UFs del modul
MP10 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP11 Anglès
Totes les UFs del modul
MP12 Síntesi
Totes les UFs del modul
CETI Ciberseguretat en Entorns de les Tecnologies de la Informació
Tots els mòduls del cicle
CiberOT Ciberseguretat en Entorns d'Operació
Tots els mòduls del cicle
materialize

Materialize CSS

Materialize CSS és un framework per treballar interfícies en HTML, CSS i JavaScript implementant els criteris Material Design de Google.

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.

Referències:


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 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.


Grid (la quadrícula)

La part més important del Material Design, en el què respecta a la responsiveness, és el que anomenem la Grid.

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.

  1. Llegeix la documentació de la Grid de MaterializeCSS per veure exemples.
  2. Descarrega el starter template de la secció getting started.
  3. 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
  4. Aplica noves icones de material-icons.


Creació projecte Cordova

Si volem treballar en Cordova podem crear un projecte així:

$ cordova create materialapp
$ cd materialapp
$ ls www


Primera plantilla Cordova + Materialize

L'objectiu ara serà crear una aplicació Cordova que utilitzi correctament la plantilla de MaterializeCSS. Necessitem fusionar adequadament els arxius d'ambdós templates.

Descarrega el Starter-Template al final d'aquesta pàgina: https://materializecss.com/getting-started.html

Copia els arxius CSS i JS a les carpetes del projecte cordova (www).

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

Comprova que el visualitzem correctament:

$ cordova platform add browser
$ cordova run browser

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í:

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 name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
  <meta name="color-scheme" content="light dark">

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».

Afegeix també els scripts al final de la pàgina, hauria de quedar algo així:

index.html
  <!--  Scripts  -->
  <script src="cordova.js"></script>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="js/materialize.js"></script>
  <script src="js/init.js"></script>

A init.js li afegirem el codi que també tenim a l'aplicació original de Cordova, hauria de quedar així:

init.js
(function($){
  $(function(){
    $('.sidenav').sidenav();
  }); // end of document ready
})(jQuery); // end of jQuery name space
 
 
document.addEventListener('deviceready', onDeviceReady, false);
 
function onDeviceReady() {
    // Cordova is now initialized. Have fun!
 
    console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
    //document.getElementById('deviceready').classList.add('ready');
}

Arrenquem de nou amb el browser i comprovem que a la consola de Javascript no tenim cap error.

Si us dona un error tipus: «Failed to load resource cordova_plugins.js».

Una solució que apareix a Stackoverflow és instal·lar el package cordova-plugin-device:

$ cordova plugin add cordova-plugin-device

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:

index.html
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

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.

index.html
<script src="js/jquery-2.1.1.min.js"></script>

Segueix totes les passes indicades per disposar d'una app Cordova amb el starter template de MaterializeCSS.

Comprova que funciona correctament:

  1. Revisa que no hi hagi missatges d'error a la consola del browser.
  2. Comprova que el menú lateral funciona quan cliquem el hamburger menu.


Pestanyes d'aplicació (tabs)

El primer que necessitarem per tenir una aplicació mòbil decent serà disposar de diversos TABs o pestanyes o seccions de l'aplicació.

Materialize implementa tabs amb efecte de desplaçament força vistosos.

Elimina els continguts interns del projecte (deixa els encapçalaments, navbar i sidenav) i implementa els tabs «swipeables» amb les 3 pàgines.

Aquest component (els tabs) necessita ser inicialitzat amb les opcions adequades. Per activar-ho hauràs d'aplicar un codi similar a això a init.js (observa les options perquè s'activi l'efecte de swip):

    var options = { "swipeable": true };
    var el = document.getElementById('tabs');
    var instance = M.Tabs.init(el, options);

Com pots veure, Materialize pot utilitzar jQuery però tampoc és imprescindible (a la majoria de plugins).

Si volem utilitzar la versió jQuery sería d'aquesta manera:

    $('.tabs').tabs({"swipeable":true});

I finalment, per aconseguir que cadascuna de les seccions ocupin l'alçada de la pantalla, caldrà afegir aquestes línies al l'arxiu style.css:

style.css
/*
 * ...deixar els continguts que existissin prèviament...
 */
 
/* body fix: perquè ocupi tota la pantalla */
html, body {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-flow: column;
}
 
/*
 * afegir la class tabs-content a cada div de contingut
 * per solucionar el contingut scollable de cada pestanya
 */
.tabs-content {
  height: 100%;
  overflow-y: scroll !important;
}


Obrir una pestanya

Si volem obrir una pestanya des d'una altra, caldrà fer una crida a l'objecte Tabs. Inicialment (a la versió 0.100) aquest objecte només es podia utilitzar amb jQuery, però des de la v1.0.0 s'ha dissenyat per no dependre de jQuery. Algunes funcions continuen podent-se cridar amb jQuery, però concretament aquesta canvi de pestanya el mostrem amb JS normal (sense jQuery).

Mirant la doc de Tabs veurem que per saltar de pestanya farem el següent:

// canviem al tab 2
var tabs = document.getElementById("tabs-swipe-demo");
var tabsInstance = M.Tabs.getInstance(tabs);
tabsInstance.select("tab2");

Si ho volem fer amb jQuery també tenim aquesta alternativa, més concisa:

$('#tabs-swipe-demo').tabs("select", "tab2");


Mira el plugin Sidenav de MaterializeCSS per veure les diverses opcions de la Navbar que ja porta implementada la plantilla de Starter Template.

Implementa un menú més complert amb diversos menus disponibles.


Mes widgets!

Per tenir una aplicació a full ens caldran aquest tipus de recursos, molt ben estilitzats. Fes-li un cop d'ull a tots ells, imprescindibles!

  • Grid i containers per aprendre com administrar els continguts del cos de forma responsive.
  • Collections per fer llistes d'elements.
  • Els imprescindibles Buttons amb icones i efectes xaxis.
  • El famós Floating-Action Button a baix a la dreta, amb desplegable d'accions i tot.
  • Obrir un diàleg modal per demanar accions a l'usuari sense canviar de pàgina o pestanya.

I no deixeu d'investigar la pàgina de materializecss.com , està plena de recursos ben fets.

materialize.txt · Darrera modificació: 2024/02/05 20:15 per enric_mieza_sanchez