Sono il nipote di WOLF, aggiusto i problemi di stile in wordpress

wow

All indirizzo https://umbriawaytarget.wordpress.com/2021/02/10/wordpress-e-i-custom-fields-al-top/ e anche https://umbriawaytarget.wordpress.com/2021/02/08/wordpress-e-linedito-tema-capablanca-minimalista-evoluzioni-come-personalizzare-la-pagina-404/ abbiamo lasciato una squallida questione di stile in sospeso. Come si noterà ci sono in giro sparsi per le pagine di https://www.umbriaway.it/wp/ dei puntini neri da elenco puntato, che misteriosamente sono scomparsi grazie all’ intervento del nipote di WOLF

miglioramento continuo

La soluzione

Per risolverla abbiamo simulato una condotta nei CSS simile a quella usata nei LINK dove andavano a togliere la sottolineatura impostando a NONE la TEXT-DECORATION. Qui abbiamo lavorato su:

list-style:none;

sia inserendo la regola di stile che annulla il puntino direttamente all’ interno della pagina 404 che è senza l’aggancio al CSS, sia andando a imporre un comportamento generale in tutti gli elementi LI all’ interno del progetto intervenendo nel file style.css ; semplicemente si tende a fare confusione tra l’inibizione del link con l’inibizione grafica degli elenchi puntati! Il lato positivo di questo intervento irrisorio è stato che il nipote di WOLF chiamato da web design umbria non ci ha richiesto fattura

Gli alert e javascript: come gestire i messaggi di avviso per l’utente con l’evento onclick

alert con l’evento onclick


All’ indirizzo http://umbriawayformazione.altervista.org/php_project_dragon/ abbiamo (temporaneamente) la presenza di un messaggio di avviso (un alert, componente di javascript) che compare quando l’utente fa click al centro dell’ immagine per andare a visionare i contenuti. Nello specifico i contenuti sotto la superficie sono in lavorazione e quindi il webmaster ha la necessità di segnalare al visitatore che al momento non sono disponibili con una sorta di messaggio di avviso.

Come avviene tutto ciò?

Possiamo usare due metodi: inserendo direttamente il codice javascript “inline” oppure creando una funzione che poi verrà richiamata in un punto specifico. Partiamo dal secondo:

<script type=”text/javascript”>
function messaggio() {  //funzione che poi verrà richiamata
alert(“stai per inviare i dati”); //messaggio che comparirà nella finestra
}
</script>

e poi sulla parte statica HTML la funzione andrà richiamata in questi termini sulla zona di interesse:

<input name=”invia” type=”submit” onclick=”messaggio()“>

O in alternativa possiamo fare tutto direttamente , per esempio in un link:

<a onclick="alert('manutenzione in corso, scusate il disagio')" href="#"><i class="fa fa-link"></i></a>

BOOTSTRAP Framework: come risolvere il problema della visualizzazione delle immagini sul mondo mobile

Hai fatto una bellissima applicazione che nelle risoluzioni del mondo desktop vedi alla grande ma che una volta acceso il cellulare sul browser ti fanno cadere le braccia e ti DEQUALIFICANO? Niente paura il framework BOOTSTRAP interviene per ridarti PROFESSIONALITA’. Prendiamo un esempio pratico tratta dalla mia nuova WEB APP in gestazione all’ indirizzo http://umbriawayformazione.altervista.org/ci_project_chess/index.php/chess/bg7. Come fare per ridimensionare l’immagine anche sul mobile e strappare un contratto alla NASA come esperto del mondo ICT a 360 gradi? Premesso che la pagina deve avere tutti i doverosi collegamenti al framework la SOLUZIONE 1 proposta é: intervenire all’ interno del TAG IMG attributo SRC:

<img  src="<?php echo base_url();?>directory/img/<?php echo $res->miaimg ?>" alt="fwd">

inserendo la classe specifica:

class="img-responsive" 

Succede per esempio che il problema continua ad insistere allora la SOLUZIONE 2 proposta é: intervieni sul contenitore che ha al suo interno l’immagine ospitata e trasforma un

<div class="container">

in

<div class="container-fluid">

in questo modo tutto ciò che si trova dentro si adatta. Vedi che anche questa non funziona? Ripristina a contenitore normale come classe e giocatela sulla logica delle dimensioni con la SOLUZIONE 3, applica uno stile interno per dire all’ immagine che deve stare al cento per cento delle dimensioni solo all’ interno del contesto in cui la ospita con:

style="width:100%"

vedi che questa volta dopo un batti e ribatti serrato il tutto ha funzionato? Benissimo! Non è stato necessario nemmeno inserire l’altezza in percentuale perché l’immagine si é adattata in proporzione!

L’apertura del secondo fronte come strategia a supporto del web developer, quando la trascendenza non arriva e i problemi di sviluppo continuano a rimanere in sospeso: conquistare la vetta per riorganizzare l’attacco, analisi di un search engine in PHP procedurale!

Negli scacchi la strategia di aprire un secondo fronte nelle operazioni di attacco, quando abbiamo un vantaggio acquisito magari su lato opposto ma non basta per vincere la partita, è una soluzione spesso ok per portare a casa il punto. Quando si inizia con CI Framework non si hanno tutte le risposte e quindi l’unica filosofia che si può perseguire è quella di scomporre i problemi in problemi più piccoli e anche di studiare gli esempi perché far funzionare tutto e subito non è alla portata del NEWBIE!


Quando un problema come nel mio caso attende una risposta trascendente sull’operatore LIKE in MVC che al momento non arriva, tutto quello che si può fare é non perdere l’allenamento con CI e cimentarsi comunque a percorsi indiretti CHE APPARENTEMENTE PORTANO LONTANO DA UNA SOLUZIONE. Ad esempio vediamo come realizzare nel procedurale una soluzione come un search engine che al momento traslato su CI non mi funziona. Un motore di ricerca interno per il mio western Movie è indispensabile ma al momento deve mancarmi qualche info tecnica su come mettere in moto la dinamica di funzionamento. Almeno avere le idee chiare nel prcedurale! Immaginiamo quindi di volere tirare su un search engine che cerca solo info legate alle birre, come fare? Abbiamo la nostra pagina statica come index o piattaforma di lancio o di ricerca dopodiché nel body inseriamo:

<form action="result.php" method="get"> 
<img src="images/logo.png" />
<input type="text" name="user_query" size="80" placeholder="write something to search beer"/> 
<input type="submit" name="search" value="Search Beer Now">
</form>

analizziamo bene i punti critici che sono dopo l’apertura e la conseguente chiusura del tag FORM: action=”result.php” e method=”get” presenti nel form che si preoccupano rispettivamente di inviare i dati compilati dall’ utente a una pagina che farà il lavoro sporco e la specificazione del metodo GET preferito per comodità ma non per specifiche di sicurezza a POST. Il nome del campo testo è molto importante: name=”user_query” così come é molto importante il pulsante identificato come search . Questo FORM spediscei dati alla pagina di elaborazione result.php che recupererà i dati in transito sulla URL con il metodo GET per inserirli in una Query che filtrerà i dati nel database grazie alla clausola WHERE e all’operatore LIKE che fa uso dei caratteri Jolly (%) per supportare alcuni criteri di ricerca. Vediamo quindi come si recuperano intanto i dati:

if(isset($_GET['search'])){
$get_value = $_GET['user_query'];
if($get_value==''){
echo "<center><b>Please go back, and write something in the search box!</b></center>";
exit();
}

Alla riga uno si chiede se l’utente ha spedito qualcosa come dati, se il pacchetto dati ‘search’ è pieno (ISSET) allora setta una variabile di nome get_value che ha come valore la cattura del dato del campo testo! Dopodiché ci sarà una condizione IF – ELSE che dice: se il valore di get_value é vuoto avvisa che devi cercare qualcosa di diverso in wikibeer (nella stringa campo testo) altrimenti procedi con una situazione di TRUE e il codice si sviluppa in questo modo:

$result_query = "select * from tuonometabella where keywords like '%$get_value%'";
$run_result = mysqli_query($conn, $result_query);
if(mysqli_num_rows($run_result)<1){
echo "<center><b>Oops! sorry, nothing was found in the database!</b></center>";
exit();
}

Qui l’interpretazione della stele di Roseta dice che: seleziona tutti i record presenti nella tabella con il nome da te scelto dove il campo keywords ha come valore (grazie all’ operatore LIKE) la stringa digitata dall’ utente, dopodichè questa query in relazione ai parametri di connessione avrà una situazione di tabella vuota e di tabella piena, quindi devo gestire i messaggi all’ utente con un IF-ELSE dove sopra si evince solo la prima istruzione condizionale del FALSE che riporta un messaggio di database VUOTO all’ utente, che continua sotto con la condizione TRUE caratterizzata dal ciclo WHILE che fa tutto il lavoro di scorrimento dei dati:

while($row_result=mysqli_fetch_array($run_result)){
$title=$row_result['title'];
$link=$row_result['link'];
$link1=$row_result['link1'];
$tipo=$row_result['tipo'];
$alcol=$row_result['alcol'];
$desc=$row_result['desc'];
$history=$row_result['history'];
$image=$row_result['image'];
	
echo "<div class='results'>
	
<h2>$site_title</h2>
<img src='images/$image' width='88' height='100' style='float:left;padding-right:4px;margin-right:4px;'/>
<a href='$link' target='_blank'>$link</a>&nbsp;&nbsp;<a href='$link1' target='_blank'>$link1</a>
<p align='justify'>$tipo - $alcol - $desc</p> 
<p align='justify'>$history</p> 
</div>";

}
}

Quindi con due sole pagine, una di spedizione di dati e l’altra di ricezione abbiamo una INTERA APPLICAZIONE FUNZIONANTE! Certo a livello grafico il tutto lascia molto a desiderare, per cui stiamo seriamente pensando a fini didattici di migliorare il restyling della nostra applicazione, soprattutto in termini responsivi, che sarà oggetto del nostro prossimo articolo!

Android Studio, Java e Stanley Kubrick: trova le differenze

web design umbria

All indirizzo https://it.wikipedia.org/wiki/Stanley_Kubrick facciamo conoscenza più da vicino con Stanley Kubrick, non è un caso che sia stato integrato come modello conoscitivo per spiegare chi è Android Studio e cosa fa. Sappiamo che oltre ad essere uno dei registi al top nella storia del cinema, Kubrick ha anche fatto numerosi mestieri, come lo scenografo, lo sceneggiatore, il montatore video etc etc, tutte attività che ruotano intorno al mondo del cinema. L’analogia é chiara: la IDE di Android studio fa tutti questi mestieri per costruire un App nativa con java o kotlin, ossia impacchettata e organizzata così bene il codice sotto ogni punto di vista che gli manca solo la funzionalità di raccogliere ordini vocali per far risparmiare la fatica all’ umano programmatore. La verità è che comunque iniziare a programmare per fare APP NATIVE con JAVA non é facile e conoscere la forma mentis di Android Studio richiede tempo, senza contare i problemi di hardware, vedere per esempio articolo https://umbriawayvendita.wordpress.com/2020/06/03/la-donna-che-programmo-due-volte-prima-in-java-e-poi-in-kotlin-perche-android-studio-e-piu-facile-da-inquadrare-di-un-film-di-hitchcock/ dove si chiarisce che per gestire tutto fluidamente servono almeno 16 di RAM, per esempio. La prima parte di configurazione dell’ ambiente è stata risolta con l’articolo citato da web design umbria (ad esempio i processori AMD inibiscono la funzionalità di studio android di poter disporre di un device virtuale), adesso bisogna sporcarsi le mani e costruire una APP concretamente per vedere che tipo di disagio si richiede al neofita che inizia a familiarizzare con l’ambiente. La prima difficoltà è palese: java che è che si è meritato il primo posto della lista come linguaggio di programmazione, perché sicuro e adatto al modello enterprise aziendale, ha una curva di apprendimento dispendiosa e non é certo javascript come approccio, accomodarsi alle sue grazie non si ottiene con uno schiocco di dita anche perchè è il RE del paradigma OOP. Imparare Java è la prima difficoltà da superare e non è semplicissimo, analizziamo il seguente codice:

package eu.umbriaway.greatkubrick;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

public void esaltami (View v)
{
EditText et= (EditText) findViewById(R.id.kubrick);
Toast.makeText (this, “Great cult movie ” +et.getText().toString(),Toast.LENGTH_LONG).show();
}
}

web design umbriaA un primo impatto è come per Champollion decodificare i geroglifici, si vedono delle cose già abbastanza complicate come un ogetto che viene esteso con una classe su un figlio (AppCompatActivity) che eredità tutti i metodi principali e che ha potere di sovrascriverli con un @ovverride; ci vorrebbe una stele che semplifica il lavoro di criptazione! Forse l’unica cosa che si capisce è che chi ha fatto questa prima applicazione mobile sta lavorando su Kubrick per esaltarne il suo genio creativo con un activity che prende in ingresso una informazione immessa dall’ utente per restituirla tale e quale con qualche modifica in mezzo a un componente TOAST che nel mondo android è un metodo che spedisce a video un messaggio istantaneo. In sostanza il lavoro per mettere in piedi una APP primordiale è la prima volta duplice e ricorda un atleta che fa sollevamento pesi e che carica il suo fardello in due fasi distinte: da un lato cerca di sollevare il tutto da terra prima dell’ ultimo sforzo, poi raccoglie le energie e sincronizza il respiro per sollevarsi in posizione eretta e portare il peso in verticale sopra la testa. web design umbriaAnche noi dobbiamo procedere con questa logica: prima installare quello che serve, poi configurare l’ambiente con SDK e ADV in modo da avere anche un telefonino grafico per vedere come reagisce il nostro codice scritto e infine aprire un progetto, aprire la prima interfaccia grafica che vedrà l’utente appunto inserendo una nuova activity empty, poi collegare anche a questa activity la parte di codice java, il tutto senza dimenticare alcune sfumature: ad esempio quando si crea l’activity bisogna ricordarsi di fleggare in MainActivity presente nel file AndroidManifest.xml che è responsabile dell’ inclusione dei layout poi in fase di visualizzazione. Alla fine la nostra applicazione che cosa deve fare di fatto: saluta all’ inizio e dice qualcosa, poi propone al regista di segnalare il suo film migliore dopodichè la sua risposta sarà catturata in un contenitore variabile e riutilizzata come valore per estrapolare una frase simbolica tramite un COMPONENTE TOAST che ha la particolarità di lanciare un messaggio a video TEMPORANEO che può essere breve o lungo (qui abbiamo utilizzato la seconda cioé il metodo Toast.LENGTH_LONG ), solo per vedere se questa prima finalizzazione andrà in porto l’onere di costruire la prima APP come fa l’atleta con i pesi arrivando sul podio. Quindi quali elementi abbiamo bisogno di materializzare come prima APP? Lasciamo parlare direttamente l’activity_main presente nelle risorse alla voce layout:

<?xml version=”1.0″ encoding=”utf-8″?>

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:orientation=”vertical”
android:padding=”20dp”>

<TextView android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:textSize=”20sp”
android:text=”@string/text”
android:layout_gravity=”center_horizontal” />

<EditText android:layout_width=”150dp”
android:layout_height=”wrap_content”
android:textSize=”20sp”
android:id=”@+id/kubrick”
android:layout_gravity=”center_horizontal” />

<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_gravity=”center_horizontal”
android:onClick=”esaltami”
android:text=”Frasi Mitiche!” />

</LinearLayout>

Abbiamo quindi un LinearLayout, un componente TextView, un altro che riceverà i dati da memorizzare che si chiama EditText e servirà anche un pulsante BUTTON che farà il lavoro sporco utilizzando un evento da intercettare con il metodo onClick che metterà in moto una funzione che si chiama “esaltami” che vista in dettaglio suona come vista prima così:

public void esaltami (View v)
{
EditText et= (EditText) findViewById(R.id.kubrick);
Toast.makeText (this, “Great cult movie ” +et.getText().toString(),Toast.LENGTH_LONG).show();
}

ossia c’è una funzione pubblica che con il metodo VOID che richiama la superclasse View come argomento e che ritorna un valore di ritorno che è composto dalla invocazione della casella di testo et, variabile presente nell’ activity agganciata tramite un ID che va a pescare nella classe R identificativo id la risorsa di nome kubrik che dall’ altra parte , sull’ interfaccia grafica è dichiarata come android:id=”@+id/kubrick”. Ok respira , respira pensò l’atletà! Dopodiché l’istruzione seguente non fa altro che utilizzare il valore memorizzato per formare una stinga composita che viene materializzata in un FUGACE post. Quindi in realtà la difficoltà di tutta questa APP a livello di interazione dinamica sta tutta qua, anche se non è facile districarsi sulla parte di codice presente sul componente LinearLayout che ha come caratteristica quella di disporre gli elementi in orizzontale e in verticale. Per esempio queste due istruzioni iniziali sono molto importanti oltre che indispensabili dove match_parent sta a significare attaccati al parente genitore, ossia adatta la cornice al parent:

android:layout_width=”match_parent”
android:layout_height=”match_parent”

dopodichè possiamo anche dare un orientamento alla nostra cornice esterna con:

android:orientation=”vertical”

e posso anche impostare dei padding per esempio in dp che si usa per i layout

android:padding=”20dp”

mentre per la grandezza del font come testo si usa prevalentemente come unità di misura più performante sp, per esempio nel nostro EditText si legge:

android:textSize=”20sp”

si noti poi la differenza tra le seguenti due espressioni:

android:text=”Frasi Mitiche!” /> e
<string name=”text”>il tuo film migliore?</string>

web design umbriala seconda espressione attinge all’ armadio risorse, in un cassetto chiamato stringhe con un valore identificato come name=”text” mentre la prima crea al volo un testo senza estrapolare nulla da nessuna parte. Inutile dire che a livello di organizzazione di codice bisogna sfruttare la seconda soluzione. Del resto Android Studio dal punto di vista della compattazione del codice è impeccabile, tutto il contenuto di APP ha le sue sezioni specifiche cok repository e bisogna sare che espressioni del tipo setContentView(R.layout.activity_main); di fatto non fanno altro che estrapolare dalla cartella res, identificata tramite la casse R nella sezione layout l’activity che prende il nome di activity_main. Questo perchè abbiamo un luogo dove poter prendere elementi grafici, altri per settare i vestiti con i css, altri per inserire valori stringa e cassetti che si occupano di gestire i layout, insomma un universo complesso che all’ inizio crea molti dubbi del tipo: ma non ho modo più facile per creare APP? In questo ambiente mi sembra di avere a che fare non con una trama di un film di Kubrick ma con tutta la sua produzione contemporaneamente! Senza contare che l’interfaccia grafica di suo è molto complessa e che cliccando inavvertitamente nel posto sbagliato si finirebbe per modificare la stessa IDE con disorientamenti acuti a corredo e perplessità non facilmente risanabili. Android Studio è un pachiderma ma ha il vantaggio di essere molto sicuro e affidabile soprattutto se supportato dalla RAM! Qui di seguito segue la gallery che testimonia gli sforzi progettuali del neofita di fronte la sua iniziazione e il prodotto finale (alla fine è il risultato che conta) dove la centralità dell’ opera di Kubrick non può essere messa in discussione. Naturalemente siamo di fronte a un punto di partenza, qui è stato agganciato un solo evento senza traumi. Ma che succederà quando le complicazioni nel codice aumenteranno di intensità? Non resta che scoprirlo, cimentandosi alla conquista di pesi maggiori da valorizzare!

Questo slideshow richiede JavaScript.