cesa

test WP

API manager WSO2 : API senza autenticazione - api-manager-wso2-no-autenticazione

API manager WSO2, una veloce infarinatura

API Manager WSO2 è un applicazione open source per la gestione del ciclo di vita delle API. Solitamente lavora a stretto contatto con uno strato di astrazione ESB ma può essere utilizzato anche direttamente per la gestione e la pubblicazione delle proprie API di Back-end. E’ disponibile sia in versione Cloud che On-Premise.

Per semplificare il suo funzionamento possiamo dire che è formato da due macro applicazioni:

Il famigerato Bearer Token

Per poter invocare le API dell’API manager WSO2 è necessario, per ogni “application” definita, generare un Bearer Token. Questo token quindi dovrà essere inserito nella testata delle chiamate API per l’autenticazione:

Authorization: Bearer xsdf3434423413412312312343423

 Questo token autorizzativo può essere impostato con una validità specifica ( in secondi ) oppure impostato a -1 per non scadere mai.

Come evitare l’utilizzo del Bearer Token

In alcune circostanze si rende necessario evitare l’utilizzo dell’autenticazione Oauth2. In questo caso sono pochi i passi da fare per eliminare la richiesta di Authorization:

  1. Entrare in modifica su una API già definita nel publisher e, nel primo step, cliccare sul pulsante “Edit Source”;  
  2. Trovare quindi la porzione di codice con i parametri di configurazione e modificare il parametro x-auth-type da “Application & Application User” a None

ed il gioco è fatto! Basterà quindi ripubblicare l’api seguendo i tre step classici e la vostra API sarà disponibile senza l’utilizzo del parametro di autenticazione.

Tweet

Clarity Design System: pensare, vedere e creare in Angular 6 - clarity-design-system-per-angular-6

Angular: il primo approccio

Il primo approccio ad Angular non è mai facile.  Qualcuno direbbe <<non è facile come React…>>! Superato lo scoglio iniziale però, tutto diventa più semplice e ci si  appassiona a questo modo di pensare così aperto e ricco di possibilità senza neanche accorgersene! Soprattutto poi se possiamo utilizzare un framework così completo e ben gestito come Clarity.
Questo linguaggio sviluppato da Google, ormai arrivato alla sua 6a versione ( con la settima in alpha…) sta conquistando anche i più scettici. Ormai tante realtà anche di grandi dimensioni, stanno utilizzando Angular per lo sviluppo Front-end. Anche perché permette, grazie all’utilizzo di certe accortezze, di sviluppare una volta sola per Desktop e mobile.

buttons-design-clarity-for-angular

Ma cos’è Clarity ?

Vmware ha reso disponibile gratuitamente, su GitHub, il framework sviluppato in Angular per la realizzazione della maggior parte delle loro applicazioni di front-end web, il suo nome è Clarity Design System .  Non si può parlare solo di framework grafico o di componenti Angular, qui si parla di un sistema, un design, pensato a tutto tondo per rendere molto semplice la creazione di una nuova applicazione front-end basata su Javasctipt.

UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences

Infatti, oltre al solito set di bottoni, modali, card, grid, che tutti i framework grafici hanno consolidato, Clarity indica anche le linee guida da seguire per la realizzazione della vostra nuova applicazione.

Clarity Placement sistem for Angular development

Inoltre sono presenti molti esempi di utilizzo dei vari componenti o di set di componenti. Quello più sorprendente forse è il componente “Wizard” che definisce già alcune tipologie di “inserimento dati a più passi”. Tutto questo permette di non doversi inventare nulla, utilizzando un pattern di sviluppo ben delineato e consolidato.

Perché usare Clarity ?

I modelli di progettazione e la tecnologia cambiano rapidamente. Più un framework di sviluppo è chiaro meglio si può adattare ed anticipare i cambiamenti. Vmware questo lo sa e quindi ha creato un team dedicato allo sviluppo costante di questo sistema integrato, mantenendo un livello elevato di standard di qualità.

Clarity è facile da usare, accelera il processo di creazione e sviluppo di una web app front-end, senza lasciare nulla al caso. Prevede componenti specifici che velocizzano l’implementazione e la facilità di lettura del codice.

application-layout-clarity-for-anguyar

Non per niente Vmware lo utilizza per il front-end gestionale delle proprie macchine virtuali.

Clarity è semplice, leggero, intuitivo, gratuito ed adatto a tutti gli sviluppi front end, web e mobile.

Tweet

Lanciare Eclipse da Mac OSx Sierra - lanciare-eclipse-da-mac-osx-sierra

Quale versione di Eclipse ?

Eclipse è un IDE molto famoso ed utilizzato per moltissimi sviluppi software anche perché, grazie ad i suoi plugin i vari produttori possono customizzarne le funzioni.

Ho provato ad utilizzare  sul mio nuovo MacBook Air alcune versioni, riscontrando problemi nell’avvio di alcune di esse.

Nessun problema con la versione più recente “Oxygen” : si installa velocemente e funziona piuttosto bene.

Invece con versioni più vecchie come Luna, Mars e Juno, al momento dell’avvio, mostravano un errore.

Perché utilizzare versioni più datate di Eclipse?

In alcuni casi è obbligatorio utilizzare alcune versioni specifiche per sfruttare  plugin specifici che non sono compatibili con le ultime versioni. Nel mio caso Developer Studio di WSO2.

Quindi, come lanciare Eclipse Luna versione Developer Studio WSO2 ?

Mi è venuto incontro questo semplice articolo che, in pochi passi, spiega come lanciare l’applicazione:

WSO2 Developer Studio : Steps to run on Mac OS x

Brevemente descrivo i passi da seguire:

aprire il terminale ed inserire le seguenti che seguono.

– al primo avvio del programma

cd <DevStudio_Home>/Eclipse.app/Contents/MacOS/

chmod +x eclipse

./eclipse

– successivamente:

cd <DevStudio_Home>/Eclipse.app/Contents/MacOS/

./eclipse

L’articolo originale indica che, dopo le istruzioni inerenti il primo avvio, per quelli successivi basterà cliccare sull’icona di avvio di Eclipse ma nel mio caso questo non ha funzionato quindi ho inserito le istruzioni per i successivi avvi.

 

Tweet

Proviamo Directus su Lighttpd, un cms che vola! - proviamo-directus-su-lighttpd

Azzardiamo, Directus su Lighttpd per api veloci!

Directus, il cms Headless

Directus è il cms headless open source di cui ho parlato nell’articolo del 15 gennaio. E’ in continua evoluzione, funzionale e grafica. Ed è stato pensato per funzionare su application server come Apache o Nginx.

Lighttpd, vola leggero!

Lighttpd è un web server il cui pregio maggiore è il piccolo ingombro di memoria e la grande velocità. Quindi potrebbe essere una soluzione molto interessante per il nostro CMS Directus!

Perché questo azzardo?

Semplicemente perché avevo a disposizione una macchina Freebsd con installato Lighttpd. Ed ho pensato, se funziona con Apache, con Nginx, perché non dovrebbe funzionare anche con lighttpd?

Installazione di Directus

per installare Directus su Lighttpd ho seguito le stesse istruzioni per la classica installazione su Apache ( cambiando qualche comando essendo su BSD e non su Ubuntu/debian). Ho quindi installato Maria DB, Composer e poi scaricato Directus.

L’installazione del CMS è andata bene, almeno fino alla gestione del “mod_rewrite“. Questo punto è sempre cruciale!

Lighttpd è la sua configurazione

Eccoci al punto, per permettere alle API di Directus di funzionare correttamente ed allo stesso tempo al CMS di agire con le sue configurazioni ho dovuto sperimentare un po’…  ma alla fine qualche soluzione l’ho trovata 😉

Per gestire il mod_rewrite ho inserito questo codice, in parte recuperato da quello per i permalink di WordPress:

url.rewrite = (

# Excludes the admin, includes, wp-content etc. -> LO STESSO USATO PER WP
"^/(wp-admin|wp-includes|wp-content|gallery2)/(.*)" => "$0",

"^/(directus/api)/(.*)" => "directus/api/api.php?run_api_router=1 last"
)
url.rewrite-if-not-file += ( "^/(directus/.*)\.(css|js|jpg|png|gif)$" => "$0",
"^/directus/(.*)$" => "/directus/index.php/$1" )
}

Poi, per permettere alle altre applicazioni di invocare le api, ho dovuto aggiungere:

"mod_setenv", #before mod_status, very important!

ai server.modules.

Poi ho dovuto impostare i metodi di accesso:

setenv.add-response-header = (
"Access-Control-Allow-Origin" => "*",
"Access-Control-Expose-Headers" => "WWW-Authenticate",
"Access-Control-Allow-Headers" => "Authorization",
"Access-Control-Allow-Methods" => "POST, GET, OPTIONS"
)

Risultato…

Directus su Lighttpd funziona? Diciamo di sì, al 80%. Alcune funzionalità sono inibite, come quelle di upload file e, in alcune fasi, quelle di aggiunta utenti. Probabilmente alcune configurazioni sono da rivedere e migliorare ma la strada è quella giusta!

Le funzionalità di aggiunta tabelle, scrittura e lettura, API sono funzionanti al 100% e ad altissima velocità!

Non essendo un vero e proprio esperto di Lighttpd è stato un risultato più che buono!

Tweet

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


Articoli totali: 72 - Pagine: 8