Archivi categoria: WEB

WEB

kenji-agency-tag-meter-creazione-siti-web-treviso

La semantica del tag meter

HTML5 offre diversi nuovi elementi utili per aggiungere ulteriore significato al markup HTML di una pagina. Tra questi nuovi elementi abbiamo il tempo e nel nostro caso il metro ( meter ). Si tratta di un elemento in linea che quindi possiamo utilizzare all’interno di altri elementi; tra cui un’intestazione o un paragrafo.

L’elemento meter rappresenta una misurazione scalare all’interno di un intervallo noto o un valore frazionario; ma  non rappresenta un valore scalare di intervallo arbitrario – ad esempio, sarebbe sbagliato utilizzarlo per riportare un peso o un’altezza, a meno che non ci sia un valore massimo noto.

Esaminiamo gli attributi dell’elemento e qualche esempio.

Gli attributi disponibili sono sei: value, min, max, high, low e optimum.

Value
Questo è ciò che verrà analizzato – il valore reale.  Se non viene utilizzato un numero reale, il valore è zero.
Min
Il valore minimo consentito. Se non è specificato, il valore è 0.
Max
Il valore massimo consentito.  Se non è specificato, il valore è 1. Tuttavia, se è possibile specificare il valore di questo nel contenuto, ad esempio un segno di percentuale, il valore massimo sarà 100%
Basso
Questa è considerata la parte bassa dell’intervallo di valori.
Alto
Questa è considerata la parte alta dell’intervallo di valori.
Ottimale
Questo è considerato il valore ottimale e deve essere compreso tra min e max.

Diamo un’occhiata ad un esempio come strumento di valutazione:

Il tuo punteggio è : <meter>2 out of 10</meter>

Il tuo punteggio è: 2 out of 10

Possiamo dare questo ulteriore significato aggiungendo gli attributi min e max

Il tuo punteggio è: <meter min=”0″ max=”10″>2 out of 10</meter>

Il tuo punteggio è: <meter value=”91″ min=”0″ max=”100″ low=”40″ high=”90″ optimum=”100″>A+</meter>

Il tuo punteggio è: 2 out of 10

Il tuo punteggio è: A+

Conclusione
Acnhe se gli attributi possono creare una leggera confusione, il tag meter viene usato molto nelle app e nelle pagine web. Per dettagli vi invitiamo a consultare le specifiche, che per questo elemento sono dettagliate .
Kenji Agency : creazione  siti web a Treviso
chrome-extentions-creazione-siti-web-treviso

Chrome dev: estensioni per sviluppatori – Parte 3

Continuiamo con la terza parte sull’analisi delle estensioni  di Chrome Dev:

 

 

Pallette
Questa estensione vi consente di prendere qualsiasi immagine nel tuo browser e vedere di quali colori è composta.

PerfectPixel
PerfectPixel consente di sovrapporre delle immagini semitrasparenti sopra la pagina HTML , fornendo  un confronto tra i pixel dei  due documenti.

Chrome MySQL Admin
Rappresenta un un client MySQL con tutti gli strumenti per gestire i database e  le tabelle MySQL. È possibile connettersi, amministrare database, eseguire query e visualizzare set di query in un’interfaccia molto veloce.

JSON Formatter
Visualizza un file JSON  in un formato facile da leggere .

Sviluppatore web
Estensione indispensabile per ogni sviluppatore web. Facendo clic sul pulsante del badge di questa estensione si accede a un notevole numero di tools. Un potente strumento per tutti gli sviluppatori e i designer.

Kenji Agency : creazione  siti web a Treviso

 

chrome-devtools-suggerimenti-parte3-creazione-siti-web-treviso

Chrome DevTools: suggerimenti… parte 3

Proseguiamo con la terza parte sui suggerimenti su come utilizzare al meglio  Chrome DevTools :

Modalità dispositivo
DevTools include una potente modalità per lo sviluppo di pagine ottimizzate per dispositivi mobili. Questo video di Google illustra la maggior parte delle sue funzioni principali come : ridimensionamento dello schermo, emulazione del tocco e simulatore di connessioni di rete .

Sensori di emulazione del dispositivo
Un’altra interessante funzionalità  è l’opzione per simulare i sensori dei dispositivi mobili come touch screen e accelerometri.  La funzione si trova nella parte inferiore della scheda Elementi in Emulazione -> Sensori.

Color Picker
Quando selezioni un colore nell’editor Stili puoi fare clic sull’anteprima del colore e comparirà un selettore. Mentre il selettore di colori è aperto, se passi il mouse sopra la pagina, il puntatore del mouse si trasformerà in una lente di ingrandimento per la selezione dei colori con precisione al livello di pixel.

bootstrap-progettazione-siti-web-treviso

Come funziona la griglia del framework Bootstrap – Parte 2

Le Classi di gestione della griglia
Quando abbiamo scritto .col-md-numero, quella -md- sta per medium. Il framework Bootstrap ha un certo numero di queste classi per adattare il layout dello schermo a diverse dimensioni .

xs – Schermi extra piccoli come gli smartphone: .col-xs-numero
sm – Dispositivi a schermo piccolo come tablet: .col-sm-numero 
md – Schermi di dimensioni medie come desktop e laptop a bassa risoluzione: .col-md-numero 
lg – Schermi di grandi dimensioni ad alta risoluzione: .col-lg-numero
Bootstrap tiene conto della risoluzione dello schermo e del dpi quando decide quali classi attivare ( link ).  Quando definiamo una regola per qualsiasi dimensione del dispositivo, questa regola verrà ereditata e applicata a tutte le dimensioni più grandi, a meno che non la sovrascriviamo fornendone una nuova.

Clearfix
In alcuni casi, quando una colonna ha molto più contenuto e di conseguenza un’altezza maggiore di quella successiva, il layout si interromperà. Le colonne si accumuleranno una sotto l’altra, invece di passare alla riga successiva come dovrebbero. Per evitare ciò, aggiungiamo un div  con la classe clearfix che forzerà  tutte le colonne  su una nuova riga, risolvendo il problema.

Offsets 
Per impostazione predefinita, le colonne si attaccano l’una all’altra senza lasciare spazio, fluttuando verso sinistra. Lo spazio in eccesso rimasto in quella fila rimane vuoto a destra.Per creare margini a sinistra delle colonne possiamo usare le classi di offset. L’applicazione di una classe .col-md-offset-2 a qualsiasi colonna la sposterà a destra, come se ci fosse una cella .col-md-2 invisibile. È possibile avere diversi offset per le diverse dimensioni dello schermo grazie ai prefissi xs, sm, md e lg. Puoi utilizzare gli offset per centrare facilmente le colonne.

Push e Pull ( Spingi e tira )
Le classi push e pull ci consentono di riordinare le colonne in base alle dimensioni dello schermo. Si sposta una colonna a destra e si tira l’altra a sinistra.Le classi push e pull hanno il seguente formato: .col-SIZE-push-numero e .col-SIZE-pull-numero . I valori   possibili sono sm, xs, md e lg. Questo rappresenta in quale dei 4 scenari di dimensioni dello schermo vogliamo effettuare lo scambio. Numero dice a Bootstrap quante posizioni vogliamo spostare.

Conclusione
Una veloce introduzione della parte più importante di Bootstrap, che vi consentirà di utilizzare per la prima volta questo framework nei vostri progetti. Ovviamente rimane ancora molto da approfondire . Tutto quello che vi serve è presente nella documentazione online di Bootstrap .

Link sito Framework  Bootstrap

Kenji Agency : creazione  siti web a Treviso

chrome-extentions--progettazione-siti-web-treviso

Chrome app: estensioni per sviluppatori – Parte 2

Continuiamo con l’analisi delle estensioni  di Chrome App:

ColorZilla
Una raccolta di strumenti a colori che ti consentono di selezionare colori, generare sfumature e altro ancora, tutto nel tuo browser.

WhatFont
Un modo rapido per cercare quali caratteri vengono utilizzati in una pagina passando semplicemente sopra l’elemento di testo. Rileva anche i servizi utilizzati per servire i caratteri web. Supporta Typekit e Google Font API.

Window Resizer
Un ottimo strumento per creare progetti reattivi che ridimensionano la finestra del browser. Scegli da un elenco di dispositivi popolari o aggiungi quelli personalizzati per un rapido accesso a una determinata risoluzione.

Pallette
Questa estensione ti consente di scattare una foto nel tuo browser e vedere di quali colori è composta.

Page Ruler
Uno strumento per la misurazione precisa degli elementi su qualsiasi pagina web. È possibile selezionare una regione o inserire manualmente le dimensioni dell’area selezionata. Puoi cambiare il colore dell’area selezionata.

Kenji Agency : creazione  siti web a Treviso

 

chrome-extentions--progettazione-siti-web-treviso

Chrome app: estensioni per sviluppatori – Parte 1

In questo post presentiamo una lista  estensioni e app utili per Chrome app che tutti gli sviluppatori  e designer web dovrebbero quantomeno conoscere. Sono parecchie e hanno utilità e scopi differenti. Iniziamo !

 Strumento immagine
Imagetool è un’app di Chrome che aiuta a leggere e comprendere facilmente le specifiche di progettazione. Consente di esaminare le immagini e interpretarle utilizzando uno dei numerosi strumenti.

 WhatFont
Un modo rapido per cercare quali caratteri vengono utilizzati in una pagina passando semplicemente sopra l’elemento di testo. Rileva anche i servizi utilizzati per utilizzare i caratteri web.

Window Resizer
Un ottimo strumento per creare progetti responsivi che ridimensionano la finestra del browser. Scegli da un elenco di dispositivi più diffusi o aggiungi quelli personalizzati per un rapido accesso a una determinata risoluzione.

CSS-Shack
Questa è una potente app di Chrome in cui puoi creare progetti per poi esportarli in un file CSS. Può essere usato per la sperimentazione o per creare e mantenere un style css per un sito web. Supporta livelli e strumenti di progettazione come quelli che solitamente si trovano nei software di editing di immagini professionali.

Marmoset
Marmoset è un’app unica che riceve il codice e genera splendide istantanee per demo e simulazioni. Ha anche fantastici temi ed effetti con cui poter testare . È perfetto per immagini introduttive e illustrazioni per articoli e post di blog.

Kenji Agency : creazione  siti web a Treviso

javascript-progettazione-siti-web-treviso

Imparare JavaScript: libri e risorse gratuite

Con JavaScript possiamo costruire applicazioni web, app desktop, app mobili, giochi, backend e molto altro. Molti softwares supportano JS come linguaggio di estensione per la scrittura di componenti aggiuntivi o la manipolazione dei dati.

Potrebbe quindi essere arrivato il momento per iniziare ad approfondire la conoscenza di questo linguaggio. Abbiamo raccolto  15 libri gratuiti  che vi aiuteranno a imparare JavaScript e  a migliorare le tue conoscenze su JS.

Nozioni di base
Se sei un programmatore alle prime armi, o non hai mai avuto a che fare con JavaScript prima, questi libri fanno al tuo caso.

JavaScript for cats
Un’ottima introduzione a JavaScript. Mostra come scrivere codice nella console del browser e insegna i costrutti del linguaggio di base. Un libro essenziale per insegnare a scrivere JavaScript.

Learn JavaScript
Questo libro è per principianti solo in quanto copre le basi di JavaScript. Il suo formato è davvero semplice con un breve passaggio su ogni argomento, seguito da un esempio e da un esercizio. Dopo aver terminato questo libro, consigliamo di leggere il tutorial di reintroduzione di Mozilla su JavaScript.

Eloquent JavaScript
Questa è la seconda edizione del grande libro che insegna come scrivere un codice preciso, elegante e pratico. Inizia con le basi della programmazione, ma man mano che si approfondisce si entra in argomenti come JS orientato agli oggetti e funzioni di ordine superiore. Dopo aver acquisito questi concetti, il libro mostrerà come creare un gioco HTML e alcune app di esempio con Node.js.

JavaScript Garden
Una vasta raccolta di esempi per le parti che sono la causa più probabile di bug. Questo libro / guida spiega cattive pratiche, problemi e altri trucchi del JS che non funzionano come di solito si aspettano che facciano.

Nella seconda parte analizzeremo le risorse di livello intermedio.

Kenji Agency : creazione  siti web a Treviso

bootstrap-progettazione-siti-web-treviso

Come funziona la griglia Bootstrap – Parte 1

Bootstrap è il framework di frontend più utilizzato al momento. Quando si tratta di creare siti Web e applicazioni responsive, è una delle prime scelte  per i professionisti grazie alla semplicità con cui si lavora. Chiunque conosca HTML, CSS e un po ‘di JavaScript può imparare Bootstrap in poco tempo.

In questa breve lezione parleremo del sistema di griglia, uno dei concetti fondamentali che di Bootstrap . Ci consente di creare layout di pagina responsivi che possono essere modificati e adattati in base alle dimensioni dello schermo del dispositivo .

Righe e colonne
La griglia Bootstrap è composta da righe e colonne. Questo ci permette di posizionare liberamente gli elementi verticalmente e orizzontalmente. Ogni riga che creiamo occupa l’intera larghezza dell’elemento in cui si trova. L’allineamento orizzontale nella griglia avviene tramite colonne e queste sono essere i figli diretti di una riga ( tutto il contenuto deve essere inserito al loro interno).  Righe e colonne hanno una relazione speciale. Le colonne hanno 15 px di riempimento sinistro e destro in modo che il loro contenuto sia distanziato correttamente. Tuttavia, questo spinge il contenuto della prima e dell’ultima colonna a 15px dal genitore. Per compensare, la riga ha margini di sinistra e destra negativi di 15px. Questo è un buon motivo per posizionare le colonne all’interno delle righe.

Divisione delle righe
Le file sono divise orizzontalmente in 12 parti uguali. Quando inseriamo una colonna all’interno di una riga, dobbiamo specificare il numero di parti che occuperà. Questo viene fatto applicando una classe specifica .col-md-Numero, dove Numero può essere un numero intero compreso tra 1 e 12. A seconda del numero, una colonna occuperà una percentuale della larghezza dell’intera riga: 6 sarà 50% (12 / 6), 3 sarà il 25% (12/3) e così via.

Wrapping delle colonne
Essendoci solo 12 spazi disponibili in una linea e se  lo spazio richiesto dalle colonne adiacenti supera 12, le ultime colonne in quel gruppo dovranno spostarsi sulla riga successiva. Se su tre colonne le prime due  hanno dimensioni rispettivamente di 8 e di 4 (8 + 4 = 12), che rendono piena la prima riga. Non c’è abbastanza spazio per la terza cella, quindi dovrà passare alla riga successiva.

Nella seconda parte analizzeremo le classi Sceen Size.

Link sito Bootstrap

Kenji Agency : creazione  siti web a Treviso

section-element-siti-web-a--treviso

La semantica dell’elemento section

Dalla lettura delle specifiche risulta che l’elemento ” Section ” rappresenta un documento generico o una sezione ma non è un elemento contenitore generico. Quando un elemento è necessario solo per scopi di stile o per comodità di scripting, gli autori sono incoraggiati a utilizzare invece l’elemento ” div “. Una regola generale è che l’elemento della sezione è appropriato solo se i contenuti dell’elemento vengono elencati esplicitamente nella struttura del documento. Questo significa che il tema di ogni sezione dovrebbe essere identificato, in genere includendo un’intestazione (elemento h1-h6) come elemento secondario dell’elemento section.

...
<section>
<h2>heading</h2>
 content
</section>
...

In conclusione la sezione non dovrebbe essere usata se non esiste un’intestazione naturale ( <h1> … <h6> ).

Riassumendo le regole pratiche per l’utilizzo della sezione ( ovviamente ci sono sempre delle eccezioni) :

  • Da non usare come hook per lo styling o lo scripting ( usare un div )
  • Da non usare se l’aArticle, a Aside o Nav sono più appropriati
  • Da non usare a meno che non ci sia naturalmente un titolo all’inizio della sezione

Kenji Agency : creazione  siti web a Treviso

chrome-devtools-suggerimenti-parte2-creazione-siti-web-treviso

Chrome DevTools: suggerimenti… parte 2

Proseguiamo con la seconda parte sui suggerimenti su come utilizzare al meglio  Chrome DevTools :

Selezione degli elementi nella console
La console DevTools supporta alcune pratiche  funzioni che selezionano gli elementi DOM:

$ () – Questo comando abbreviato, corrispondente a document.querySelector (), la console restituisce il primo elemento, corrispondente a un selettore CSS ( ad esempio $ (‘div’) restituirà il primo elemento div nella pagina ).

$$ () – Questa abbreviazione invece ( document.querySelectorAll () ) restituisce una serie di elementi che corrispondono al selettore CSS specificato.

$ 0 – $ 4 – Una cronologia dei cinque elementi DOM più recenti che hai selezionato nel pannello degli elementi, $ 0 è l’ultimo.

Scrivere su più righe contemporaneamente
Una caratteristica presente anche  in Sublime Text : per modificare un file è possibile impostare più righe tenendo premuto Ctrl (Cmd per Mac) e facendo clic nel punto in cui si desidera aggiornare il codice; consentendo così di scrivere in più posti contemporaneamente.

modifiche multiriga

Conservare il registro
Selezionando l’opzione Preserve log nella scheda Console ( o network ), è possibile fare in modo che la console di DevTools mantenga il registro anziché cancellarlo ad ogni caricamento di pagina. Fuunzone utile quando si vuole approfondire  sui bug che compaiono poco prima che la pagina venga caricata.

Opzione Pretty Print {}
Gli Strumenti per sviluppatori di Chrome sono dotati di un’utile funzione di formattazione del codice che  aiuterà a rendere il codice ridotto e leggibile. Il pulsante Pretty Print si trova nella parte inferiore sinistra del file attualmente aperto nella scheda Sources.

Alla prossima puntata.

Kenji Agency : creazione  siti web a Treviso

convalida-form-creazione-siti-web-treviso

HTML5 – validare una form – Parte 1

La  convalida delle informazioni raccolte attraverso un modulo è indispensabile. Se non si procede con una tecnica di “filtraggio ” si potrebbero perdere clienti, acquisire dati non necessari nel database o addirittura virus exploit che mettono a repentaglio la  sicurezza del tuo sito web. Storicamente, la convalida delladei dati di una form può essere fatta lato server o con l’utilizzo di javascritpt ( e relativi framework ) .

Fortunatamente, HTML5 ci offre una serie di funzionalità in grado di gestire gran parte delle  esigenze di convalida. I moduli in HTML5 ora hanno il supporto integrato per la convalida attraverso l’uso di attributi speciali e nuovi tipi di input, fornendo un pieno controllo sullo stile con i CSS.

Nelle prossime lezioni, vedremo assieme quali elementi utilizzare per realizzare una convalida HTML5.

Kenji Agency : creazione  siti web a Treviso

chrome-devtools-suggerimenti-parte1--creazione-siti-web-treviso

Chrome DevTools: suggerimenti e trucchi.

Chrome DevTools
Google Chrome è il browser web più utilizzato dagli sviluppatori web. Con  un potente set di funzionalità per sviluppatori in continua espansione, il browser è diventato uno strumento indispensabile. La maggior parte di voi conosce probabilmente molte delle sue funzionalità come il live-editing CSS, la console e il debugger. In questa serie di articoli vedremo alcuni interessanti suggerimenti  che miglioreranno il vostro flusso di lavoro.
Ricerca  rapida dei file
Come in Sublime Text nche gli strumenti di sviluppo hannola funzionalità per sfogliare i files del tuo lavoro. Premi Ctrl + P (Cmd + P su Mac) quando DevTools è aperto, per cercare rapidamente e aprire qualsiasi file nel tuo progetto.
Cerca all’interno del codice sorgente
Ma cosa succede se si desidera cercare all’interno del codice sorgente? Per cercare in tutti i file caricati nella pagina per una stringa specifica, premi Ctrl + Maiusc + F (Cmd + Opt + F). Questo metodo di ricerca supporta anche le espressioni regolari.
Vai alla riga
Dopo aver aperto un file nella scheda Sorgenti, DevTools ti consente di passare facilmente a qualsiasi riga in essa contenuta. Per farlo premi Ctrl + G per Windows e Linux, (o Cmd + L per Mac) e digita il numero della tua linea.
Alla prossima seconda parte.
Kenji Agency : creazione siti web a Treviso
check-box-hack-siti-web-treviso

Creare menu a discesa CSS con il checkbox

In questo articolo, daremo un’occhiata ad una tecnica solo CSS per la creazione di menu a discesa, attraverso l’utilizzo dell’elemento checkbox senza utilizzare  una singola riga di JavaScript.

<div class=”dropdown”>
<input type=”checkbox” id=”checkbox_toggle”>
<label for=”checkbox_toggle”>Click per aprire</label>
<ul>
<li><a href=”#”>Link Uno</a></li>
<li><a href=”#”>Link Due</a></li>
<li><a href=”#”>Link Tre</a></li>
<li><a href=”#”>Link quattro</a></li>
</ul>
</div>

Questo è come appare la  struttura HTML. Qui è importante notare che l’elemento di input deve venire prima dell’etichetta e prima dell’ul.

Il checkbox Hack
Per prima cosa nascondiamo la casella di controllo e anche l’UL:

input[type=checkbox]{ display: none; }      ul{ display: none; }

Se combiniamo il selettore: checked con il selettore generale siblings (~) possiamo modificare le proprietà CSS degli elementi che seguono la casella di controllo. Questo è il motivo per cui avevamo bisogno che la casella di controllo venisse prima, prima che l’ul nell’albero DOM.

input[type=checkbox]:checked ~ ul {  display: block }

Kenji Agency : creazione siti web a Treviso

element-msrk-creazione-siti-web-treviso

La semantica dell’elemento mark

HTML 5 introduce il contrassegno mark come un modo per evidenziare il testo per indicare la sua rilevanza per l’utente. Dalle specifiche :

L’elemento mark rappresenta una sequenza di testo in un documento contrassegnato o evidenziato a fini di riferimento, a causa della sua rilevanza in un altro contesto. Se usato in una citazione o in un altro blocco di testo , indica un’evidenziazione che non era originariamente presente ma che è stata aggiunta per attirare l’attenzione del lettore su una parte del testo che potrebbe non essere stata considerata importante dal autore originale . Se utilizzato nella prosa principale di un documento, indica una parte del documento che è stata evidenziata a causa della sua probabile rilevanza per l’attività corrente dell’utente.

Entrambi gli usi sono finalizzati a richiamare l’attenzione su ciò che è rilevante per l’utente.
Un primo esempio di come usare mark mark oggi è evidenziare il termine cercato da un utente. Molti motori di ricerca lo fanno già utilizzando altri metodi per contrassegnare il testo, il che dimostra la necessità di questo nuovo elemento.

Ciò può aiutare l’utente a vedere quanto sono pertinenti i risultati della ricerca, in modo che possano scegliere i risultati migliori per ciò di cui hanno bisogno. Quando si implementa questo in un linguaggio come PHP, è possibile utilizzare funzioni come str_replace ()  per trovare il termine di ricerca all’interno dell’output e il segno di spunta attorno a ciascuna istanza.

Differenze da strong ed em
In precedenza, potresti aver usato em e strong per aggiungere enfasi o importanza, rispettivamente, a porzioni di testo. mark differisce da questi due in quanto viene utilizzato esclusivamente per evidenziare la rilevanza di una porzione di testo per l’utente e / o il contenuto della pagina. In passato potresti averli usati e forti per questo scopo, che era probabilmente valido al momento a causa della mancanza di un elemento migliore, ma l’introduzione del marchio significa semplicemente che il loro uso sarà più rigoroso.
Usare forte quando è necessario indicare l’importanza di una parte di testo, ad esempio un messaggio di errore o di avviso, e em dovrebbe essere per aggiungere enfasi al testo, sottolineando le parole per adattare il significato di una frase.

Conclusioni
L’aggiunta di mark to HTML è benvenuta, evitando di allungare le definizioni di strong ed em troppo sottili. Ci sono molti usi pratici del marchio nel mondo di oggi, in particolare per la ricerca e articoli educativi come tutorial. Metti giù i pennarelli e inizia a usare il segno per evidenziare il testo pertinente (è meglio per il tuo schermo!).

Kenji Agency : creazione  siti web a Treviso

php-libraries-realizzazione-siti-web-treviso

Librerie PHP : 3° parte

Finiamo con la serie di articoli che riguardano il mondo delle librerie PHP , analizzando le ultime librerie FREE, validi framework per il nostro lavoro di programmatori.

CssToInlineStyles
Chiunque abbia provato a creare e-mail in formato HTML sa quanto sia noioso integrare tutte le regole CSS. Questa piccola classe PHP fa tutto il lavoro per te, facendoti risparmiare tempo . Basta scrivere i tuoi stili in un normale file .css e la libreria PHP userà i selettori per assegnarli ai tag appropriati.

Stringy
Libreria per fare tutti i tipi di manipolazioni di stringhe. Offre numerosi metodi per modificare il testo ( reverse (), htmlEncode (), toAscii (), ecc.) o acquisire informazioni su una stringa (isAlphanumeric (), getEncoding (), ecc).

Robo
Con questa libreria si possono configurare task automazzati che migliorano il flusso di lavoro e il tempo necessario per completare un progetto dopo aver apportato le modifiche.

Humanizer
Questa libreria prende le variabili e le trasforma in un formato più leggibile usando una serie di metodi. Ad esempio, può trasformare numeri romani in numeri, troncare stringhe lunghe e calcolare byte in kB / MB / GB.

ColorExtractor
L’ultimo elemento  è questa piccola libreria per estrarre i colori dalle immagini. Esso itera tutti i pixel in una determinata immagine e restituisce una tavolozza dei colori su di essa ordinati per area totale. Gli sviluppatori possono quindi utilizzare questa tavolozza per ottenere i colori più dominanti e adattare il design in base ad essi.

Kenji Agency : creazione  siti web a Treviso

php-libraries-realizzazione-siti-web-treviso

Librerie PHP : 2° parte

Continuiamo con la serie di articoli che riguardano il mondo PHP , analizzando alcune librerie FREE che possono aiutarci nello sviluppo dei nostri progetti.

Climate
Climate è una libreria per le persone che eseguono PHP dalla riga di comando. Offre una raccolta di metodi per parlare con il terminale (sia input che output) e anche alcune funzioni abbellenti per la colorazione e la formattazione. Può anche disegnare e animare la bella arte ASCII.

Alice
Costruito su Faker, Alice è una libreria che genera oggetti di dati falsi per il test. Per usarlo devi prima definire la struttura dei tuoi oggetti e quali dati vuoi inserire in essi. Quindi con una semplice funzione chiamata Alice trasformerà questo modello in un oggetto reale con valori casuali.

Ratchet
La libreria Ratchet aggiunge il supporto per l’interfaccia WebSockets nelle app con un backend PHP. I WebSocket consentono la comunicazione bidirezionale tra il server e il lato client in tempo reale. Affinché funzioni in PHP, Ratchet deve avviare un processo PHP separato che rimane sempre in esecuzione e invia e riceve in modo asincrono i messaggi.

PHPMailer
Nessuna collezione di librerie PHP è completa senza PHPMailer. Questo progetto è supportato da una grande community ed è implementato in sistemi popolari come WordPress e Drupal, rendendolo la scelta più sicura per l’invio di email in PHP. Ha il supporto SMTP, può inviare e-mail basate su HTML e molto altro.

Hoa
Hoa non è in realtà una libreria PHP: è un intero set di librerie PHP, che contiene tutti i tipi di utili utilità di sviluppo web. Anche se non tutti sono completamente documentati, ci sono 50+ librerie in questo momento, con nuove aggiunte costantemente. È completamente modulare in modo da poter selezionare solo le librerie necessarie senza alcun ingombro.

Kenji Agency : creazione  siti web a Treviso

nav-element-creazione-siti-web-treviso

La semantica dell’elemento nav

Uno dei  elementi più recenti dell’ HTML 5 è l’elemento < nav > che consente di raggruppare i collegamenti, ottenendo un markup con maggior valore  semantico e una struttura extra che può aiutare gli screen reader. Vedremo come e dove usarlo.

Come usarlo

Utilizzo 1 –

<div id="nav">
<ul>
<li><a.... etc

Utilizzo 2 –

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</nav>

Le specifiche dell’HTML5 definiscono l’elemento nav come :
” L’elemento nav rappresenta una sezione di una pagina che collega,  tramite collegamenti di navigazione, ad altre pagine o a parti all’interno della stessa pagina. Solo le sezioni che consistono in blocchi di navigazione principali sono appropriati per l’elemento di navigazione nav.”

La frase chiave è “navigazione principale” ( o navigazione primaria). Ma in che modo posso definire quale serie di link dovrebbero essere classificati come navigazione principale ? Si potrebbe sostenere che l’elemento <nav> dovrebbe essere utilizzato in quelle aree di navigazione che sono considerate “importanti” dagli utenti navigano nel tuo sito. In breve possiamo definire cruciali queste aree di layout:

Sommario
La navigazione primaria
Tasti precedente / successivo (o paginazione)
Importante per la struttura generale e la gerarchia del sito
Modulo di ricerca
Un modulo di ricerca è estremamente importante per la navigazione di un sito, in particolare per i siti di grandi dimensioni che utilizzano ilproprio motore di ricerca.
Briciole di pane
Anche se le briciole di pane non sono sempre necessarie, nei siti di grandi dimensioni un percorso di breadcrumb può rappresentare un importante aiuto alla navigazione.

Kenji Agency : creazione  siti web a Treviso

hamburgers-creazione-siti-web-treviso

CSS Hamburger: animazioni gratuite

La bellezza dei CSS sta nel fatto che è possibile creare molto, con facilità, e anche senza molti sforzi. A prova di questo vi forniamo una serie di animazioni del menu “hamburger”, utilizzato nei menù a scomparsa ( overlay ) . Hamburgers di Jonathan Suh – è una raccolta di menu hamburger realizzata con i CSS. Include file SASS completi e viene fornito con il supporto dell’accessibilità.

Download Hamburgers here.

Kenji Agency : creazione  siti web a Treviso

firefox-reality-creazione-siti-web-treviso

Firefox Reality

Da oggi la prima versione di Firefox Reality è disponibile negli app store Viveport, Oculus e Daydream.

In un momento in cui  l’impatto della tecnologia sulla vita delle persone viene messo  in discussione,  si cercano nuovi riferimenti ad organizzazioni indipendenti come Mozilla. Con Firefox Reality, la casa del famoso browser, porta nel Web 3D il livello di facilità d’uso, di scelta, controllo e privacy che ci si aspetta da Firefox.

Progettato su base virtuale
Il team di Mixed Reality  ha investito una quantità significativa di tempo, sforzi e ricerche per capire come progettare un browser per la realtà virtuale. Tra le caratteristiche del nuovo browser c’è la possibilità di cercare sul web usando la tua voce: puoi scegliere di cercare usando il microfono e le cuffie.

Nuovi contenuti
Dal momento in cui si apre il browser, verranno presentate esperienze coinvolgenti  da godere con un auricolare VR direttamente dal browser Firefox Reality.  Il team di di Mixed Reality sta collaborando con i creatori di tutto il mondo per offrire una vasta e speciale collezione di giochi, video, ambienti ed esperienze a cui è possibile accedere direttamente dalla schermata principale.

Una nuova dimensione di Firefox
Firefox Reality utilizza il nuovo motore Quantum per i browser mobili. Il risultato è una navigazione fluida e veloce,  fondamentale per un browser VR. Non è stata trascurata anche la privacy e la trasparenza, poichè la filosofia dell’ azienda si basa sulla lotta per il tuo diritto alla privacy sul web.

Kenji Agency : creazione siti web a Treviso

flexbox-realizzazione-siti-web-treviso

CSS Tecniche Flexbox – 2 e ultima parte

TECNICHE FLEXBOX

Creazione griglie completamente responsive
La maggior parte degli sviluppatori fa affidamento su un framework CSS durante la creazione di griglie responsive. Bootstrap è il più popolare tra questi, ma ci sono centinaia di librerie che possono aiutarvi in questo compito. Solitamente sono affidabili, funzionano bene e hanno svariate opzioni anche se a volte tendono ad essere pesanti. Se non vuoi implementare un intero framework solo per gestire una griglia , Flexbox è la soluzione migliore. Flexbox è semplicemente un contenitore con la proprietà  display: flex, mentre le colonne orizzontali al suo interno possono essere costituite da un numero qualsiasi di elementi. Il modello flex si adatta alle dimensioni del viewport, apparendo correttamente su tutti i dispositivi. Tuttavia,possiamo facilmente trasformare il layout da orizzontale a verticale.

Footer sticky
Anche per  la creazione di un footer sticky, Flexbox ha  una soluzione semplice a questo problema. Se applichiamo la proprietà flex al tag Body possiamo costruire l’intero layout di pagina utilizzando le proprietà di flex.

html{
    height: 100%;
}

body{
    : flex;
    flex-direction: column;
    height: 100%;
}

.main{
   /* The main section occuperà tutto lo spazio disponibile tranne che quello occupato da l footer*/
   flex: 1 0 auto;
}

footer{
   /* The footer occuperà in altezza lo spazio a lui necessario, non un pixel in più. */
   flex: 0 0 auto;
}

Questa struttura consente  al contenuto principale del sito web di essere  flessibile e permette al footer di comportarsi in maniera sticky.

Kenji Agency : creazione siti web a Treviso

css-realizzazione-siti-web-treviso

Come scrivere CSS – parte 4

SCRIVERE CSS

Caps Lock per il significato e  css text-transform per lo stile
Nell’HTML, dovresti scrivere lettere maiuscole quando vuoi usare il loro significato semantico, per esempio come quando vuoi sottolineare l’importanza di una parola.

<pre><h3>I dipendenti DEVONO indossare un casco!</h3></pre>

Se invece hai necessità di avere del testo in maiuscolo per motivi di stile, scrivi normalmente il testo e poi applica la proprietà CSS  text-transform: uppercase; per  trasformalo in tutto maiuscolo . Sembrerà lo stesso, ma il tuo contenuto avrà più senso se preso fuori dal contesto.

.testom {
text-transform: uppercase;
}

Lo stesso vale per le stringhe minuscole e in maiuscolo le cui trasformazioni di testo le gestiscono altrettanto bene.
Em, Rem, and Pixel

Si discute molto se si debbano usare valori em, rem o px per impostare la dimensione di elementi e testo. La verità è che tutte e tre le opzioni sono valide e hanno i loro pro e contro.

Tutti gli sviluppatori e i progetti sono diversi, quindi non ci possono essere regole rigide su quando e quale unità utilizzare. Ecco alcuni suggerimenti e buone pratiche generali per ogni unità:

em – Il valore di 1 em è relativo alla dimensione font del genitore diretto. Spesso usato nelle media-query, em è ottimo per la reattività,  anche se può creare qualche confusione considerare la relativa conversione tra pixel .
rem – Relativo alla dimensione del font dell’elemento <html>, rem rende molto semplice scalare tutte le intestazioni e i paragrafi della pagina. Lasciando <html> con il suo carattere di default e impostando tutto il resto con rem è un ottimo approccio per l’accessibilità.
px – I pixel offrono la massima precisione, ma non offrono ridimensionamenti se utilizzati nei progetti responsivi. Sono affidabili, facili da capire e presentano una buona connessione visiva tra valore e risultato reale.
Il concetto di fondo è di  non aver paura di sperimentare. A volte em e rem possono risparmiare molto lavoro, soprattutto quando si creano pagine responsive.

Kenji Agency : creazione siti web a Treviso

object-fit-realizzazione-siti-web-a-treviso

CSS: le proprietà Object-Fit e Position

In questo articolo parleremo di due proprietà CSS che molti sviluppatori web non conoscono. Si chiamano object-fit e object-position ed entrambi hanno a che fare con lo styling di immagini e video.Vediamo come possono essere utilizzati.

Object-fit
Con l’object-fit possiamo affrontare il modo in cui un’immagine (o video) si allunga o si schiaccia per riempire la sua casella . Ciò è necessario quando una foto che abbiamo ha una dimensione o proporzioni diverse dal contenitore che la contiene. Tradizionalmente, per risolvere questo problema si crea un div e si impostano le immagini di sfondo e le dimensioni dello sfondo. I moderni CSS, tuttavia, ci permettono  di aggiungere un tag immagine, impostarlo come al solito, e quindi applicare l’object-fit direttamente al selettore immagini:

img {
with: 100%;
oggetto-fit: cover;
}
I possibili valori sono:

fill (predefinito) – La larghezza e l’altezza dell’immagine corrispondono a quelle del contenitore. Il più delle volte questo elimina le proporzioni.
cover – L’immagine mantiene le proporzioni e riempie l’intera scatola, alcune parti sono ritagliate e non saranno visibili.
contain – L’immagine mantiene le proporzioni e si adatta al contenitore.
none – Dimensioni e proporzioni originali.
scale-down – Visualizza come uno dei precedenti, a seconda di quale produce l’immagine di dimensioni più ridotte.

Object-position
Questa proprietà definisce dove all’interno del contenitore verrà posizionata l’immagine. Assume due valori numerici, uno per l’asse superiore e uno per l’asse sinistra-destra. Questi numeri possono essere in percentuali, pixel o altre unità di misura e possono essere negativi. Sono inoltre utilizzate anche alcune parole chiave come center, top, right, ecc.

Di default un’immagine è posizionata al centro di un contenitore, quindi il valore predefinito è:

img {
Object-position: center;
/ * che è uguale a * /
Object-position: 50% 50%;
}

Supporto del browser
Il supporto del browser per l’object-fit e l’object-position è piuttosto incoerente e  come al solitoIE e Edge che non offrono alcun supporto. In attesa che tutti i browser Microsoft adottino le due proprietà, è possibile utilizzare la libreria polyfill che risolve il problema .

Conclusione
Le proprietà object-fit e object-position possono essere di grande aiuto quando si creano pagine Web che dovono essere responsive.  Siamo sicuri che una volta che IE e Edge li adotteranno, diventeranno rapidamente parte degli strumenti CSS di ogni sviluppatore web.

Kenji Agency : realizzazione  siti web a Treviso

aside-realizzazione-siti-web-a-treviso

HTML : Aside

Aside
La sua definizione suggeriva che dovrebbe essere usato per contenuti correlati al contenuto che lo circonda, come link di lettura e glossari correlati. Non sembrava essere un elemento appropriato per lo svolgimento di contenuti secondari relativi al sito nel suo complesso, in genere noto come “barra laterale”. A seguito di discussioni tra gli sviluppatori sono state apportate delle modifiche alle specifiche e ora è l’elemento è anche usato per il contenuto secondario  ( tipo sidebar ) quando non è annidato all’interno di un elemento dell’articolo.

Esempi  in due diversi contesti
Con la nuova definizione  è fondamentale rimanere consapevoli del contesto in cui verrà applicato. Se utilizzato all’interno di un elemento dell’articolo, il contenuto deve essere specificamente correlato a tale articolo (ad es. Un glossario). Se utilizzato al di fuori di un elemento dell’articolo, i contenuti devono essere correlati al sito (ad esempio, un blogroll, gruppi di navigazione aggiuntivi e persino pubblicità se tale contenuto è correlato alla pagina).

Conclusione
L’elemento aside può ora rappresentare contenuto secondario quando viene utilizzato al di fuori di un articolo ricordando che i contenuti secondari non sono necessariamente “sidebar”.Kenji Agency : realizzazione  siti web a Treviso

css-realizzazione-siti-web-treviso

Come scrivere CSS – parte 3

Continuiamo l’argomento di “Come scrivere CSS” con altri utili suggerimenti su come migliorare la stesura del nostro Cascade Style Sheet

Animazioni CSS con trasformazione
Non animare gli elementi cambiando direttamente la loro larghezza, altezza,  spostamento a sinistra, destra, alto o basso. È preferibile utilizzare la proprietà transform () in quanto fornisce transizioni più fluide e rende più semplice e intuitivo il codice durante la lettura .

Ecco un esempio. Vogliamo animare una palla e farla scorrere verso destra. Invece di cambiare il valore di sinistra, è meglio usare translateX ():

.palla {
left: 50 px;
transition: 0.4s ease-out;
}

/ * Non ok* /
.palla.slide-out {
left: 250 px;
}

/* OK*/
.palla.slide-out {
transform: translateX (250px);
}

La proprietà Transform così come tutte le sue numerose funzioni ( ruotare, ridimensionare, ecc.) hanno una compatibilità quasi universale con i vari browser e possono essere utilizzate liberamente.

Usa una libreria
La comunità CSS è enorme e ci sono costantemente nuove librerie in uscita. Vengono create librerie per una miriade di scopi e campi, da piccole a strutture complete per la creazione di app responsive. Molte di questi sono open-source. Quindi se devi affrontare un problema da risolvere con i CC , prima di provare ad affrontarlo  controlla se c’è già una soluzione disponibile su GitHub o CodePen.

Mantieni la specificità del selettore bassa
Quando gli sviluppatori principianti scrivono CSS, di solito si aspettano che i selettori sovrascriveranno sempre tutto ciò che li sovrasta. Tuttavia, questo non è sempre vero, come abbiamo illustrato nel seguente esempio:

a{
color: #fff;
padding: 25px;
}

a#blue-bott {
background-color: blue;
}

a.active {
background-color: red;
}

Vogliamo essere in grado di aggiungere la classe .active a qualsiasi pulsante per renderlo rosso. In questo caso non funzionerà poichè il nostro pulsante ha un selettore ID ( che ha una specificità più alta ) con un set di colori di sfondo blu  . Questa è la regola :

ID (#id)> Classe (.class)> Tipo

Limitare l’uso di !Important
 !Important rappresenta il più delle volte una soluzione rapida, ma che  potrebbe finire per causare un sacco di riscritture in futuro. La cosa corretta da fare è scoprire perché il selettore CSS non funziona e apportare le corrette modifiche.

L’unica volta in cui è accettabile !Important  nelle regole CSS è quando si vuole sovrascrivere gli stili inline, che rappresenta di per sé è un’altra cattiva pratica da evitare.

Kenji Agency : realizzazione  siti web a Treviso

element-footer-realizzazione-siti-web-treviso

HTML : -Footer

Per un lungo periodo eravamo abituati a vedere <div id = “-footer”> nella parte inferiore delle pagine Web, ma con l’introduzione di HTML 5 è stato introdotto il nuovo elemento <footer> .  Tuttavia le specifiche sono in continua evoluzione e nel frattempo il modello per l’elemento footer è stato modificato per consentire il contenuto di sezioni come header o nav. Ora il funzionamento risulta molto simile all’elemento header . Tuttavia, è importante notare che il footer non introduce una nuova sezione.

Secondo le specifiche
L’elemento footer rappresenta un piè di pagina . In genere un footer contiene informazioni sulla sua sezione, ad esempio chi lo ha scritto, collegamenti a documenti correlati, dati sul copyright e simili. Quando ci si riferisce al footer, questo è il markup appropriato : <footer>

<Footer>
<Ul>
<Li> copyright </ li>
<Li> mappa del sito </ li>
<Li> contatto </ li>
<li> all’inizio </ li>
</ Ul>
</ footer>

Originariamente l’elemento <footer> veniva utilizzato una sola volta all’interno delle pagine, ma con l’introduzione delle nuove specifiche il <footer>  ora può essere utilizzato più volte, per esempio alla fine di una sezione o per visualizzare informazioni extra. Potremmo quindi avere:

<Section>
Il contenuto della sezione viene visualizzato qui.
<Footer>
Informazioni sul piè di pagina per la sezione.
</ footer>
</ Section>

<Article>
Il contenuto dell’articolo viene visualizzato qui.
<Footer>
Informazioni sul piè di pagina per l’articolo.
</ footer>
</ Article>
Conclusione
L’elemento footer offre la possibilità di definire pagine Web con il corretto markup semantico . E’ però fondamentale utilizzare questi nuovi tag per come sono stati concepiti; senza abusarne come è avvenuto con tabelle e div.

Kenji Agency : realizzazione  siti web a Treviso

flexbox-realizzazione-siti-web-treviso

CSS Tecniche Flexbox – 1 parte

Tecniche Flexbox – Parte 1

Flexbox è uno standard CSS ottimizzato per la progettazione di interfacce utente. Utilizzando le varie proprietà di Flexbox possiamo costruire la nostra pagina partendo da piccoli elementi  che possiamo posizionare e ridimensionare senza difficoltà in qualsiasi modo desideriamo. I siti Web e le app realizzate in questo modo sono responsivi e si adattano bene a tutte le dimensioni dello schermo e dei dispositivi.

In questo prima analisi daremo un’occhiata a tre approcci Flexbox per risolvere alcuni problemi  ricorrenti  nei layout CSS .

Colonne di altezza uguale
La soluzione a questa problematica potrebbe essere quella di ipostare l’altezza minima uguale per entrambi ma una volta che la quantità di contenuti nelle colonne inizia a differire, alcuni di essi cresceranno e altri rimarranno più brevi. La risoluzione di questo problema con flexbox non potrebbe essere più semplice, poiché le colonne create in questo modo hanno uguali altezze per impostazione predefinita. Tutto quello che dobbiamo fare è inizializzare flexbox con le proprietà flex-direction  e  align-items abbiano i loro valori predefiniti.

.container {
    /* Inizializzazione flex model */
    display: flex;      
    flex-direction: row;    /* Posizionamento orizzontale elementi */
    align-items: stretch;   /* Elementi a tutta altezza */
}

Riordinamento degli elementi
Un po ‘di tempo fa, se avessimo dovuto modificare dinamicamente l’ordine di alcuni elementi, probabilmente avremmo fatto con JavaScript. Con flexbox, tuttavia, questo compito si riduce all’utilizzo di una singola proprietà CSS: order .

Order ci consente di scambiare la sequenza in cui gli elementi appaiono sullo schermo. Si tratta di un numero intero che determina la posizione di quell’elemento: i numeri più bassi indicano una priorità più alta.
La proprietà dell’ordine ha molti usi pratici ma risulta essenziale nella ricostruzione del layout per media diversi.

Centratura orizzontale e verticale
La centratura verticale nei CSS è uno di quei problemi mai veramente risolto e che presenta una quantità infinita di soluzioni diverse; ma la maggior parte per tabelle  ( che non sono progettate per creare layout ). Flexbox offre una soluzione più semplice al problema. Ogni layout flessibile ha due direzioni (asse X e asse Y) e due proprietà separate per il loro allineamento. Centrandoli entrambi possiamo posizionare qualsiasi elemento proprio nel mezzo del suo contenitore .

Kenji Agency : realizzazione  siti web a Treviso

css-realizzazione-siti-web-treviso

Come scrivere CSS – parte 2

Oggi passiamo alla seconda parte di ” Come scrivere CSS ” . Alcuni interessanti e anche utili suggerimenti su come migliorare leggibilità e scrittura del nostro css.

Immagini come sfondo
Quando aggiungi immagini al tuo design, specialmente se sarà responsivo, usa un tag <div> con la proprietà CSS di background anziché gli elementi <img>.

Potrebbe sembrare del lavoro in più senza un vero vantaggio, ma in realtà rende più semplice la gestione delle immagini, mantenendo dimensioni e proporzioni originali, grazie alle proprietà background-sizebackground-position ( ed altre ).
Uno svantaggio di questa tecnica è l’accessibilità al web  in quanto le immagini non verranno scansionate correttamente dai lettori e motori di ricerca. Questo problema può essere risolto con object-fit ma non ha ancora il supporto completo di tutti i browsers.

Eliminare doppi bordi nelle tabelle
Spesso le tabelle in HTML sono impossibili da rendere responsive  e nel complesso difficili da stilizzare. L’aggiunta di bordi spesso crea delle ripetizioni e un modo rapido  per rimuoverle tutte è utilizzare la proprietà  border-collapse: collapse .

Scrivere commenti migliori
Alcuni semplici commenti sono sufficienti per organizzare un foglio di stile e renderlo più accessibile ai tuoi colleghi o a te stesso in future manutenzioni.

Per sezioni di  componenti principali o query multimediali, utilizzare un commento stilizzato :

/*---------------
    #Header
---------------*/

Componenti meno importanti possono essere contrassegnati con un commento a riga singola.

/*   Footer Buttons   */
.footer button { }

kebab-case
I nomi delle classi e gli id ​​devono essere scritti con un trattino (-) quando contengono più di una parola. Il CSS non fa distinzione tra maiuscole e minuscole, quindi il camelCase non è un’opzione. I caratteri di sottolineatura non erano supportati, mentre ora lo sono e ciò ha reso i trattini la convenzione predefinita.

/* Sì*/
.footer-column-left {}  .footer_column_left {}

/ * No * /
.footerColumnLeft {}

Non duplicare regole: evitare la ripetizione e usare l’eredità .
I valori per la maggior parte delle proprietà CSS vengono ereditati dall’elemento un livello in alto nell’albero DOM, da cui il nome Cascading Style Sheets. Prendiamo ad esempio la proprietà font: è quasi sempre ereditata dal genitore, non è necessario impostarla di nuovo separatamente per ogni singolo elemento della pagina. È sufficiente aggiungere gli stili di carattere che saranno più prevalenti nella progettazione all’elemento <html> o <body> e lasciarli scorrere verso il basso. In seguito puoi sempre modificare gli stili per ogni dato elemento.

Kenji Agency : realizzazione  siti web a Treviso

php-libraries-realizzazione-siti-web-treviso

7 utili librerie PHP

Elenchiamo di seguito alcune librerie PHP che possono diventare utili per i nostri progetti, ottimizzando tempi di sviluppo.

Monolog
Con Monolog si possono creare sistemi di registrazione avanzati inviando i  log a file, socket, database, caselle di posta o altri servizi web. La libreria  può essere integrata in framework come Laravel, Symfony2 e Slim.

PHPExcel
Si tratta di un set di classi PHP che consentono agli sviluppatori di implementare facilmente operazioni di modifica di un foglio di calcolo nelle proprie app. La libreria può leggere e scrivere documenti  in una serie di formati  tra cui Excel, OpenDocument , CSV.

Opauth
Libreria per consentire agli utenti di autenticarsi tramite il proprio account nei social network o altri servizi. Sono disponibili: Google, Facebook, Twitter, Github, Instagram, LinkedIn. Opauth è supportato da molti framework PHP, quindi può essere facilmente integrato nella maggior parte delle vostre applicazioni PHP.

Whoops
Whoops migliora l’attività di debug in PHP visualizzando una pagina dettagliata sul problema sorto in fase di compilazione. Ci  viene fornita la traccia completa dello stack con  i frammenti di codice specifici che hanno causato l’eccezione; evidenziati nella sintassi e colorati. Il framework Laravel viene fornito con Whoops built-in.

FastCache
L’implementazione di questa libreria nella cache nelle tue app PHP garantisce il caricamento più rapido e riduce la quantità di query inviate al database. . In questo modo se hai la stessa query ripetuta più volte, una volta caricata dal DB verrà servita direttamente dalla cache.

Munee
Munee combina le diverse richieste CSS o JavaScript in una sola, ridimensiona le immagini,  e comprime i file in Gzip. Tutti questi file vengono memorizzati nella cache sia lato server che lato client per prestazioni ottimali.

Goutte
Goutte è un Web Scraper in grado di eseguire la scansione di siti Web e di estrarre da essi dati HTML o XML. Funziona inviando una richiesta a un dato URL e restituendo un oggetto Crawler, che consente allo sviluppatore di interagire con la pagina remota in vari modi.

Kenji Agency : realizzazione  siti web a Treviso

css-realizzazione-siti-web-treviso

Come scrivere CSS – parte 1

In questo post vogliamo condividere con voi alcune utili convenzioni e best practice raccomandate dalla comunità CSS. Alcuni suggerimenti sono per i principianti, altri per più esperti.

Attenzione al margine di collasso
A differenza della maggior parte delle altre proprietà, i margini verticali collassano quando si incontrano. Ciò significa che quando il margine inferiore di un elemento tocca il margine superiore di un altro, solo il più grande dei due rimane. Alcune strutture di Boostrap 4 sono state ridisegnate in base a questo comportamento.

Utilizzare Flexbox per i layout
Il modello di flexbox esiste per una ragione. Floats e blocchi inline funzionano, ma sono principalmente strumenti per lo styling di documenti, non di siti Web. Flexbox  è stato specificamente progettato per semplificare la creazione di qualsiasi layout . L’insieme di proprietà fornite con il modello flexbox offre agli sviluppatori una grande flessibilità . Il supporto dei browser al giorno d’oggi è quasi perfetto. Se però abbiamo la necessità di mantenere la compatibilità con i vecchi browsers ( es. IE9 ) meglio optare per floats e blocchi inline.

Fai un reset CSS
Sebbene la situazione sia notevolmente migliorata nel corso degli anni, ci sono ancora molte varianti nel modo in cui si comportano i diversi browsers. Il modo migliore per risolvere questo problema consiste nell’applicare un reset CSS che imposta valori predefiniti per tutti gli elementi; consentendo di iniziare a lavorare su un foglio di stile pulito. Ci sono librerie come normalize.css che lo fanno molto bene. Se non vuoi usare una libreria, puoi fare un semplice CSS  reset in questo modo:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
 }

Border-box per tutti
La maggior parte dei principianti non conosce la proprietà di dimensionamento del box.

content-box (default) – Quando impostiamo una larghezza / altezza su un elemento, questa è solo la dimensione per il suo contenuto. Per esempio se un <div> ha una larghezza di 100 e un padding di 10, il nostro elemento occuperà 120 pixel (100 + 2 * 10).

border-box – Il padding e il bordo sono inclusi in larghezza / altezza. Il nostro <div> con la proprietà border-box; avrà una larghezza di 100 pixel, indipendentemente dall’aggiunta di padding o bordi.
Impostare border-box su tutti gli elementi rende molto più semplice operare con i css.

Kenji Agency : realizzazione  siti web a Treviso

angular-2-realizzazione-siti-web-treviso

Angular 2 : risorse officiali

Angular 2 ha una struttura vasta e complessa con una curva di apprendimento non proprio breve. Per fornirvi un quadro delle sue numerose funzionalità, abbiamo creato un elenco di 5 risorse di apprendimento gratuite  – dalla guida rapida a dettagli specifici e alle best practices. Passiamo in rassegna rapidamente le guide e le esercitazioni disponibili sul sito web ufficiale di Angular. Inoltre in rete si possono reperire svariate altra documentazione e risorse .

QuickStart (versione di TypeScript)
Le app Angular2 possono essere scritte in TypeScript, Dart o vanilla JavaScript. Esistono versioni separate dei documenti ufficiali per ogni linguaggio, ma quella di TypeScript è di gran lunga più dettagliata. Questo sarà il punto di partenza per la maggior parte dei principianti di Angular2. Include la configurazione di un ambiente di lavoro e l’esecuzione di un’app di base Hello World.

QuickStart (versione JavaScript di Vanilla)
Si tratta di una versione molto più semplice della precedente. Poiché è stato scritto per vanilla JavaScript, questo tutorial non richiede un ambiente di lavoro complesso e relativa configurazione e punta direttamente al framework e ad alcuni dei suoi concetti principali.

Il tour degli eroi
Il tour degli eroi è un tutorial  più dettagliato di QuickStart. Passa attraverso il processo di creazione di un’applicazione per pagina singola, passo dopo passo, coprendo molte delle caratteristiche di Angular 2 ( assolutamente da sapere ).

Documentazione avanzata
Qui il team di Angular offre oltre 15 tutorial che approfondiscono un argomento chiave: animazioni , il ciclo di vita dei componenti, il router di navigazione e molte altre funzionalità di base.

Cookbook
Una raccolta di esempi di codice e soluzioni rapide a problematiche ricorrenti. Possiamo trovare una tabella comparativa tra Angular 1 e 2, una sezione FAQ su NgModules e soluzioni per la convalida dei moduli .

Kenji Agency : realizzazione  siti web a Treviso

element-header-realizzazione-siti-web-treviso

HTML : header

In questa serie di articoli dedicati all’HTML, scopriremo come e quando utilizzare i vari elementi e tag. Iniziamo con l’  < header > .

Secondo la specifica HTML l’header rappresenta l’elemento che identifica l’intestazione  o il contenuto introduttivo  È importante notare che l’elemento <header> non introduce una nuova sezione ma è a capo di una sezione ( da non confondere con l’elemento <head>).

Dove usare l’elemento 

Generalmente all’inizio della pagina. Possiamo iniziare con qualcosa  che include l’intestazione della pagina principale:Header ><h1> L’intestazione più importante in questa pagina </ h1> <p> Con alcune informazioni supplementari </ p> </ Header > . Un punto importante da notare è che non si è obbligati a utilizzare un solo elemento <header> per sito. Si  possono usere più intestazioni, ognuna delle quali diventerà l’intestazione per quella sezione del documento.

Cosa è richiesto nell’elemento 

Cosa deve avere all’interno l’elemento per poter essere validato? In breve, un <header> in genere contiene almeno un tag di intestazione (<h1> – <h6>). L’elemento può contenere anche altri contenuti come un indice, un logo o un modulo di ricerca. Dopo una recente modifica alle specifiche è ora possibile includere l’elemento <nav>  ( per definire delle voci di menu o navigazione ) all’interno di <header>.

Conclusione

In sintesi <header> fornisce un fondamentale valore semantico  per descrivere la testata di un documento o di una sezione.

Kenji Agency : realizzazione  siti web a Treviso

Minify-CSS-i-JS-creazione-siti-web-treviso

Brackets Minifier: minimizzare JS e CSS

Brackets è un editor di codice open source sviluppato originariamente da Adobe. Si tratta di un editor leggero  ma  completo  per gli sviluppatori front-end  e web designer . È un editor di codice e testo completamente ottimizzato per HTML, CSS e JS.

Se lavori con Bracketspuoi estendere le funzionalità di questo editor  con l’aiuto delle estensioni. Una di queste estensioni è  il Minifier che ti consente di minimizzare i file JavaScript e CSS con facilità . I vantaggi della  minificazione sono consolidati e conosciuti :  accelerare l’esecuzione del codice e migliorandone la sua funzionalità generale;  riducendo allo tempo stesso i tempi di caricamento. Oltre a questa vi sono molte altre estensioni gratuite che potete trovare nel repository di GitHub .

Kenji Agency : creazione  siti web a Treviso

4-TIPS-FOR-YOUR-WEB-DESIGN-creazione-siti-web-treviso

Progettazione del sito – Suggerimenti

Una cosa che deve essere sempre ricordata quando si progetta o si gestisce il design di un sito web è la composizione. La composizione è essenzialmente il modo in cui si sceglie di organizzare  gli elementi di una pagina e come interagiscono tra loro ( creando effetti piacevoli o contrasti da eliminare ).
Ecco quindi alcuni suggerimenti su come ottimizzare la composizione ( progettazione ) del tuo sito:

Colore
Qualunque sia il colore che scegli di utilizzare dovresti emozionare. Non c’è una regola, ma in generale, i colori vivaci trasmettono energia, mentre le tonalità più scure creano un tono formale e contemplativo.
L’uso del colore può essere utilizzato per attirare l’attenzione di un visitatore su una determinata parte della pagina, per esempio una  CTA (Call to Action).
Scegliere la giusta combinazione è un lavoro che, come la progettazione di un layout, dovrebbe fare un grafico esperto di comunicazione.

Mappe di calore
Ottimizzare il posizionamento di elementi chiave nelle pagine del sito in base a tecniche di eye-tracking  ci permette di aumentare le conversioni.  Il tutto avviene tramite l’utilizzo di software che tracciano il comportamento dell’utente quando esplora le pagine online. La maggior parte delle persone che visita un sito trascorre più tempo a cercare  le informazioni necessarie  in alto a sinistra e il minimo in basso a destra. Altre invece  sono guidate puramente dal design . Comprendere ciò diventa strategico su come riorganizzare i contenuti.

Spazio negativo
Lo spazio bianco, a volte indicato come ‘spazio negativo’ è essenziale per definire  le gerarchie dei contenuti . Evitare di riempire ogni pixel dello schermo con immagini, widget
e testo.

Kenji Agency : creazione  siti web a Treviso

aggiornamento-sito-web-creazione-siti-web-a-treviso

Manutenzione parte 3 : 5 suggerimenti

Proseguiamo e concludiamo il nostro articolo su come operare periodicamente la manutenzione del sito web  con gli ultimi 5 suggerimenti da seguire per mantenerlo regolarmente aggiornato

6) Essere attivi e presenti nei social network
Tutte le aziende moderne fanno molto affidamento sulla presenza nei social network. Il tuo sito web deve essere linkato dai tuoi account social , come Facebook, Instagram o Twitter. Una volta collegato il tuo sito web ai tuoi profili di social media, si dovrebbero pubblicare contenuti condivisi in entrambi le piattaforme, utilizzando i plugin o widget messi a disposizione dal cms  che visualizzano i feed dai social network sul tuo sito web.

7) L’attenzione per  le immagini
Le immagini sono un componente importante di ogni pagina del sito, soprattutto nella home page. Le statistiche indicano che se le immagini che compongono il layout della home sono accattivanti allora l’ospite passa alla lettura dei testi. E’ considerata buona pratica sostituire qualche immagine con altre di qualità, fornendo un’idea di dinamicità e di contenuti sempre nuovi.

8) Monitorare Analytics ed valutare test di usabilità
Eseguire controlli sulle pagine con una maggior frequenza di rimbalzo  cercando di capire come ristrutturarle per renderle più accattivanti e fare un paio di test sull’usabilità dell’intero sito sono di norma operazioni fondamentali per non perdere di vistale reali necessità dei clienti che visitano il nostro sito e cercano delle risposte.

9) Ecommerce con prodotti aggiornati
Se gestisci un ecommerce assicurati che le informazioni dei prodotti siano aggiornate: Il numero di prodotti disponibili, varianti di prodotto.

10) Mantieniti in linea con le ultime tendenze del Web design
Per aggiornare il design del tuo sito web puoi affidarti ad un designer e riprogettare il sito web oppure utilizzare un tema premium. Spesso la seconda è la scelta più economica e consente di svecchiare l’immagine. E’ anche vero però che molto spesso i temi, dovendo rispondere a più necessità, inglobano plugin e codice non necessario causando tempi di caricamento più lunghi.

Conclusioni
L’aggiornamento del sito è fondamentale sia dal punto di vista tecnico che estetico. Effettuare regolari controlli e correzioni tecniche e modernizzare il design una volta ogni due anni costantemente non potrà che fornire un’immagine positiva  della tua attività.

Kenji Agency : creazione  siti web a Treviso

stockio-creazione-siti-web-treviso

FreePhotos Stock

Se sei alla ricerca di un banca dati di immagini gratuite per il tuo sito web o altri progetti, FreePhotos  ti consente di scaricare tutte le foto di cui hai bisogno.

Le immagini sono classificate in categorie e rese disponibili per chiunque:

Business – Office – Food – People – Flowers – Computer – Sky – Car – Dog  – Coffee  – City – Nature – Family –  Music –

Le foto sono di buona qualità, ma per poterle scaricare è necessaria la registrazione. E’ presente pure un editor per modificare le immagini.

wordpress-creazione-siti-web-a-treviso

Affidarsi a WordPress

Progettare e sviluppare un sito Web per piccole imprese, garantendo caratteristiche pari alle imprese di grosse dimensioni, può risultare difficili se non impensabile . Eppure non sempre è cosi, se ci affidiamo a un CMS professionale come WordPress.Nonostante il numero elevato di temi a pagamento che ne hanno aumentato le installazioni a basso costo ( con risultati spesso non accettabili in termini di lentezza ) , se usato in modo serio e  professionale ci consente di ottenere un prodotto di elevata qualità mantenendo costi ” accettabili ” anche per lo small business.Vediamo alcuni punti per i quali dovremmo affidarci a questo CMS:

Blog incluso

Commentare ed interagire con il sito garantisce un ottimo contatto con la clientela creando una sorta di collegamento tra produttore e cliente. WordPress è uno strumento ideale per costruire un blog.

WordPress è costantemente aggiornato

WordPress vanta una community di sviluppatori e utilizzatori molto cospicua che garantisce  sicurezza ed affidabilità. Gli aggiornamenti che si susseguono periodicamente garantisco l’adesione agli standard più recenti.

Open source

Il concetto di “Open Source”, consente di usare il core di WordPress liberamente per contribuire al progetto realizzando plugin e  temi . Questa è la vera forza di questo CMS poichè l’elevato numero di plugin realizzati consentono di implementare svariate caratteristiche addizionali, solitamente ad appannaggio di aziende di grandi dimensioni.

 SEO-friendly

Sebbene la SEO sia un’insieme di tecniche  complicate, WordPress pottimizza molti dei compiti SEO. L’esempio più lampante è il plugin Yoast SEO, tra i più utilizzati per svolgere queste funzioni.

Standard de facto.

Costruire  il proprio sito con WordPress, garantisce  la possibilità che ogni web developer possa intervenire apportando modifiche, aggiornamenti o addirittura  modificando completamente il layout.  WordPress è ormai diventato uno “standard”.

Kenji Agency : creazione  siti web a Treviso

free-icons-creazione-siti-web-a-treviso

Icone gratuite

Vi presentiamo alcuni  pacchetti di icone gratuite per sviluppatori Web.

L’aggiunta delle icone ai nostri progetti può portare chiarezza nell’interfaccia utente, guidando  gli utenti attraverso la pagina in maniera veloce e intuitiva.

Abbiamo raccolto alcuni dei pacchetti di icone più utilizzati nel web. Si possono trovare, a seconda delle necessità, font di icone normali, SVG e icone CSS. Diamo una rapida occhiata ai pro e contro di ogni tipo:

Font di icone
I caratteri icona funzionano bene quando si utilizza un numero elevato di icone. Sono monocromatici e adatti a rappresentare per forme semplici. Questi caratteri vengono considerati testo dai browser e sono supportati in quasi tutti i browser.

Icone SVG
Scalable Vector Graphics (SVG) è un formato di grafica vettoriale basato su XML che può ridimensionarsi in qualsiasi dimensione senza perdere risoluzione. Possono essere visualizzati tramite CSS o direttamente inline nel codice HTML. Gli SVG sono supportati nei browser moderni, ma mancano il supporto nelle versioni precedenti di IE .

Icone CSS
Le icone CSS sono più efficaci ( per piccole quantità ). Si tratta semplicemente di copiare  il relativo CSS dell’icona  nel foglio di stile del  progetto. Non sono raccomandati se hai intenzione di usare un gran numero di icone.

https://fontawesome.com/icons?from=io

https://octicons.github.com/

https://feathericons.com/

http://www.linea.io/

http://glyph.smarticons.co/

Kenji Agency : creazione  siti web a Treviso

graphql-creazione-siti-web-a-treviso

GraphQL Tutorial

NTRODUZIONE
GraphQL è una delle tecnologie più interessanti in ambito scambio dati tra web server. Le API GraphQL rappresentano una valida alternativa alle API RESTful e forniscono un modo molto più succinto ed espressivo per leggere e scrivere dati relazionali tra client e server.

In breve GraphQL è un linguaggio di query che offre un modo compatto per leggere e scrivere dati relazionali tra il client e il server. Consente agli sviluppatori di richiedere  informazioni esatte senza ricevere alcun dato non necessario.

In questo articolo elenchiamo  alcune  risorse utili per l’apprendimento . Le lezioni sono suddivise in 3 categorie, a seconda della tua esperienza e conoscenza con il nuovo linguaggio di query.

Base:  https://www.jobstart.com/posts/graphql-tutorial-getting-started

Intermedio:  https://blog.codeship.com/an-introduction-to-graphql-via-the-github-api/

Avanzato: https://blog.rangle.io/from-rest-to-graphql/

Kenji Agency : creazione  siti web a Treviso

aggiornamento-sito-web-creazione-siti-web-a-treviso

Manutenzione parte 2 : 5 suggerimenti

5 suggerimenti da seguire per mantenere regolarmente aggiornato il sito Web
Di seguito, troverai i 5 consigli più utili per mantenere il tuo sito web regolarmente aggiornato. Questi suggerimenti rappresentano tutti e tre i vettori di manutenzione del sito Web, quindi non ti perderai nulla se li segui. Vediamo cosa abbiamo qui.

1) Elimina l’aspetto dei collegamenti interrotti
I collegamenti interrotti rendono impossibile accedere ad alcune pagine del tuo sito web e comportare “delusione” da parte degli ospiti del sito. I siti web con collegamenti interrotti sono minimizzati dai motori di ricerca in modo che un minor numero di persone inciampi su collegamenti interrotti.

2) Aggiornare regolarmente il motore del sito web e i plugin
Mantenere aggiornato il software sul tuo sito Web è una degna preoccupazione. Se si esegue un sito Web con l’aiuto di un CMS (Content Management System) o un motore di e-commerce, è necessario aggiornare il motore una volta rilasciata la versione più recente.

3) Avere un blog frequentemente aggiornato
Prima di tutto, va detto che il tuo sito web ha bisogno di una sezione blog. Anche se gestisci un sito di e-commerce, hai bisogno di una sezione blog per rendere il tuo sito più coinvolgente e per migliorare la tua posizione nei risultati di ricerca dei motori di ricerca.

4) Assicurati che il tuo contatto e le informazioni personali siano aggiornate
I tuoi clienti dovrebbero sempre essere in grado di contattarti. Questa è una regola del pollice. Col passare del tempo, alcuni dei tuoi dati di contatto potrebbero cambiare. Tieni presente che in questo caso, devi aggiornare le informazioni sul tuo sito web il prima possibile.

5) Post New Testimonials
Non essere pigro per condividere grandi cose che la gente dice di te. Le testimonianze fresche non sono assolutamente una cosa da dimenticare. Non appena ne hai uno o una coppia, presentali al pubblico e la gente si fiderà di te di più.

Kenji Agency : creazione  siti web a Treviso

firaSans-creazione-siti-web-treviso

Fira Sans

Fira Sans è una nuova famiglia di font gratuita originariamente progettata come carattere per il sistema operativo Mozilla. La famiglia di font gratuiti Fira Sans comprende 16  variazioni in 2 stili, romano e corsivo .

Kenji Agency : creazione  siti web a Treviso