Codeigniter + Bootstrap una accoppiata vincente: parte IV completare le basi del nostro progetto WESTERN MVC!

Ok dopo aver visto nella prima puntata una overview generale su Codeigniter, cercando gli strumenti iniziali per iniziare, individuando i link dove scaricare le nostre cose (vedere https://umbriawaydesign.wordpress.com/) dopo aver bucato la pagina con i dati che é un azione per l’aspirante sviluppatore simile all’ allunaggio terrestre di Amstrong e perfezionato il vestitino della domenica per dare usabilità e interazione all’ utente (vedere puntate due e tre su https://umbriawaydesign.wordpress.com/) completiamo questa prima parte sulle basi di codeigniter inserendo la quarta sezione, quella della responsività, quindi torniamo a fare il mestiere del web designer e non quello del web developer! La parola magica per chi costruisce web application si chiama RESPONSIVITA’, ossia la capacità di vedere la mia APP su tutti i dispositivi dal più piccolo al più grande. Le media query con i loro breack point dovrebbero risolvere ma perché non integrare nei nostri progetti il potentissimo framework grafico BOOTSTRAP che divide le pagine in lunghezza in dodici colonne a prescindere dalle dimensioni? In questo modo siamo a cavallo, tanto per restare in tema western con personaggi diventati icona di genere a Los Angeles come John Wayne e registi come Ford o il nostro Leone in Italia. Per fare un albero ci vuole un fiore e quello ce lo abbiamo, visto che il motore con mysql contiene la nostra magica tabella di prova western (la progettazione seria di un DB è un’ altra cosa, non a caso esistono nelle aziende enterprise figure professionali addette solo a questo mestiere come il DB administrator per esempio) e visto che siamo riusciti a creare un pannello di controllo (che è un dono di CODEIGNITER e del suo paradigma MVC) dove il VOLANTE trasferisce da destra a sinistra la nostra vettura lungo la strada (la parte logica del MODEL invia i dati filtrati al controller che con il metodo LOAD carica le pagine di informazioni dinamiche richieste dall’ utente) che va ad esaurire e risolvere gli input sulla grafica , adesso siamo in grado di abbellire e rendere funzionali le nostre applicazioni integrando il framework bootstrap o con CDN o scaricandolo e poi puntandolo in una cartella locale. L’utilità non è solo quella di risolvere la responsività, ma anche di poter disporre di un coltellino svizzero o set di strumenti che ci semplificano la vita, vedere per esempio il problema del recordset verticale che avevamo nella terza puntata citata agli indirizzi di cui sopra. Per cui come si risolve? Il lay out usato prevede una colonna centrale settata con <div class=”col-sm-8 text-left”> quindi vedendo tre colonne intuitivamente siamo in grado di rispondere anche alla domanda non detta ma quante sono larghe le colonne laterali? Ovviamente due ciascuna visto che il tutto tocca il dodici. Ora esiste un componente che si chiama CARD in bootstrap che abbraccia i nostri dati dentro delle cornici specifiche disegnate con classi predefinite che ci consente di spalmare il nostro set di dati non tutto in verticale rendendo la vita di chiunque utente impossibile a causa dello scrolling, ma in orizzontale. Tuttavia per fare questa operazione dobbiamo pensare di dividere quello spazio da otto magari con due colonne, in modo che i dati non finiscano uno sopra l’altro ma si dividono tra le colonne (nel nostro caso le card si configurano automaticamente tre per colonna) con la dicitura <div class=”col-md-2″ > ovviamente il punto di inizio del trasferimento dati e quello finale devono abbracciare solo il componente card la cui parte statica è facilmente reperibile dal sito ufficiale GETBOOTSTRAP dove siamo andati a scaricare il tutto (oppure no, visto che i CDN ci risolvono alcune questioni). In definitiva abbiamo costruito le basi in pochissimo tempo per una applicazione da rendere completa, perché è chiaro che dovremmo implementare le sessioni, magari costruire un LOGIN, oppure creare altre pagine di approfondimento e magari anche sviluppare il nostro DB in maniera più organica con altre colonne da inserire a sostegno visto che la ripetizione dei registi ad esempio nella nostra tabella è considerata ridondanza. Però la struttura base adesso c’è ed esiste e costituisce una perfetta base di lancio per andare oltre la LUNA!




Web developer Umbria e l’uso delle media query

web developer UmbriaInsieme a web developer Umbria abbiamo provato a risolvere un quesito che é nello specifico: ma come faccio a ESCLUDERE alcuni elementi dalla visualizzazione del mobile? Va bene in primo luogo bisogna ripassare con Faraoni Enrico CEO di Umbriaway Consulting il concetto di risoluzione usando la nostra bibbia del web: la risoluzione indica il grado di qualità di un’immagine. In genere, si usa questo termine riguardo a immagini digitali, ma si può parlare di “risoluzione” anche con riferimento a qualunque fotografia o immagine trasferita o riprodotta su un determinato supporto mediante un processo di stampa, di visualizzazione, o di proiezione. La risoluzione grafica indica la quantità dei punti elementari di stampa (es. inchiostro) presenti in uno spazio lineare (1 centimetro, 1 pollice, etc.); in modo analogo, la risoluzione fotografica indica quella dei punti elementari di luce (es. pixel); in questo modo si misura la densità di un’immagine stampata o da proiettare. Le misure della risoluzione vengono fornite generalmente in dpi (dot per inch = punti per pollice), ppi (pixel per inch = pixel per pollice) e l/mm (linee per millimetro); ad esempio, 280 dpi corrispondono a 11 l/mm e rappresentano un valore medio (10/10) dell’acutezza visiva umana binoculare, alla distanza di 25 cm. Una fotografia 15×10 cm, osservata generalmente alla distanza di lettura (convenzionata a 25 cm), dovrà essere stampata almeno alla risoluzione di 280 dpi; la stessa immagine osservata a 250 cm di distanza, dovrà essere ingrandita 10 volte (10x) e la risoluzione di stampa potrà essere ridotta a 28 dpi….ok ad esempio verrebbe da chiedersi il mio samsung 5 NEO che risoluzione ha? Web developer Umbria poco cortesemente potrebbe rispondere: quelle indicate dal produttore sul manuale di accompagnamento del prodotto ossia 480 x 800 pixel, va bene e invece la risoluzione di un monitore che tela da dipingere mi presenta? Ad esempio 1980 per 1028. Deetto questo anche le nostre creazioni che hanno visualizzazioni diverse al loro interno hanno bisogno di essere gestite per una corretta visualizzazione su dispositivi voluti. Ad esempio all’ indirizzo http://www.farwebdesign.com/bookproject/ abbiamo una bella pagina che vista su dispositivo mobile usando un framework come bootstrap non ci darebbe problemi na che mostrerebbe in testa una serie di link cghe corrispondono alla barra laterale sinistra che non vorremmo vedere, cosa fare in questo caso per ESCLUDERE dalla visualizzazione del mobile quella classe=”list-group”? Bootstrap ci aiuta perché ha all’ interno delle sue soluzioni delle classi che servono a settare la visualizzazione per varie risoluzioni: classe col-lg (large) che porterà tutto di blocco sotto i 1200px di larghezza; classe col-md (medium) che porterà tutto di blocco sotto i 992px di larghezza; classe col-sm (small) che porterà tutto di blocco sotto i 768px di larghezza; classe col-xs (extra small) che non porterà mai la situazione di blocco ma manterrà sempre in linea. All’ indirizzo https://getbootstrap.com/docs/3.3/css/ web developer Umbria fa notare che si possono reperire importanti informazioni al riguardo. Ora il problema legato all’esempio specifico di progetto libri di Umbriaway Consulting é stato risolto traversalmente usando puro css senza le classi. Le interrogazioni multimediali sono utili quando si desidera applicare stili CSS specifici che dipendono dal tipo generale (ad esempio la stampa rispetto alla schermata), caratteristiche specifiche (come la larghezza della visualizzazione del browser) o l’ambiente (ad esempio condizioni ambientali) di un dispositivo. Poiché il numero e la varietà di dispositivi collegati a Internet continuano ad espandersi, le query multimediali stanno diventando sempre più importanti per costruire siti e applicazioni robuste.  Tipi di supporto descrivono la categoria generale di un determinato dispositivo. Sebbene gli utenti siano generalmente in qualche tipo di hardware con uno schermo, ad esempio un computer desktop o uno smartphone, è possibile creare stili speciali che mirano a dispositivi più specializzati, quali stampanti o lettori di schermo audio. Tuttavia, poiché i tipi di supporti sono destinati a descrivere dispositivi in ​​termini molto ampi, solo pochi sono disponibili. Per specificare gli attributi più specifici, è possibile utilizzare un’ampia varietà di funzioni multimediali. Le funzionalità multimediali descrivono le caratteristiche specifiche di un dato agente utente, dispositivo di output o ambiente. Ad esempio, è possibile applicare stili specifici per monitor a schermo intero, dispositivi che utilizzano topi o per condizioni ambientali in condizioni di scarsa illuminazione. Molte caratteristiche del supporto sono caratteristiche di gamma notifica web developer Umbria, il che significa che possono essere prefisso con “min-” o “max-” per esprimere vincoli “condizioni minime” o “condizione massima”. Ad esempio, questo CSS applica stili solo se la visualizzazione del tuo browser è uguale o più stretto di 12450 pixel:

@media (max-width: 12450px) { … }

se si crea una funzionalità di media senza specificare un valore, l’espressione risolve a true se il valore della funzionalità non è zero. Se una funzionalità multimediale non si applica al dispositivo su cui è in esecuzione il browser, le espressioni che coinvolgono la funzionalità multimediale sono sempre false. Ad esempio, la seguente query sarà sempre falsa:

@media only speech and (aspect-ratio: 11/5) { … }

Come al solito web developer Umbria segnala un link interessante per approfondire queste tematiche:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

È possibile comporre complesse query multimediali utilizzando gli operatori logici, compresi quelli non e, e solo. L’operatore e l’operatore vengono utilizzati per combinare insieme più funzionalità multimediali in una singola interrogazione multimediale, che richiede che ciascuna funzionalità a catena venga restituita true affinché la query sia vera. L’operatore non è utilizzato per negare un’intera query multimediale. L’unico operatore è utilizzato per applicare uno stile solo se l’intera query corrisponde, utile per impedire ai browser più vecchi di applicare stili selezionati. Se si utilizzano gli operatori non o solo, è necessario specificare un tipo di supporto esplicito. È inoltre possibile combinare più query multimediali in un elenco separato da virgole; se una delle query multimediali nell’elenco è vera, l’intera istruzione media restituisce true. Questo equivale a un operatore oa un operatore.

AND

La parola chiave e le parole chiavi vengono utilizzate per combinare più funzionalità multimediali insieme a combinare le funzionalità multimediali con i tipi di supporti. Una query multimediale di base, una singola funzionalità multimediale con il tipo implicito di tutti i tipi di supporti, potrebbe essere simile a questa:

@media (min-width: 700px) { … }

Se, tuttavia, si voleva che ciò venisse applicato solo se il display è in orizzontale, è possibile utilizzare un operatore e un operatore per collegare insieme le funzioni multimediali:

@media (min-width: 700px) and (orientation: landscape) { … }

Ora la query media sopra riportata restituirà solo se la visualizzazione è larga 700px o larga e il display è in orizzontale. Se, tuttavia, voleste solo che questo si applicasse se il display in questione era del tipo di tipo TV, è possibile catene queste funzionalità con un tipo di supporto utilizzando un operatore e un operatore:

@media tv and (min-width: 700px) and (orientation: landscape) { …

In realtà qui con web developer Umbria abbiamo visto solo l’operatore logico AND ma l’uso é molto esteso e variegato e web developer Umbria consiglia di visionare articvoli come https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries per visionare nello specifico tutte le varie opzioni. Ritornando al caso dell’ applicativo libri menzionato da Umbriaway Consulting con il suo alias Faraoni Enrico la soluzione per l’esclusione della list group é stata la seguente. Prima abbiamo creato una media query con un range per i criteri di visualizzazione con i valori max e minimo e poi gli abbiamo detto tramite CSS tramite il selettore DISPLAY e la proprietà NONE di NON visualizzare l’elemento all’ interno di quel range ovviamente senza mettere in questo caso l’ID corrispondente sull’ elemento specifico che rimarrà invariato nelle sue UL / LI come struttura html mentre lo stile applicato sulla pagina root sarà:

<style>
@media (min-width: 200px) and (max-width: 520px) {
.list-group{ display:none;}
}
</style>

Una particolarità provando a linkare questo stile su un foglio esterno tramite il tag link e l’attributo src non sio ottiene lo stesso effetto e su questo potrebbero esserci varie soluzioni alla CSI o NCIS: ipotesi uno sbagli qualcosa, ipotesi due non fai la cosa giusta, ipotesi tre non sei stato attento oppure c’è una spiegazione tecnica che in questo caso web developer Umbria non vuole disquisire visto che l’applicativo libri contiene al suo interno anche libri di fantasmi? Ai poster …pardon posteri l’ardua sentenza! Certamente su questo tema delle risoluzioni e degli adattamenti a vari dispositivi c’è una vasta letteratura e il materiale di sicuro in rete non manca! Ricordiamo che un web developer Umbria autonomo e propositivo quando non ha la risposta e la soluzione a un problema se la va a cercare!