Territorio, storia, cultura: conoscere le risorse che hai sotto casa con GLOCAL Web-App. Come mettere in moto un progetto con Codeigniter, ventiquattresima puntata

Torna JQuery come attore principale della 24 lezione!

Riassunto moduli sviluppati:

http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/areas

Riassunto articoli

http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/posts

Check-up GLOCAL allo stato dell’ arte

la WEB APP continua a crescere a ritmi sostenuti anche come contenuti

Abbiamo approfittato anche dei problemi di connessione per fare una carrellata generale sull’ applicazione e ci siamo accorti che il progetto dai 40 MB in difetto iniziali è cresciuto nel giro di un mese in maniera vertiginosa, siamo arrivati a oltre 200 MB di materiale

Generare fallimenti a ritmo continuo (ossia cose che non vogliono saperne di stare in piedi anche se poi ci si sforza di farle funzionare)? Fatto!

Niente paura! Se stai generando fallimenti è perché ti stai muovendo bene! Continua a generare altri fallimenti!

A fine febbraio una azienda dopo un esito favorevole del primo colloquio mi congedò dicendomi: mi telefoni martedì prossimo che parliamo di stipendio, dopodichè io telefonai e mi risposero SCUSI MA LEI CHI E? Ok, confesso di non averla presa bene. Anche perché tempo prima il famoso CED di Macerata riuscì a escludermi da un corso ADECCO con fruizione ON-LINE a causa secondo loro di troppe richieste di partecipazione. Per cui recentemente per consolarmi ho deciso di fare richiesta per partecipare alla nuova edizione del corso sul tema del web-design di oltre 100 ore di didattica a distanza sempre organizzati dai “fenomeni”, ma anche questa volta quelli del CED mi hanno liquidato proprio ieri con un SMS dicendo che malgrado l’interesse per il mio profilo al momento non rientravo nell’ adesione a causa dell’ alto numero di richieste. Pazienza! Essere un accumulatore seriale di fallimenti ha anche i suoi vantaggi, per esempio nel primo caso potrei muovermi facendo pervenire dei preventivi più bassi a potenziali PMI interessate a servizi digitali rispetto a quelli famosi del colloquio di fine febbraio e nel secondo potrei muovermi per fare io stesso corsi di formazione magari rastrellando con il web marketing nominativi sul maceratese, magari solo per fare dispettucci dovuti perché il Karma si suppone sia dinamico. Nel frattempo poi mi è capitato un tizio tra i piedi che si approcciato al sottoscritto per i suoi problemi su WP e Elementor con una “abbiamo copiato da un competitor e usiamo la versione base di Elementor” dopodichè di fronte a questo doppio strafalcione o autogoal non c’è bisogno di scrivere il significato delle numerose implicazioni e non si poteva fare altro che allontanarlo con garbo, dichiarando con una menzogna che a causa di un famoso corso CED organizzato da quelli di Macerata non avevo tempo disponibile per risolvere problemi su progetti altrui nati già con cattive premesse! Periodo fantastico di famose sostanze aromatizzate allo zenzero non c’è che dire, ma alla fine sopravvive solo un rubicondo e va bene, chi se ne frega? Vado avanti lo stesso anche con le tacche sulla cintura che parlano di esclusioni. Molte esclusioni, molto onore, non era proprio così ma mica la Champions la vinci al primo colpo eh?!

migliorare la parte di js sul proprio cv

Un nuovo modulo per nuovi sviluppi

Abbiamo messo in piedi per fini didattici (ecco il lato positivo delle esclusioni precedenti, che si trova la motivazione per trovare degli aspetti positivi malgrado tutto) un modulo esterno sempre lagato a GLOCAL nelle sue finalità (è uno spot turistico ma di fatto il tutto è utile per studiare JAVASCRIPT) all’ indirizzo http://umbriawayformazione.altervista.org/uwcode/spot_colle_nu/ .Ovviamente si appoggia ai CSS e come logica è facile capire che ci sono CLASSI ATTIVE di default e CLASSI che invece vengono rimosse. SI intuisce anche che viene usata la tecnologia FLEX nei fogli di stile. Ma come funziona lo script?

const panels = document.querySelectorAll('.panel')

panels.forEach(panel => {
    panel.addEventListener('click', () => {
        removeActiveClasses()
        panel.classList.add('active')
    })
})

function removeActiveClasses() {
    panels.forEach(panel => {
        panel.classList.remove('active')
    })
}

la prima riga dichiara una COSTANTE che attraverso un metodo querySelectorAll va a catturare tutti gli elementi di classe PANEL, dopodiche su questi viene applicata una rotazione con un ciclo forEach che di fatto gli dice di ASCOLTARE e CATTURARE l’evento CLICK dell’ utente per applicare una funzione di rimozione e successivamente addizionarla all’ elemento. Naturalmente nella funzione di rimozione applichiamo il metodo REMOVE in modo proprio da ripulire l’elemento COVER presente di default con la classe ACTIVE per passare il testimone al nuovo elemento cliccato. Più difficile da descrivere che a guardarsi! E per il mobile?

@media (max-width: 480px) {
  .container {
    width: 100vw;
  }

  .panel:nth-of-type(4),
  .panel:nth-of-type(5) {
    display: none;
  }
}

Nel foglio stile bisogna anche scrivere delle istruzioni che tutelano la visualizzazione sul mondo mobile con una media query, dove la visibilità da 480 pixel cambia, nel caso specifico lo script impedisce la visibilità di due elementi (il 4 e il 5) ed estende la vision della cover sul cento per cento di altezza del display. Ovviamente prima della fine del body avremo il nostro aggancio sulla pagina HTML con:

<script src="script.js"></script>

e anche il CSS sarà agganciato sul nostro documento HTML sezione HEAD con:

<link rel="stylesheet" href="style.css" />

Entra in scena JQuery, standing ovation!

GLOCAL aveva un problema (ne ha ancora molti ma adesso ne ha uno in meno), sulla barra di vavigazione che è fissa e inclusa per tutte le viste il tasto di accensione della classe ATTIVA non era facilmente gestibile per i passaggi dinamici tra una pagina e l’altra. Quindi come si è risolto il tutto? Con JQuery che mantiene quello che promette, ossia fa il massimo a livello di funzionalità con il minimo sforzo. Le immagini iniziali coinvolte sono quelle sotto il titolo. Le cose da fare come istruzioni elementari sono essenzialmente due, rimuovi la classe da HOME e assegna la classe al nuovo elemento:

  <script>
    $("#elementi1").removeClass("active");
    $("#elemento2").addClass("active");
  </script>

Questo codice lavora sulla pagina richiamata dal link, per cui la prima cosa che fa è quella di accendere il bottone di posizione sulla barra di navigazione corrispondente! Fatelo santo subito questo JQuery!

Conclusioni

Tra la 23 esima puntata e la successiva che è questa sono successe un sacco di cose, abbiamo anche attivato il protocollo HTTPS oltre che la funzionalità CLOUDEFLARE sul sito che ci ospita (GRATIS ricordiamocelo!). Questo sposta anche il modo di approcciarsi ai link per esempio che fino a questo momento sono nati “distorti” sul http tradizionale. Senza avere le idee chiare rispetto a questa novità che comunque va a migliorare sicurezza e velocità dell’ hosting a costo zero, abbiamo in testa delle cose che dovremmo fare per portare avanti il progetto che non si limita solo alla parte tecnica ma anche a quella dei contenuti e delle prestazioni sportive (grazie alla nuova sezione trekking). Nel frattempo come se non bastasse i problemi di connessione si sono diversificati, se da un lato un nuovo modem dual banda garantisce stabilità e sicurezza per il collegamento alla banda grazie anche a una pwd che può cambiare autonomamente e non più gestita dalla centrale, i dipositivi esterni come Google Mini e ChromeCast non vogliono saperne di vedere la rete, un altro insondabile mistero da risolvere oltre a quelli pratici come http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/bookcat?cat=storia dove si evince a giudicare dalle anomalie sulla lunghezza della pagina che c’è ancora molto da risolvere e implementare! E nel frattempo dovrà anche per forza migliorare l’impegno sul JS e JQ se non altro per fare un dispetto a quelli delle esclusioni mirate menzionati in questa puntata rubiconda, dove il film ripercorso è quello delle ALI DELLA LIBERTA’ e la frase rivolta all’ attore Morgan Freeman é: ma lei si sente riabilitato? Risposte di comodo di certo sono pentito etc etc e per ben due volte uno dei protagonisti si vede negare la libertà ricercata, grazie CED di Macerata in collaborazione con ADECCO per aver valorizzato questo best movie di Frank Darabont

Territorio, storia, cultura: conoscere le risorse che hai sotto casa con GLOCAL Web-App. Come mettere in moto un progetto con Codeigniter, dieciannovesima puntata

Adolfo Leoni (Gualdo Tadino, 13 gennaio 1917 – Massa, 19 ottobre 1970) è stato un ciclista su strada e pistard italiano, professionista tra il 1938 e il 1952. Dotato di ottimo spunto veloce, vinse la Milano-Sanremo nel 1942 e diciassette tappe al Giro d’Italia, oltre una al Tour de France. Da dilettante vinse i campionati del mondo a Copenaghen nel 1937.

Il link del progetto in working progress:
http://umbriawayformazione.altervista.org/ci_project_glocal/ 
   
Portale:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/colleview
   
PhotoGallery statica:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleNoceraUmbra/photos
   
Modulo statico:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryStatic/collephotos
   
Modulo dinamico:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/collephotodynamics
   
Sezione download:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/pdf
   
Modulo Static History:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/table
   
Modulo Dynamic History:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/tableplus

Personaggi:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/men

Riassunto delle puntate precedenti

Alla puntata 18 , indirizzo https://umbriawayinfo.wordpress.com/2021/03/22/territorio-storia-cultura-conoscere-le-risorse-che-hai-sotto-casa-con-glocal-web-app-come-mettere-in-moto-un-progetto-con-codeigniter-dieciottesima-puntata/ , è stata attivata l’area cronologia anche se dal punto di vista grafico non siamo particolarmente entusiasti. Ora diamo seguito a quello che è stato elaborato con la domanda criptica: è l’uomo a fare la storia o viceversa?

Andare a recuperare le idee tecniche dallo storico progetti

All’ indirizzo http://umbriawayformazione.altervista.org/ci_project_seicento/ noi avevamo puntato con il canocchiale della storia sul macrocosmo e in particolare su un seicento allargato. Ebbene nella home è palesemente evidente quello che vogliamo andare a fare ma con delle differenze pratiche e stilistiche

possiamo lavorare come base su qualcosa che era già stato messo in piedi, apportando modifiche

In primo luogo abbiamo verificato che l’integrazione degli stessi dati dentro un nuovo progetto non ha controindicazioni:

ok, possiamo incastrare i dati facendo attenzione al copia e incolla!

LAVORARE SULLA TABLE ORIGINALE

Una volta fatta capito a grandi linee quello che si vuole realizzare in pratica, siamo andati a lavorare sulla tabella di origine del progetto seicento, DUPLICANDOLA solo nella struttura con i campi vuoti e rinominandola, ma non solo. Abbiamo inserito anche un campo VARCHAR per definire il RUOLO svolto dai personaggi, il loro costume di scena pirandelliano, la loro professione. Poi ovviamente abbiamo cambiato anche la QUERY presente nel MODELLO. Qui si sta parlando di storia locale, la fonte presa dal progetto seicento sconfinava invece nel Macrocosmo

I rischi di un approccio copia e incolla

Un approccio di tipo meccanico del tipo PRENDO e RIUTILIZZO, va incontro a delle calamità se non si intuiscono i rischi. Per esempio tutte le risorse esterne che appoggiano la sezione copiata sono diverse rispetto all’ originale e quindi alla fine bisogna valutrare se lasciare i LINK per i CSS e JS ORIGINALI, o se modificare il tutto con i propri. Alla fine per evitare conflittualità abbiamo usato quello che c’era in casa, ma tuttavia il processo non è stato indolore! Per esempio:


A PHP Error was encountered

Severity: Notice

Message: Undefined property: ColleGalleryDynamic::$Collegallery_Mode

Filename: controllers/ColleGalleryDynamic.php

Line Number: 633

o ancora:

Backtrace:

File: /members/uwc/ciuwc_projectglocal/application/controller/ColleGalleryDynamic.php
Line: 433
Function: _error_handler

File: /members/uwc/ciuwc_projectglocal/index.php
Line: 315
Function: require_once

oppure:

Fatal error: Call to a member function get_count6() on null in /members/uwc/ciuwc_projectglocal/app/ColleGalleryDynamic.php on line 231
A PHP Error was encountered

e infine si fa per dire:

Backtrace:
An Error Was Encountered
Unable to load the requested file: mens.php
Tutto facile nel mondo dello sviluppo web! I problemi quando ci sono si risolvono da soli

Vale il discorso già fatto per quella che è l’essenza di un aspirante web developer: è un individuo che a che fare costantemente con il problem solving. Nello specifico gli errori di cui sopra si riferiscono alle più svariate situazioni reali incontrate per mettere in piedi la sezione http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/men, ci sono errori nel modello, nel controller e anche nella vista che magari rimandano a link di riferimento non trascritti regolarmente. Ci sono funzioni copiate maldestramente che hanno lo stesso nome di riferimento, oppure richiami tra Model e Controller che per qualche motivo non hanno un seguito. La casistica è molto ampia, ma alla fine ci sono anche le soddisfazioni

Tutto è bene quel che finisce bene! Facendo e riprovando alla fine anche errori banali vengono corretti!

Anche l’occhio vuole la sua parte

grazie ai CSS possiamo offrire un servizio di confort visivo al visitatore

Poi c’è un lavoro invisibile che non si vede, che è quello legato alle rifiniture, alla stilizzazione, al miglioramento della grafica con i CSS per esempio e anche integrando JS dinamici che possono ravvivare la nuova sezione aforismi appena messa in piedi, frase che di fatto cambia al refresh della pagina. Inoltre sono stati fatti notevoli passi in avanti sulla paginazione, che ora tiene anche il link attivo per segnalare all’ utente in quale pagina di navigazione si trova. Insomma tutto un insieme di piccoli impercettibili miglioramenti, compresa la cornice, che alla fine rendono tutto professionale

le frasi cambiano ad ogni reload

Fenomeni della terra umbra: dopo la tempesta viene il sole

L’umbria sforna santi a manetta (per contrastare tenebre dilaganti?), ma sotto casa ha anche dato la luce a grandi campioni come Leoni Adolfo citato nell’ incipit che di successi sportivi con la bicicletta ne ha collezionati tanti e tutti di grande rilievo. Dopo che la tecnologia esaurisce il suo compito di offrire un servizio, arriva l’utilità dei contenuti. Per esempio mai saputo che qui da noi abbiamo anche una martire spoletina o che Rieti fino a qualche anno fa apparteneva alla regione Umbria, insomma scavando si trovano un sacco di cose interessanti

chi cerca trova!

Conclusioni

All’ indirizzo http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/men abbiamo messo una sezione personaggi che tra l’altro, indagando, ci consente anche di approdare in luoghi ricchi di fascino e di mistero poco distanti dal confine umbro come https://it.wikipedia.org/wiki/Monastero_di_Fonte_Avellana , il lavoro da fare è ben lontano dall’ esaurirsi, per esesmpio bisogna andare anche a recuperare libri tematici che ci aiutano meglio a sviscerare i temi del portale. Quella di tirare un sassolino nello stagno è una idea che sembrava avere un inizio e una fine, ma a giudicare dalla mole di lavoro che ci aspetta, siamo solo ancora in quella fase che negli scacchi viene definita di apertura

Prospettive di crescita del progetto GLOCAL? Infinite

Territorio, storia, cultura: conoscere le risorse che hai sotto casa con GLOCAL Web-App. Come mettere in moto un progetto con Codeigniter, dieciottesima puntata

metafora perfetta per spiegare il framework: una pista unica (la view) per tre model come motore che supportano tre controller/carrozzeria, è la soluzione che abbiamo adottato per estrarre i dati per topic nella tabella cronologia
Il link del progetto in working progress:
http://umbriawayformazione.altervista.org/ci_project_glocal/ 
  
Portale:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/colleview
  
PhotoGallery statica:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleNoceraUmbra/photos
  
Modulo statico:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryStatic/collephotos
  
Modulo dinamico:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/collephotodynamics
  
Sezione download:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/pdf
  
Modulo Static History:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/table
  
Modulo Dynamic History:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/tableplus

All’ indirizzo https://umbriawayinfo.wordpress.com/2021/03/22/territorio-storia-cultura-conoscere-le-risorse-che-hai-sotto-casa-con-glocal-web-app-come-mettere-in-moto-un-progetto-con-codeigniter-dieciassettesima-puntata/ abbiamo completato la cronologia dinamica, ipotizzando che un cavo di grandi dimensioni, possa essere costituito da numerosi fili che confluiscono all’ interno formando massa e volume. Ora lavoriamo sulle idee e sulle rifiniture, visto che abbiamo messo in piedi il meccanismo dell’ estrazione dei singoli fili sezionando la fune

wow, i dati viaggiano veloci come aerei quando devono atterrare e materializzarsi a video

Non a casa si parla di pista di atterraggio, perchè abbiamo una sola vista che raccoglie le esigenze di sei motori ciascuno con le sue caratteristiche che spingono sei tipi di carrozzeria diversi e così da un altoforno caotico di dati possiamo scegliere di estrarre quelli che riguardano i terremoti, piuttosto che i dati che riguardano le dominazioni o il brigantaggio o altro da definirsi.

Quando la storia diventa una matrioska!

Stiamo iniziando a capire che la storia è un guazzabuglio di livelli, personaggi, un marasma di eventi e chi più ne ha più ne metta. C’è il microcosmo con la storia locale e c’è il macrocosmo che impatta in maniera rilevante sulle piccole tragedie umane e così una discesa napoleonica in Italia non può che lasciare dei segni come la scia di una lumaca sul territorio. Potrebbe essere quindi interessante implementare una DINAMICA TECNICA in cui la notizia a livello di bosco che si vede dall’ alto possa esplodere nei dettagli a livello di ALBERO che si tocca per mano: ad esempio il TOPIC BRIGANTAGGIO potrebbe rimandare a una sottotabella che esplode la carriera del nostro Cinicchia leggenda locale. Potrei per esempio lavorare sull’ ID, renderlo cliccabile e mostrare i dettagli all’ occorrenza

LE TABELLE, animali in continuo movimento

Le esigenze possono cambiare durante lo sviluppo per cui quella che era una tabella perfetta di colpo diventa soggetta a tutta una serie di rifiniture, per esempio http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/tableplus ha visto numerose modifiche rispetto alla versione statica, come l’occultamento del campo IMG per esempio o una implementazione di politica di sicurezza legata alla citazione dei campi tabella che NON corrispondono alla realtà, per non aiutare eventuali furbastri della rete fornendo loro volontariamente i nomi dei campi senza sforzo. STIAMO ANCHE VALUTANDO UN CAMPO CSS per assegnare dinamicamente dei colori di sfondo che funzionerebbero da IDENTIFICAZIONE per certi secoli critici come il seicento per esempio. Potremmo in stile attualità contrassegnare i secoli meno cruenti al colore giallo , quelli intermedi all’ arancio e i periodi di sfiga prolungata come l’involuzione del XVII secolo, al ROSSO.

CONCLUSIONI

L’altoforno che cattura tutta la storia è stato messo in piedi anche se avrà ancora bisogno di parecchio sostegno. Ci ha assorbito per diverse ore nello sviluppo ma le cose hanno funzionato alla fine perchè è stata applicata una regola elementare: quella di non fare il passo più lungo della gamba e di procedere lentamente step per step in modo da dipanare ogni ambiguità e di evitare la sommatoria di ulteriore complessità. Certamente da qui in poi il lavoro è ben lontano dall’ esaurirsi, ad esempio potrei dedicarmi anche ad affrontare questa questione dei personaggi storici di rilievo che hanno dall’ alto del loro macrocosmo INFLUENZATO la storia locale o microcosmo. Inoltre l’applicazione è cresciuta così tanto che richiede in termini di prospettiva anche una sezione interna di monitoraggio, in modo da avere traccia di tutto ciò che è stato fatto

Territorio, storia, cultura: conoscere le risorse che hai sotto casa con GLOCAL Web-App. Come mettere in moto un progetto con Codeigniter, dieciassettesima puntata

il debugging che passione!
Il link del progetto in working progress
http://umbriawayformazione.altervista.org/ci_project_glocal/ 
 
Portale:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/colleview
 
PhotoGallery statica:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleNoceraUmbra/photos
 
Modulo statico:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryStatic/collephotos
 
Modulo dinamico:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/collephotodynamics
 
Sezione download:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/pdf
 
Modulo Static History:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/table
 
Modulo Dynamic History:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/tableplus

Riassunto delle puntate precedenti

All’ indirizzo https://umbriawayinfo.wordpress.com/2021/03/21/territorio-storia-cultura-conoscere-le-risorse-che-hai-sotto-casa-con-glocal-web-app-come-mettere-in-moto-un-progetto-con-codeigniter-sedicesima-puntata/ abbiamo fatti i preparativi per passare con la nostra tabella cronologia a una struttura dinamica, ora qui vogliamo concretizzare i preliminari

Lo sviluppo web? Consiste nel risolvere i vari errori che si presenteranno inevitabilmente sulla tua strada

Wolf risolve i problemi

Per trasformare la cronologia abbiamo bisogno di un MODEL che punta a un CONTROLLER che invia i dati a una VISTA, pensare di far funzionare tutto al primo colpo è pura utopia, ci sarà una sintassi sbagliata, una notazione case-sensitive che non funziona, un errore di logica nella query, un puntamento sbagliato e altri svariati fattori che renderanno la tua vita di sviluppatore molto difficile. Che fare per esempio quando compare a video una cosa del tipo:

A Database Error Occurred

Error Number: 1096

No tables used

SELECT *

Filename: models/nome_model

Line Number: 485

Ci sarà senz’ altro un errore di logica nella costruzione della query del modello e puoi risolvere il problema magari andando a vedere come ACTIVE RECORD di Codeigniter gestisce le estrazioni all’ indirizzo https://codeigniter.com/userguide3/database/query_builder.html . Nel caso specifico abbiamo avuto seri problemi con un ORDER BY per esempio

La questione dell’ ordinamento dei dati

risolta anche questa!

è andata anche questa! Non riuscivameno a ordinare i dati perché avendo strutturato il campo data in VARCHAR non si riusciva a mettere ordine alla sequenza progressiva di numero. Pertanto è stato sufficiente convertire il campo in INTERO e come per MAGIA tutto è ritornato al suo posto!

OK hai risolto un’ altra grana e ora che succede, il problem solving è finito?

wow la riga si ripete perché? Abbiamo incontrato questa situazione prima di risolvere l’ordinamento

Ipotizziamo di vedere a video l’immagine di cui sopra dove compare sempre la stessa riga che sta succedendo? Qui siamo sulla buona strada per risolvere tutto, perché di fatto non sono comparsi errori a video e il fatto che ci sia una ripetizione fa subito andare con la mente a quella riga statica che si trova all’ interno del FOREACH e che va sostituita con i DATI DINAMICI estratti dal database. Una volta che tutti i richiami ai campi sono stati materializzati con il famoso ECHO, non ci resta che gioire dei nostri sforzi!

finalmente, ce l’abbiamo fatta! Abbiamo la nostra cronologia dinamica!

La parte tecnica è finita adesso impariamo qualcosa dalla storia

Non avrei mai sospettato di mettere in relazione il sacco di Roma https://it.wikipedia.org/wiki/Sacco_di_Roma_(410) con la storia locale eppure alla fine grazie all’ uso della tecnologia stiamo ricomponendo felicemente un quadro storico che sembra ricco di implicazioni e questo ci consentirà di imparare altre cose in futuro!

CONCLUSIONI

Abbiamo centrato il nostro obiettivo, adesso all’ indirizzo http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/tableplus abbiamo la nostra cronologia dinamica che ci consentirà in futuro di inserire altre articolate funzionalità utili per avere una visione su tutto il quadro generale

Territorio, storia, cultura: conoscere le risorse che hai sotto casa con GLOCAL Web-App. Come mettere in moto un progetto con Codeigniter, tredicesima puntata

seo specialist umbria
Assemblare da soli un progetto facendo il grafico, lo sviluppatore, l’addetto alla comunicazione e anche il cuoco? Si può fare!

Il link del progetto in working progress
http://umbriawayformazione.altervista.org/ci_project_glocal/

PhotoGallery statica:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleNoceraUmbra/photos

Modulo statico:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryStatic/collephotos

Modulo dinamico:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/collephotodynamics

NEWS PORTAL:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/colleview

RIASSUNTO DELLE PUNTATE PRECEDENTI

All’ indirizzo https://umbriawayinfo.wordpress.com/2021/03/17/territorio-storia-cultura-conoscere-le-risorse-che-hai-sotto-casa-con-glocal-web-app-come-mettere-in-moto-un-progetto-con-codeigniter-dodicesima-puntata/ abbiamo fatto delle rifiniture grafiche, siamo andati avanti con lo sviluppo, abbiamo implementato la sezione TAGS per cui la ricerca può avvenire per particolarità legate alle foto e abbiamo anche sistemato la NAVBAR

Parliamo di storia quindi modifichiamo la home page

seo specialist umbria

In una degli articoli precedenti abbiamo affrontato il discorso sui widget, componenti riutilizzabili e personalizzabili e per prova avevamo messo in piedi uno spot pro liste civiche per le primarie con un componente sondaggio. Il codice originale:

<!-- Progress Bars -->
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">
        <span class="glyphicon glyphicon-scale"></span>
        Chi vincerà le primarie a Bugliano Umbra?
      </h3>
    </div>
    <div class="panel-body">
      <div class="progress">
        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100"
        aria-valuemin="0" aria-valuemax="100" style="width:30%">
          30% Lista Civica
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="80"
        aria-valuemin="0" aria-valuemax="100" style="width:25%">
          25% Sinistra
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="45"
        aria-valuemin="0" aria-valuemax="100" style="width:25%">
          25% Destra
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="35"
        aria-valuemin="0" aria-valuemax="100" style="width:20%">
          20% vari
        </div>
      </div>
    </div>
  </div>

trasformiamolo più a tema e in modo serioso in:

  <!-- Progress Bars -->
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">
        <span class="glyphicon glyphicon-scale"></span>
        Chi ha fatto più danni invadendo l'Umbria nel corso dei secoli?
      </h3>
    </div>
    <div class="panel-body">
      <div class="progress">
        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="100"
        aria-valuemin="0" aria-valuemax="100" style="width:70%">
          Longobardi
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="80"
        aria-valuemin="0" aria-valuemax="100" style="width:60%">
          Visigoti
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="45"
        aria-valuemin="0" aria-valuemax="100" style="width:50%">
          Napoleone
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="35"
        aria-valuemin="0" aria-valuemax="100" style="width:40%">
          Truppe Pontificie
        </div>
      </div>
    </div>
  </div>
ok adesso la nostra HOME PORTAL è a posto per fare il sindaco a Bugliano umbra c’è sempre tempo

Il discorso sulla cronologia

Analizziamo il seguente codice:

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  font-family:verdana;
  font-size:14px;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437A16;
}

a:focus {
  border-bottom: 1px solid;
  background: #BAE498;
}

a:hover {
  border-bottom: 1px solid;
  background: #CDFEAA;
}

a:active {
  background: #265301;
  color: #CDFEAA;
}

oppure anche un semplice:

table, th, td {
  border: 1px solid black;
}

o ancora qualcosa tipo:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  font-size:12px;
  font-family:verdana;
}

caption {
text-align:center;
}

th {
  text-align:center;
}

td {
  padding: 4px;
  margin: 4px;
  text-align:left;
}

e infine:

#t01 {
  width: 100%;
  background-color: #f1f1c1;
}

#t01 th {
  text-align:center;
}

#t01 td {
  padding: 4px;
  margin: 4px;
}

La domanda è: che cosa hanno in comune questi CSS? RISPOSTA: che parlano di tabelle e a che ci servono le tabelle?

Come mettere in piedi una cronologia storica, istruzioni per l’uso

web developer umbria
cronologia storica, il cuore del sistema

La risposta alla domanda precedente si vede in queste immagini e ora capiamo anche a che cosa ci servono i fogli stile modellati per stilizzare le tabelle, perchè a seconda di come ci gira possiamo vestire le nostre rappresentazioni grafiche come vogliamo. Ora però la questione è un altra, stiamo costruendo un PROTOTIPO STATICO ma di quali variabili devo tenere conto? Mica esiste solo il microcosmo, esiste anche un macrocosmo e anche una storia che riguarda le zone di prossimità, quindi oltre a gestire date, eventi, concause, note, fonti etc etc mi ritrovo anche acercare delle correlazioni tra la piccola storia e la grande storia senza contare l’influenza avuta dai personaggi a cui sarà da dedicare una sezione a parte presumibilmente. In questa fase siamo ancora nel campo delle idee e la cronologia statica messa in piedi all’ indirizzo http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/table ci serve solo per farci una idea e capire dove focalizzarci sulla cronologia dinamica che dobbiamo ancora costruire

seo specialist umbria

La costruzione della VISTA

Si danno sempre per scontate anche le cose più banali, ma sappiamo come funziona una lavatrice? Funziona e basta! Facile dirla così ma la vista anche per la cronologia storica va montata e assemblata, quindi se vogliamo fare un bel lavoro dobbiamo anche includere il FOOTER:

abbiamo incollato direttamente il codice nella pagina della tabella senza usare l’inclusione nella vista, in questo modo possiamo dare il colore di sfondo senza alterare tutto il resto dell’ applicativo

CONSLUSIONI

Con http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/table abbiamo introdotto il problema della cronologia storica e con essa anche quello che di ulteriore si potrebbe fare (una sezione personaggi?)…in ogni caso tutto ciò ricorda una famosa canzoncina di Sergio Indrigo:

Le cose d'ogni giorno
Raccontano segreti
A chi le sa guardare
Ed ascoltare
Per fare un tavolo ci vuole il legno
Per fare il legno ci vuole l'albero
Per fare l'albero ci vuole il seme
Per fare il seme ci vuole il frutto
Per fare il frutto ci vuole il fiore
Ci vuole un fiore, ci vuole un fiore
Per fare un tavolo ci vuole un fiore
Per fare un tavolo ci vuole il legno
Per fare il legno ci vuole l'albero
Per fare l'albero ci vuole il seme
Per fare il seme ci vuole il frutto
Per fare il frutto ci vuole il fiore
Ci vuole un fiore, ci vuole un fiore
Per fare un tavolo ci vuole un fiore
Per fare un fiore ci vuole un ramo
Per fare il ramo ci vuole l'albero
Per fare l'albero ci vuole il bosco
Per fare il bosco ci vuole il monte
Per fare il monte ci vuol la terra
Per far la… 

ecco parafrasando la canzoncina potremmo dire che per fare un PORTALE serve dibattersi su più fronti diversi (grafica, programmazione, comunicazione)