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)

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...