cesa

test WP

Mavo: la nuova via delle webapp - mavo-la-nuova-via-delle-webapp

Mavo per trasformare il tuo HTML statico in applicazioni web reattive.

Mavo è un progetto Open Source sviluppato dal MIT CSAIL per dinamicizzare pagine HTML statiche. Ma anche di più! Consente infatti di convertire semplici pagine HTML in webapp reattive senza scrivere una riga di codice.

Non è quindi un semplice static site generato come Jekyll. E’ invece una soluzione semplice ad un problema complesso, basata sul browser e non su un backend server.

Mavo-home

Le caratteristiche.

Mavo estende la sintassi di HTML per descrivere le applicazioni Web che gestiscono, memorizzano e trasformano i dati.

Memorizza i dati in cloud, in locale o in un percorso assoluto. Tutto questo impostando un attributo HTML. L’attributo HTML mv-storage può infatti accettare diversi parametri, come, ad esempio local  ma anche un URL verso la risorsa Cloud:

 mv-storage="https://www.dropbox.com/s/5fsvey23bi0v8lf/myfile.json?dl=0"

In questo esempio la risorsa cloud è dorpbox.

Modifica i dati direttamente nel sito web, con un’interfaccia intuitiva, auto-generata e personalizzabile. Il concetto di CMS diventa molto più elastico.

Caricamenti multimediali direttamente nella tua pagina tramite drag & drop! Senza una singola riga di codice.

Esegui gli aggiornamenti direttamente nell’HTML, senza bisogno di scrivere JavaScript!

Inoltre Mavo è:

Accessibile. Mavo utilizza una sintassi basata su HTML e può essere utilizzata anche da persone senza esperienza di programmazione.

Programmabile. Le funzionalità di base di Mavo possono essere apprese in pochi minuti e sono sufficienti per creare una vasta gamma di applicazioni che gestiscono, memorizzano e trasformano dati di piccole dimensioni.

Flessibile. Puoi creare semplici Webapp senza complessa programmazione, come se realizzassi una pagina web statica, lavorando con il tuo markup, non contro di esso. 😉

Estendibile. I plugin possono modificare quasi ogni aspetto del suo comportamento e aggiungere nuove e potenti funzionalità.

Libera e Open Source. Mavo nasce per rendere più facile ed aperta la creazione di applicazioni web.

Ma come si usa ?

Per poter utilizzare questo nuovo sistema devi prima scaricarlo o linkare i suoi file JS e CSS nella tua pagina, all’interno del tag head:

< link rel="stylesheet" href="https://get.mavo.io/mavo.css"/ >
< script src="https://get.mavo.io/mavo.js"> 

Quindi definisci la root di Mavo, ovvero l’id univoco della tua applicazione. Questo abilita le funzionalità Mavo in una struttura HTML con l’attributo mv-app.

<div mv-app="mavoTest">
	My first M a v o app!
</div>

e poi… leggiamo un po’ di DOCUMENTAZIONE!

Qualche esempio…

Ecco una lista di Demo usabili:

https://mavo.io/demos/

Per ogni esempio è disponibile il codice di realizzazione della pagina/mini webapp!

I limiti.

Mavo è stato rilasciato pubblicamente il 16 maggio 2017 ed è attualmente in beta.

Quindi è possibile riscontrare qualche bug, qualche implementazione da completare e così via. E’ però possibile giocarci ed eventualmente segnalare le problematiche direttamente agli sviluppatori!

 

Tweet

Adminer, una semplice alternativa a PHPMyAdmin - adminer-vs-phpmyadmin

Adminer, il modo lite per gestire il tuo DB

PhpMyAdmin è la webapp più conosciuta per gestire i Database MySql/MariaDb ma Adminer è un’ottima alternativa!

Con Adminer avrai un’interfaccia utente più user friendly, funzionalità MySQL più semplici, prestazioni più elevate e maggiore sicurezza. Anche se PhpMyAdmin è uno degli strumenti più famosi per la gestione del database MySQL, non è perfetto! Per questo è nato Adminer.

I tre motivi principali (secondo me) per utilizzarlo sono:

E se questo non bastasse, è facile da installare e molto, molto più leggero rispetto a PhpMyAdmin.

Leggi la tabella di confronto fra PhpMyAdmin ed Aminer…

Le caratteristiche

I supporti…

Installiamolo su Linux + Nginx

Installare questa webapp su di un server LEMP è molto semplice. Come prima cosa dobbiamo scaricarlo sulla macchina:

mkdir -p /usr/local/nginx/adminer
cd /usr/local/nginx
wget http://www.adminer.org/latest.php -O /usr/local/nginx/adminer/index.php

e quindi dobbiamo settare i permessi a www,

chown -R www-data:www-data /usr/local/nginx/adminer   #per ubunto o debian

chown -R nginx:nginx /usr/local/nginx/adminer #per RedHat o CentOS

quindi configuriamo Nginx:

server {
    listen localhost:8003;
    server_name  localhost;
   
    root   /usr/local/nginx/adminer;
 
    access_log  /var/log/nginx/localhost.access.log     main buffer=32k;
    error_log   /var/log/nginx/localhost.error.log      error;
 
    location / {
        index index.php;
        try_files $uri $uri/ /index.php?$args;
    }	
   
    include /usr/local/nginx/conf/staticfiles.conf;
    include /usr/local/nginx/conf/php.conf;
}

Se invece usiamo Ubunto + Apache…

Ubuntu inoltre lo mette a disposizione nei repository standard. Questo significa che è possibile installarlo con

sudo apt-get install adminer

Tuttavia, non è raccomandato. La versione di Adminer nel repository è la 3.3.3-1. Essendo un progetto molto attivo, prevede miglioramenti in ogni versione e quindi è buona norma installare la versione più recente.

Si potrà di conseguenza installare anche su Linux + Apache semplicemente seguendo le stesse istruzioni mostrate per Linux + Nginx (senza chiaramente la parte di configurazione dell’application server).

Tweet

BoZoN – il tuo nuovo Fileshare Minimalist Drag & Drop - bozon-fileshare

Un Fileshare facile da installare

BoZoN è una App di Fileshare minimalista ma molto funzionale. Non prevede l’utilizzo di database ma semplicemente l’upload su un server con PHP (LAMP o LEMP).

Infatti, una volta scaricato il file zip da Github o dal sito di riferimento, basta esplodere la cartella compressa nell’application server ed il gioco è fatto! BoZon è pronto per essere usato.

Bozon Fileshare Home Page

… e facile da Usare

Le caratteristiche principali di BoZoN sono quelle di permettere un upload semplice e veloce, di mettere a disposizione una gestione utenti potente ma intuitiva e permettere una personalizzazione completa del tema grafico ( per i più smanettonei 😀  ) .

bozon-fileshare-caratteristiche

Installato il nostro nuovo Fileshare basterà cliccare su “Connect” e registrare l’utente amministratore per poter fare il primo accesso.

Per effettuare l’upload basterà trascinare il file sulla banda scura in alto alla pagina:

fileshare bozon upload

Caricato il file, sarà possibile condividerlo in varie modalità. Cliccando sull’icona del link (  ) si potrà selezionare il magnet link da condividere con chi dovrà vedere/scaricare il file ma si potrà anche impostare una password per accedere al file o la possibilità di rendere inutilizzabile il link dopo il primo download ( … si autodistruggerà )

fileshare-magnet-links

Semplice da personalizzare!

BoZoN è semplice ma potente. Permette di personalizzare o creare nuove tipologie di utenti con pochi click.

L’aggiunta degli utenti, la modifica del loro status o la cancellazione è intuitiva. Si può inoltre modificare la dimensione massima di contenuto per ogni utente ma anche la dimensione massima di upload per file, limitare il numero ed i tipi di file uploadabili.

Non solo! BoZoN viene fornito con un tema di default ma, copiandolo, rinominandolo e modificando i file al suo interno è possibile personalizzare completamente la sua livrea.

Questo permette di allineare il fileshare alla grafica ed ai testi del proprio sito. Inoltre è possibile aggiungere una nuova lingua semplicemente partendo da uno dei file di traduzione presenti a sistema (cartella “locale”).

"Drop your files here or click to select a local file" => "Trascina i tuoi file o clicca per selezionare un file dal tuo PC",
"Error, max filelength:" => "Errore, lunghezza massima :",

Come detto… un fileshare facile da installare, usare e personalizzare!

Tweet

Lighttpd ed un corretto uso dei permalink per WP - lighttpd-e-permalink-wp

Cos’è Lighttpd

Lighttpd (amorevolmente lighty) è un web server sicuro, veloce, fedele agli standard e flessibile. Il suo grande pregio è il piccolo ingombro di memoria (rispetto ad altri web server) e la grande velocità. Questi fattori lo rendono adatto a server con problemi di carico, o per servire contenuti statici separatamente da quelli dinamici.

E’ software libero e Open Source, distribuito sotto licenza BSD.

immagine-lighttpd-server

Problema SEO

Recentemente ho avuto a che fare con un WordPress montato proprio su  Lighttpd e – #ProblemoneSEO  – i permalink venivano indicizzati con l’indicazione della pagina index.php ( es.: miosito.it/index.php/category/… ). Orrore!!!

Per risolvere questo problema di riscrittura ho letto un po’ di info online e, come si può leggere sotto, risolto facilmente con poche istruzioni.

MOD_REWRITE e gestione del permalink

Per prima cosa verificare che il mod_rewrite sia attivo  all’interno della sezione server.modules del /etc/ligghttpd/lighttpd.conf. Occorre solamente  rimuovere il simbolo # davanti a “mod_rewrite”.

server.modules = (
"mod_access",
"mod_alias",
"mod_compress",
"mod_redirect",
"mod_rewrite",
)

Per quanto riguarda i permalink invece andranno aggiunte alcune regole:

#Permalink settings

$HTTP[“host”] =~ “(www.)?” {
url.rewrite = (

# Excludes the admin, includes, wp-content etc.
“^/(wp-admin|wp-includes|wp-content|gallery2)/(.*)” => “$0”,

# Exclude .php files at the root of rewriting
“^/(.*)\.(.+)$” => “$0”,

# Handle permalinks and feeds
“^/(.+)/?$” => “/index.php/$1”

)
}

Questo codice, inserito alla fine del file lighttpd.conf, funziona con tutte le installazioni di WP presenti all’interno dello stesso application server.

 

Tweet

Contentful e PHP, iniziamo a consumare API! - contentful-e-php-iniziamo-a-programmare

Come invocare le API Contentful con PHP

In questa breve guida mostrerò come iniziare a utilizzare PHP per consumare contenuti provenienti da API Contentful.
L’API “Contentful Content Delivery” (CDA) è un’applicazione esposta in sola lettura che consente di recuperare contenuti da Contentful.
Tutti i contenuti, sia JSON che binari, vengono recuperati dal server più vicino alla posizione di un utente utilizzando il CDN globale.
Contenful pubblica SDK per varie lingue, in modo tale da rendere più facile sviluppare nuove applicazioni.

home-page-contentful

Pre-requisiti

Se non conosci ancora i “data model” Contentful, forse è meglio dare una lettura a questo articolo: https://www.contentful.com/developers/docs/concepts/data-model/

Autenticazione

Ad ogni richiesta i client devono fornire un API key (unico per space) ed utilizzato per delimitare le applicazioni e le classi di contenuto.
È possibile creare un token di accesso utilizzando la Web app o il Content Management API.

intro-contentful

Installazione

Il modo più semplice per installare il PHP SDK specifico è quello di utilizzare Composer e eseguire il seguente comando:

php composer.phar install contentful/contentful

Quindi aggiungere l’autoloader di Composer nell’Head del progetto:

require_once 'vendor/autoload.php';

Settare il client Contentful

Installato l’SDK, va inizializzato il client. Serviranno: Api Key e Space ID

$client = new \Contentful\Delivery\Client('<access_token>', '<space_id>');

Consumiamo i contenuti

Contentful separa fisicamente i contenuti inseriti all’interno delle voci create dai file (come immagini e PDF) aggiunti, relazionandoli fra loro. Per maggiori info si rimanda ancora alla guida sui concetti del modello di dati.

Contenuti

Creato il client adesso è possibile iniziare a consumare dati dall’API. Il codice riportato di seguito recupera tutte le voci nel tuo spazio dall’API ma non stampare ancora l’output. Infatti i dati che qui recuperiamo sono molti e vanno ancora filtrati per una corretta visualizzazione:

$entries = $client->getEntries();

Mentre questo codice recupera i dati riferiti ad un singolo ID:
$entryId = '<entry_id>';

$entry = $client->getEntry($entryId);
echo $entry->getproductName();

“Playsam Streamliner Classic Car, Espresso”

Per query più complesse è possibile utilizzare il costruttore di query. L’esempio riportato di seguito fornisce i risultati di un tipo di contenuto specifico (il prodotto) e li elabora per prezzo:

$query = new \Contentful\Delivery\Query;
$query->setContentType('<product_content_type_id>')
->orderBy('fields.price');
$productEntriesByPrice = $client->getEntries($query);

Una volta individuati i dati da pubblicare, vi si può accedere attraverso metodi get:

foreach ($productEntriesByPrice as $product) {
echo $product->getproductName(), PHP_EOL;
}

Whisk Beater
Playsam Streamliner Classic Car, Espresso
Hudson Wall Cup
SoSo Wall Clock

Se una voce contiene un collegamento ad un’attività o un’altra voce, l’SDK lo caricherà automaticamente. L’esempio riportato di seguito mostra il nome del marchio collegato al prodotto:

foreach ($productEntriesByPrice as $product) {
echo $product->getproductName(), ', Brand: ', $product->getBrand()->getcompanyName(), PHP_EOL;
}

Assets

La modalità di ricerca degli assets è molto simile a quella dei dati. Si può infatti ricercare i contenuti in uno specifico space così:

$assets = $client->getAssets();

Per un asset specifico:

$assetId = '<asset_id>';
$asset = $client->getAsset($assetId);

Allo stesso modo, si possono fare query molto complesse:

$query = new \Contentful\Delivery\Query;
$query->orderBy('sys.createdAt');
$assets = $client->getAssets($query);
<p/re>
Una volta individuato il file, si può accedere ai suoi metadata ed alla URL così:
echo $asset->getTitle(), PHP_EOL;
echo $asset->getFile()->getUrl();

//images.contentful.com/71rop70dkqaj/wtrHxeu3zEoEce2MokCSi/e86a375b7ad18c25e4ff55de1eac42fe/quwowooybuqbl6ntboz3.jpg

Utilizzando API IMAGES di Contentful è possibile definire la modalità in cui Contentful stesso servirà l’immagine, ad esempio convertendola in JPEG o ridimensionandola.

$options = new \Contentful\Delivery\ImageOptions;
$options->setFormat('jpg')
->setHeight(100);

echo $asset->getFile()->getUrl($options);

//images.contentful.com/71rop70dkqaj/wtrHxeu3zEoEce2MokCSi/e86a375b7ad18c25e4ff55de1eac42fe

Conclusioni

Oltre ad essere uno strumento potentissimo e potenzialmente gratuito, Contentful.com è un CMS Headless semplicissimo da utilizzare e le cui API sono facili da consumare.

Leggi l’articolo completo in inglese.

Tweet

CSS Picnic e Colors per progettare una nuova Home Page - css-picnic-e-colors

Nuovi contenuti, nuove immagini, nuovi CSS

Il sito manuelcesarini.it ha ormai qualche anno ed ha bisogno di una rinfrescata: nuovi contenuti, nuove immagini, nuovi CSS. Insomma… ha bisogno di mettersi al passo con i tempi.

Per questo ho iniziato la riprogettazione, partendo dai contenuti e dalla Home Page.

La scelta degli stili grafici è ricaduta sui CSS Picnic, di cui avevo già parlato nell’articolo “PICNIC : CSS BELLI E LEGGERI PER I TUOI PROGETTI WEB” : una grafica accattivante e molto leggera.

Un tocco di “Colors”

Ma non ero comunque soddisfatto, qualcosa mancava… Un tocco di “Colors“… Colors sono degli stili molto semplici ma anche molto utili per dare un tocco di colore ed innovazione al proprio sito.

Sono 16 i colori messi a disposizione (più il bianco…). Solo la propria immaginazione può porre limiti al numero di colorazioni implementabili, con molta facilità.

Colors permette di gestire le colorazioni dei testi, del background, dei bordi e delle immagini SVG.

Tutto questo condensato in 647 Bytes minificati e gzipped.

Un progetto di Home Page

mischiando i due CSS descritti sopra, ho provato a progettare una nuova Home Page. Per prima cosa ho realizzato un wireframe su https://wireframe.cc/  – anche se poi non l’ho seguito alla lettera 😀  ( ecco l’esempio: https://wireframe.cc/OaeVlF ) – e poi ho iniziato a scrivere qualche riga di codice per creare il mockup HTML.

Ecco il link per vedere la pagina statica di esempio: https://manuelcesarini.it/

Future implementazioni

Il lavoro è solo iniziato, adesso viene la fase più complessa, il sito va re-ingegnerizzato!!!

Innanzitutto deve essere finita la progettazione grafica ( esempio pagine interne, pagine di contatto, eccetera) e poi va messa mano al codice.

Se l’attuale sito è realizzato con WordPress, il nuovo infatti vedrà tre diverse fonti di dati: API CMS Directus, API Contentful e API WordPress.

Mi saranno di aiuto gli articoli:

API WordPress: cosa sono e come consumarle

Api Directus, consumarle facilmente con PHP, utilizzare la cache e minificare la pagina.

Per gestire le api WP e Directus e per la gestione della cache dei dati provenienti dalle API.

Alla prossima puntata 😀

 

Tweet

API WordPress: cosa sono e come consumarle - api-wordpress

Le API WordPress

WordPress mette a disposizioni degli endpoint API per i tipi di dati di WordPress. Questo permette agli sviluppatori di interagire con i siti in modalità remota inviando e ricevendo oggetti JSON (JavaScript Object Notation).

Tramite le API WordPress è quindi possibile creare, leggere e aggiornare i contenuti WordPress da JavaScript lato client o da applicazioni esterne, anche quelle scritte non in PHP.

Perché usare API WordPress REST

Tramite l’uso delle API WordPress potrebbe diventare un sistema di generazione di contenuti dividendo quello che è il backend “Bacheca WordPress” dal frontend vero e proprio. Questo avvicinerebbe WordPress alle nuove idee di CMS Headless.

Questo permetterebbe di mantenere un sistema semplice di inserimento contenuti per gli utilizzatori “base” ma anche maggiore flessibilità nella generazione di grafiche e WebApp per gli sviluppatori.

Infatti non sarebbe nemmeno più necessario scrivere le applicazioni in PHP: qualsiasi linguaggio di programmazione che può fare le richieste HTTP e JSON ed  interpretarle può interagire con WordPress tramite l’API REST, da Node.js a Java e oltre.

Consumare le API WordPress con PHP

Ecco un semplicissimo esempio di come “catturare” gli articoli presenti in un blog WordPress con poche e semplici istruzioni PHP. Inoltre vedremo come leggere il numero di articoli e la paginazione degli stessi, presenti nella testata della risposta REST:

$url = 'http://manuelcesarini.it/wp-json/wp/v2/posts/';

$content = file_get_contents($url);
$json = json_decode($content, true);

foreach($json as $item) {

    if ($item['status']=='publish') {

        print $item['title']['rendered'];
        print ' - ';
        print $item['slug'];
        print ' 
 ';
        print $item['content']['rendered'];
        print '
';

    }
}

Andiamo adesso a leggere i dati di testata del Web Service che indicano il numero di articoli totali ed il numero di pagine:

$ch      = curl_init();
$headers = [];
curl_setopt($ch, CURLOPT_URL           , $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1   );
curl_setopt($ch, CURLOPT_HEADERFUNCTION,
  function($curl, $header) use(&$headers)
  {
    $len    = strlen($header);
    $header = explode(':', $header, 2);
    if (count($header) < 2)
      return $len;

    $headers[strtolower(trim($header[0]))] = trim($header[1]);
    return $len;
  }
);

$data = curl_exec($ch);
//print_r($headers);

$pag_totali = $headers['x-wp-total'];

$num_pagine = $headers['x-wp-totalpages'];

echo "Articoli totali: $pag_totali  - Pagine: $num_pagine ";

curl_close($ch);

Il risultato? date un occhio a questa pagina: http://manuelcesarini.it/test/test-api-wp.php

Documentazione

Per iniziare ad utilizzare le API WP consiglio di iniziare dalla documentazione base sulle API REST fornita da WordPress stesso:

https://developer.wordpress.org/rest-api/

Qui è possibile trovare tutte le informazioni per effettuare chiamate alle API, sia per “ricevere” che per “scrivere”.

In generale comunque può essere consultata la pagina https://codex.wordpress.org/WordPress_APIs che elenca tutte le tipologie di API fornite da WP.

 

Tweet

Configurare GZIP su NGINX … ed anche su Apache! - configurare-gzip-su-nginx

Cos’è GZIP ?

Partiamo dai fondamentali, Gzip è il metodo di compressione web più conosciuto ed efficace e consente di ridurre la dimensione di risposta ad una richiesta HTTP di circa il 60%.

GZIP viene utilizzato sia su application server Apache – la compressione dipende dalla versione: Apache 1.3 utilizza mod_gzip mentre Apache 2.x utilizza mod_deflate – che su NGINX ( più veloce e snello di Apache ).

Prima di configurare però fai una verifica su questo sito, per vedere “la velocità” del tuo application server: https://gtmetrix.com/

Configurare GZIP su NGINX

Passiamo alla configurazione sul nostro application server! Basterà accedere al file di configurazione del nostro NGINX e abilitare o aggiungere i seguenti campi:

#sudo nano /etc/nginx/nginx.conf
gzip         on;
gzip_disable "MSIE6";

gzip_vary    on;
gzip_types   text/plain text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript image/x-icon image/bmp image/svg+xml;

N.B.: gzip_types indica ciò che uscendo nel flusso HTTP verrà gzippato quindi porre molta attenzione su quanto configurato per questo parametro.

Quindi basterà salvare il nostro file di configurazione e riavviare NGINX ( testando che la configurazione sia corretta )

# nginx -t //per testare la correttezza formale del file di conf.
# service nginx reload

Semplice, veloce ed indolore! 😀

Verifica che la compressione sia effettiva sempre su https://gtmetrix.com/

Per approfondire leggi:

http://nginx.org/en/docs/http/ngx_http_gzip_module.html

Enable gzip compression

 

Uno sguardo veloce ad Apache.

Apache è forse l’Application server più utilizzato ( ma questo non significa che sia il migliore… ) e quindi diamo un rapido sguardo alla configurazione per GZIP.

Per attivare la compressione basterà modificare il file htaccess, aggiungendo i seguenti comandi:

# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x–javascript
AddType x–font/otf .otf
AddType x–font/ttf .ttf
AddType x–font/eot .eot
AddType x–font/woff .woff
AddType image/x–icon .ico
AddType image/png .png

Anche qui la configurazione sembra piuttosto semplice 😉

Tweet

Api Directus, consumarle facilmente con PHP, utilizzare la cache e minificare la pagina. - consumare-api-directus

Consumare le API Directus con PHP in modo facile e veloce

Directus, come accennato in alcuni miei post precedenti, è un CMS Headless che espone API di contenuto. Queste API Directus vengono generate in base alle tabelle definite sullo stesso Content management system .

Directus può essere utilizzato in cloud oppure installandolo direttamente su di un server ed utilizzare Ie sue API è molto semplice.

La struttura delle API Directus è ben definita nella guida presente su getdirectus.com ed è possibile consumarle con alcuni semplici comandi PHP:

$url = 'http://cms.manuelcesarini.it/api/1/tables/site/rows?access_token=TOKENDIACCESSO';

Salviamo l’url dell’API da utilizzare. ?access_token=TOKENDIACCESSO è uno dei metodi più semplice per effettuare il login con il CMS Directus.

$content = file_get_contents($url);
$json = json_decode($content, true);

Con questi due comandi invece andiamo ad “assimilare” i dati dell’API Directus e facciamo la decodifica in formato JSON.

foreach($json['rows'] as $item) {

    if ($item['active']=='1') {

        print $item['site_name'];
        print ' - ';
        print $item['Motto'];
        print ' - ';
        print $item['indirizzo_sito'];
        print '
';

    }
}

Infine con questo ciclo andiamo a stampare a video il contenuto del nostro array, solo per gli item attivi.

‘active’ infatti è un attributo che Directus associa ad ogni item per definirlo attivo ==1 o cancellato == 0

Ed il gioco è fatto! A questo punto potrai decidere di manipolare al meglio i tuoi dati provenienti dalle API Directus!

Una semplice cache per i tuoi dati

Il problema con le API è sempre lo stesso, cercare di evitare di dover effettuare centinaia di chiamate a ripetizione ( per evitare costi eccessivi o sovraccarico del server ).

La soluzione che ho sperimentato è molto semplice e rapida da implementare:

  1. scarichiamo da github “Simple-PHP-Cache
  2. includiamo la libreria e definiamo la nostra cache
        require_once './simple-cache/cache.class.php';
       // $c = new Cache();
        $c = new Cache(array(
      'name'      => 'directus',
      'path'      => 'cache/',
      'extension' => '.cache'
    ));
    
  3. salviamo i dati da mettere in cache, verifichiamo che non sia scaduto il suo tempo o se è attiva
    $c->eraseExpired();  //verifico se la cache è attiva o da cancellare
    if($c->isCached("saves") == false){ 
    
      foreach($json['rows'] as $item) {
    
        if ($item['active']=='1') {
    
            print $item['site_name'];
            print ' - ';
            print $item['Motto'];
            print ' - ';
            print $item['indirizzo_sito'];
            print '
    ';
    
        }
     }
    $c->store('saves', $json['rows'], 25 ); //salvo il mio array in cache
    
    
    } else {
          
        // prendo i dati in base alla key della cache
        $result = $c->retrieve('saves');
        // mostro i dati presenti in cache
        print_r($result);
    }
    

Minifichiamo! Ultimo esercizio!

Adesso abbiamo le nostre API, abbiamo la cache, non ci resta altro da fare che minificare il nostro output.

Una funziona molto semplice permette di “sanitarizzare” il nostro HTML in uscita, eccola qua:

 function sanitize_output($buffer)
{
    $search = array(
        '/\>[^\S ]+/s', //strip whitespaces after tags, except space
        '/[^\S ]+\',
        '<',
        '\\1'
        );

    $blocks = preg_split('/(<\/?pre[^>]*>)/', $buffer, null, PREG_SPLIT_DELIM_CAPTURE);
    $buffer = '';
    foreach($blocks as $i => $block)
    {
      if($i % 4 == 2)
        $buffer .= $block; //break out pre.../pre with \n's
      else 
        $buffer .= preg_replace($search, $replace, $block);
    }

    return $buffer;
}


ob_start("sanitize_output");

Buon divertimento!!!

Tweet

Cloud Ide, programmare direttamente in cloud - cloud-ide

Perché scegliere un Cloud IDE

Programmare con un Cloud Ide è una scelta radicale per un programmatore. In molti infatti sono “affezionati” al proprio ambiente di sviluppo, personalizzato sul proprio PC.

cloud ide home

Perché quindi scegliere di cambiare? Le ragioni in realtà sono molte…

COSTI: se gran parte del business del software si è trasferito su ambienti cloud un motivo ci sarà! La spending review non fa eccezione neppure nel mondo della programmazione.

TEMPI: come sempre legati a doppio filo con i costi! Le piattaforme cloud ide riducono  notevolmente i tempi di installazione quindi meno tempo, meno costi.

QUALCOSA IN PIU‘:  questi servizi sono un po’ più di un editor di codice, offrono una maggiore serie di funzionalità, a prezzi bassi e aumentando la produttività.

OLTRE IL SENSO DEL LUOGO: programma da qualsiasi luogo, non c’è bisogno di essere di fronte al computer per continuare a programmare! L’unico requisito è essere connessi ad internet (con computer o tablet).

COLLABORAZIONE IN TEMPO REALE: uno dei grandi vantaggi dello sviluppo in cloud è che diversi sviluppatori possono lavorare sullo stesso progetto allo stesso tempo, utilizzando gli stessi i servizi e le chat online per comunicare.

MASSIMA PERSONALIZZAZIONE: questi tipi di strumenti possono essere utilizzati per installare le dipendenze utili per i progetti. Così si evita il rischio della programmazione in locale dove alcune dipendenze risultano dannose per gli altri sviluppi web.

Cloud 9 ( c9), un editor potente.

Cloud9 inizialmente era un editor di codice per Node.js . Adesso è  uno strumento cloud ide di sviluppo per progetti web a tutto tondo: Python, PHP, Ruby, C, C ++, JavaScript, ecc.. . E’ utilizzato per creare/gestire/modificare prodotti digitali come WordPress, Drupal, Joomla ma anche per sviluppare con Django, Ruby on Rails, Meteor, Bootstrap, CakePHP, Ember.js, laravel e Symphony.

cloud ide c9 - cloud9

Inoltre è integrato con i maggiori database: Cassandra, CouchDB, MongoDB, MySQL, phpMyAdmin, PostgreSQL, Redis e SQLite.

Le sue caratteristiche principali sono:

Editor di codice: gestisce in contemporanea di più file, prevede l’auto-completamento del codice, utilizza le scorciatoie da tastiera, permette il debug dei programmi, utilizza controllo versioni, ha molte tipologie di personalizzazione, edita immagini, …

Server di prova virtuale: sviluppando per il web è normale utilizzare un server di prova in locale, come XAMPP, WAMPP o Mampp per testare il codice del nostro progetto. Cloud9 ha in sé un server virtuale con il quale lo sviluppatore può testare il risultato visivo e funzionale della programmazione, in tempo reale.

Versionamento: Supporta Git e Mercurial.

 

 

Codenvy, un cloud ide molto flessibile

Codenvy è un ambiente di sviluppo integrato che può essere utilizzato in progetti con linguaggi come Java, JavaScript, Ruby, Python e PHP; con framework di sviluppo come Ruby on Rails; e con servizi di hosting cloud per la distribuzione di prodotti come Heroku, Google App Engine e AWS.

Alcune delle sue caratteristiche includono:

Gestione avanzata plugin: per aumentare le sue funzionalità. Un esempio è il plugin di Eclipse. Si collega al IDE tramite l’autenticazione API. Una volta connesso, è possibile utilizzare Eclipse per lavorare su tutti i progetti che si aveva in Codenvy. Le modifiche vengono sincronizzate automaticamente.

Docker: il progetto per eccellenza per la creazione di contenitori per lo sviluppo di progetti.  Codenvy  è il cloud ide che offre il prodotto di integrazione con Docker più maturo finora.

GIT: Questo IDE supporta Git come sistema di controllo versione. È inoltre possibile importare i vostri progetti da GitHub o BitBucket, il che semplifica l’onboarding e la gestione dei vostri progetti.

La nota dolente? C’è : nessun supporto FTP!

codenvy cloud ide

Codeanywhere, robusto e flessibile

Questo cloud ide è un ambiente di sviluppo elegante e funzionale. Vi permetterà infatti di concentrarvi sulla costruzione di grandi applicazioni, velocemente e rendendo lo sviluppo più produttivo e divertente.

Alcune caratteristiche:

Linguaggi di programmazione: supporta la sintassi di 75 Linguaggi di programmazione, gestisce l’auto-completamento del codice (js, php, html, css) ed i cursori multipli.

Configurazione: facile da configurare, personalizzando il proprio ambiente di sviluppo per i progetti in  Javascript, PHP, HTML, o in altri 72 linguaggi.

 

Performance:  questo cloud ide ha la possibilità di creare un server web in 2 mosse, fornisce un accesso SSH, è stabile ed ha un prezzo accessibile.

Web server (container): questa è una delle caratteristiche peculiari di questa piattaforma. Una volta creato il vostro progetto è possibile collegarlo a progetti github / bitbucket / ftp / amazon ecc …. ma anche creare un ‘container‘. Questo significa che  codeanywhere creerà una macchina virtuale portabile, con un ambiente di sviluppo, pronta all’uso. Si seleziona la lingua di sviluppo ed il SO preferito (Ubuntu o CentOS) , si clicca su “Crea” e si attende circa 10 secondi. Ed il gioco è fatto.

 

Per approfondire…

https://www.slant.co/topics/713/versus/~codenvy_vs_cloud9_vs_codeanywhere

https://stackshare.io/stackups/cloud9-ide-vs-codeanywhere-vs-codenvy

https://bbvaopen4u.com/en/actualidad/development-cloud-advantages-and-platforms-programmers

 

 

 

Tweet


Articoli totali: 68 - Pagine: 7