Utility per web designer

In questo articolo illustrerò una serie di web utility che semplificheranno sicuramente la vostra vita di web designer! Testare la velocità di caricamento delle pagine, assicurarsi che il sito sia compatibile su tutti i browser, scegliere una palette di colori che sia stilisticamente corretta... tutte operazioni che potrebbero richiedere molto tempo e che, invece, vengono automatizzate!

Lorem Ipsum Generator

A quanti web designer è capitato di dover progettare un sito ma di non disporre ancora del testo definitivo da includere?! Quanti di voi sono stati costretti ad inventare ridicoli frasi da ripetere automaticamente o quanti sono andati a copiare il famoso 'Lorem Ipsum' in giro dalla rete? Il sito Lorem Ipsum Generator viene incontro alle vostre esigenze con semplicità. Una volta aperto il sito vi basterà scegliere il numero di paragrafi da generare e il gioco è fatto. Per conoscere tanti altri generatori vi rimando a questo articolo su DesignModo. Inoltre vi ricordo che esistono anche delle estensioni per Dreamweaver che vi renderanno ancor più veloce questa operazione.

Scegliere i colori giusti

Molte volte associare le giuste tonalità di colore può essere problematico, sopratutto per chi non ha un gusto grafico definito. Il sito che viene incontro a questa necessità è senza dubbio Colour Lovers. Attraverso questo portale possiamo scegliere tra migliaia di palette già create dagli utenti oppure generare la nostra palette personalizzata. Le palette, inoltre, sono divise per categorie ed è possibile ricercarle attraverso numerose chiavi.

Essere accessibili

Rispettare gli standard web è fondamentale per costruire determinate tipologie di siti, specialmente quelli istituzionali che necessitano una compatibilità ampia. Su LAU (Laboratorio di Accessibilità e Usabilità) potete trovare una serie di interessanti articoli per rispettare tutte le regole del caso: dagli standard di sviluppo dell'Unione Europea al rispetto delle proporzioni video, dai supporti per non vedenti alle normative di progettazione per siti comunali e regionali.

Formattare il codice JavaScript

JsBeautifier ci permette di identare, secondo uno stile predefinito o personalizzato, il nostro codice JavaScript. Questo ottimo e performante strumento online risulta ancor più utile quando si tratta di scompattare i così detti file minified, ovvero i codici JavaScript compressi. È possibile, inoltre, scaricare le estensioni per i principali browser sul mercato.

Test della velocità

I tempi di caricamento devono essere sempre ridotti al minimo per essere sicuri che la noia dell'attesa non inibisca la curiosità e la sete di informazioni del navigatore. Per testare i tempi di caricamento su qualsiasi connessione potete usare il portale SitePerf. Le statistiche fornite sono relative al numero dei documenti complessivi, ai documenti trovati, ai documenti accessibili e alle grandezze dei singoli file: un semplice grafico ed un'ottima legenda offrono dati chiari e facilmente consultabili.

Test HTML5 

Scommetto che molti di voi si sono buttati a capofitto nel nuovo linguaggio di markup HTML5. Spero pero che sappiate che molte delle nuove funzionalità di questo linguaggio non sono supportate universalmente da tutti i browser. Per sapere il supporto specifico che ogni software è in grado di fornire al nostro codice testatelo su HTML5 Test.

Test Responsive

Avete in mente di progettare un sito responsive ma volete visualizzare un'anteprima del progetto sulle varie risoluzioni? Questo sito, allora, è ciò che fa per voi! Provate le 5 risoluzioni dei dispositivi principali sul mercato semplicemente inserendo l'URL del vostro lavoro.

Cross Browser

Progettate un sito, lo visualizzate in anteprima sul vostro browser ma, una volta caricato, il vostro cliente con Windows 98 e Internet Explorer 6 vede un ammasso di sezioni indistricabili e non correttamente disposte. Com'è possibile? I Browser non agiscono sempre seguendo le stesse regole! Attraverso Browser Shoot potete caricare il vostro sito e testarlo su qualsiasi sistema operativo e sui più disparati browser: da Opera a Firefox, da Chrome a SeaMonkey, da Epiphany a Konqueror in tutte le loro principali versioni. Tool indispensabile!

Read More

Creare un login sicuro con PHP e MySQL pt. 4/4

Cari lettori, benvenuti nella quarta ed ultima parte di questo articolo. Vi ricordo che potete trovare la precedente parte del tutorial a questo indirizzo e, inoltre, ribadisco per l'ennesima volta il nostro intento: Il tema centrale del tutorial proposto non è tanto la grafica, che potrete ovviamente modificare e personalizzare a vostro piacimento, ma la sicurezza! Vedremo, infatti, i migliori metodi per criptare le password, per resistere ai brute force e per difenderci dalle SQL injection. In quest'ultima parte, a fine articolo, troverete il codice sorgente intero!

Il Javascript

La prima cosa sulla quale ci viene in aiuto il JavaScript è la criptazione della password. Implementeremo, infatti, l'algoritmo di hash denominato sha512 per inviare le password tra il client ed il server in maniera non leggibile. L'algoritmo sha512 può essere liberamente scaricato da pajhome.org.uk

Completato questo passaggio possiamo proseguire creando il file form.js che conterrà il seguente codice:

function formhash(form, password) {
   var p = document.createElement("input");
   form.appendChild(p);
   p.name = "p";
   p.type = "hidden"
   p.value = hex_sha512(password.value);
   password.value = "";
   form.submit();
}

L'HTML 

Tutto ciò che dobbiamo creare in HTML è un modulo con due campi di testo, denominati rispettivamente "e-mail" e "password". Il Javascript creato poc'anzi andrà, quindi, a generare un hash della password inserita nell'apposito campo.

<script type="text/javascript" src="sha512.js"></pre>
<script src="forms.js" type="text/javascript"></script>
<form action="process_login.php" method="post" name="login_form">
Email: <input name="email" type="text" /><br />
Password: <input id="password" name="password" type="password" /><br />
<input onclick="formhash(this.form, this.form.password);" type="button" value="Login" />

Proteggere le pagine private

L'ultimo, ma fondamentale, passaggio che rimane è controllare se l'utente è autenticato prima di accedere ad ogni pagina privata. Il seguente codice PHP, infatti, andrà inserito in ogni pagina che desiderate rendere privata. 

// N.B. i file da includere come functions.php e connects_db.php vanno qui!
sec_session_start();
if(login_check($mysqli) == true) {
 
   // Qui va in inserito l'intero contenuto della tua pagina protetta
 
} else {
   echo 'Spiacente, ma non sei autorizzato a visionare il contenuto di questa pagina. 
';
}

CONCLUSIONI E SORGENTI 

Prima di decretare questo articolo ufficialmente chiuso vi lascio alcune importanti considerazioni:

• Non utilizzare mai il metodo di crittografia md5. È considerato ufficialmente non sicuro. Per maggiori informazioni vedi su wikipedia.
• Potete ovviamente personalizzare il form di login in HTML con le dovute classi CSS
• Potete adattare, con pochi accorgimenti, questo script ad altri tipi di database quali SQLite e PostgreSQL

Come al solito, per qualsiasi incomprensione o dubbio potete commentare questo articolo o inviarmi un email a noframe@lucapipolo.it. Infine potete effettuare da qui il download completo di tutto il codice sorgente!

Read More

4 strumenti per identificare un font

A chi non è mai capitato di visitare un sito e desiderare intensamente di scoprire quale font è stato utilizzato? Quale grafico o web designer non è mai stato travolto dall'impulso di conoscere ardentemente il nome del font che ci ha colpito? In quest'articolo vediamo come riconoscere i font attraverso 4 utili, e sopratutto free, strumenti online!

What the Font

What the Font è sicuramente il migliore dei siti in circolazione per trovare un font velocemente e con precisione. Vi permette di cercare il font utilizzato caricando un immagine dove è stato impiegato. Il caricamento può avvenire anche attraverso la comoda interfaccia del sito o attraverso un link. Oltre a fornire risultati molto mirati offre anche la possibilità, qualora non si riuscisse ad identificare automaticamente il font, di accedere tramite il forum ad una vasta community dove troverete sicuramente la risposta che cercate! VAI AL SITO

Typophile

Probabilmente Typophile è una delle più grandi communitiy dedicate alla ricerca di font. Il sito offre un forum ben organizzato dov'è possibile caricare l'immagine con il font da individuare e ricevere le risposte da una vasta schiera di esperti. Inoltre le risposte danno priorità ai font gratuiti e, in caso il vostro font non venga trovato, vi forniranno una lista di quelli che si avvicinano maggiormente. VAI AL SITO

Bowfin

Questo sito offre molti strumenti online per aiutarvi a trovare il tipo di carattere rispondendo a domande sulla forma dei glifi del font ricercato. Certamente meno immediato degli altri ma ugualmente utile! VAI AL SITO

Identifont

Simile al precedente Bowfin, questo servizio pone una serie di domande sul tipo di carattere. Ovviamente utilissimo se non si dispone, come negli altri casi, di un immagine da caricare. Il sito stesso sostiene di avere , parole loro, 'informazioni sui tipi di carattere da 534 editori e 143 fornitori.'. Quindi... perché non provare? VAI AL SITO

Read More

Creare un login sicuro con PHP e MySQL pt. 3/4

Benvenuti nella terza parte di questo articolo. Vi ricordo che potete trovare la precedente parte del tutorial a questo indirizzo e, inoltre, ribadisco nuovamente il nostro intento: Il tema centrale del tutorial proposto non è tanto la grafica, che potrete ovviamente modificare e personalizzare a vostro piacimento, ma la sicurezza! Vedremo, infatti, i migliori metodi per criptare le password, per resistere ai brute force e per difenderci dalle SQL injection. Anche in questa terza parte, a fine articolo troverete anche il codice sorgente pronto all'uso!

La pagina process_login.php

In questa pagina andremo, prima di tutto, ad inserire il codice della procedura di login che lavorerà in parallelo con la pagina functions.php. Ecco il file:

include 'db_connect.php';
include 'functions.php';
sec_session_start(); // Inizializziamo la sessione sicura 
if (isset($_POST['email'], $_POST['p'])) {
    $email    = $_POST['email'];
    $password = $_POST['p']; // Passiamo la password criptata
    if (login($email, $password, $mysqli) == true) {
        // Se il login riesce
        echo 'Hai effettuato l\'accesso!';
    } else {
        // Se il login fallisce
        header('Location: ./login.php?error=1');
    }
} else {
    // Se la variabile non viene inviata alla pagina corretta
    echo 'Richiesta non valida!';
}

La pagina logout.php

Immediatamente dopo aver creato la procedura di login, dovremmo occuparci di costruire quella per il logout. La procedura per il logout deve contenere pochi e semplici passaggi: aprire una sessione sicura, distruggerla e redirectare l'utente verso un'altra pagina. Vediamo come:

include 'functions.php';
sec_session_start();
$_SESSION = array();
// prelevo i parametri di sessione
$params   = session_get_cookie_params();
// Cancello i cookie
setcookie(session_name(), '', time() - 42000, $params["path"], $params["domain"], $params["secure"], $params["httponly"]);
// Distruggo la sessione
session_destroy();
header('Location: ./');

La pagina di registrazione 

Il seguente è il codice che dovrete utilizzare nel caso, all'interno di una pagina di registrazione, necessitate di codificare la password.

// Raccolgo la password dal form
$password = $_POST['p']; 
// Creo un salto unico
$random_salt = hash('sha512', uniqid(mt_rand(1, mt_getrandmax()), true));
$password = hash('sha512', $password.$random_salt);
 
// Aggiungo i dati raccolti alla query
if ($insert_stmt = $mysqli->prepare("INSERT INTO members (username, email, password, salt) VALUES (?, ?, ?, ?)")) {    
   $insert_stmt->bind_param('ssss', $username, $email, $password, $random_salt); 
   // Eseguo la query
   $insert_stmt->execute();
}

CONCLUSIONI E SORGENTI

Così anche la terza delle quattro parti di questo tutorial è giunta al termine. Per qualsiasi incomprensione o dubbio potete commentare questo articolo o inviarmi un email a noframe@lucapipolo.it. Potete anche scaricare tutto il codice sorgente da questo link. Alla prossima!

Read More

Finestre modali in HTML5 e CSS3

I box modali sono uno degli strumenti più utilizzati dai web designer. Dalle notifiche ai login form, dalle pubblicità alle gallery, i box modali hanno da sempre un ruolo primario nell'interazione con l'utente. In questo articolo, quindi, vediamo come crearne semplicemente uno in HTML5 e CSS3! Prima di iniziare vi specifico subito i due link più interessanti: dal primo puoi visualizzare un esempio interattivo di quello che andremo a creare mentre, da questo secondo link, potrete effettuare direttamente il download.

L'HTML

Il primo passo per creare la nostra finestra modale è questo breve e semplice codice HTML5.

<a href="#apriBox">Apri il box</a>
<div id="apriBox" class="modalBox">

Sul primo rigo abbiamo creato un semplice link che rimanda all'ID di un div denominato 'apriBox', collegato a sua volta alla classe 'boxModale' dove andremo a specificare le nostre classi CSS.  Il secondo rigo, invece, vede protagonista il div 'apriBox' appena accennato. Al suo interno andrà tutto il contenuto che vogliamo appaia nel box modale. Ad esempio:

<div id="apriBox" class="modalBox">
 <div>
  <a href="#chiudi" title="Chiudi" class="chiudi">X</a>
  <h2>Box Modale</h2>
  <p>Questo è solamente un esempio di box modale</p>
  <p>Populo temporibus eu vix. Maluisset vituperata cu pri, vim dolorem placerat referrentur ex, pri ex oratio graecis appareat. Nisl zril imperdiet id vim, possim deterruisset vis no. Suas vivendo id sed. Omnesque electram eum ei, an amet modus labitur qui. Pri euismod convenire in, principes necessitatibus no has.</p>
 </div>
</div>

Il CSS

Vediamo ora come attribuire una classe CSS per rendere graficamente migliore l'aspetto del nostro box modale. 

.modalBox {
 position: fixed;
 font-family: Arial, Helvetica, sans-serif;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background: rgba(0,0,0,0.8);
 z-index: 99999;
 opacity:0;
 -webkit-transition: opacity 400ms ease-in;
 -moz-transition: opacity 400ms ease-in;
 transition: opacity 400ms ease-in;
 pointer-events: none;
}

Ora che il nostro box modale appare in questa nuova veste fiammante, manca solo un particolare. Il CSS per il pulsante di chiusura, vediamolo:

.chiudi {
 background: #606061;
 color: #FFFFFF;
 line-height: 25px;
 position: absolute;
 right: -12px;
 text-align: center;
 top: -10px;
 width: 24px;
 text-decoration: none;
 font-weight: bold;
 -webkit-border-radius: 12px;
 -moz-border-radius: 12px;
 border-radius: 12px;
 -moz-box-shadow: 1px 1px 3px #000;
 -webkit-box-shadow: 1px 1px 3px #000;
 box-shadow: 1px 1px 3px #000;
}

.chiudi:hover { background: #C90a;}

Ed ora la vera e propria magia. La comparsa del box modale avviene unicamente attraverso l'utilizzo di CSS3. Nello specifico il codice è il seguente:

.modalBox:target {
 opacity:1;
 pointer-events: auto;
}

.modalBox > div {
 width: 400px;
 position: relative;
 margin: 10% auto;
 padding: 5px 20px 13px 20px;
 border-radius: 10px;
 background: #fff;
 background: -moz-linear-gradient(#fff, #999);
 background: -webkit-linear-gradient(#fff, #999);
 background: -o-linear-gradient(#fff, #999);
}

Conclusioni

Adesso che abbiamo creato il nostro box modale possiamo usarlo a nostro piacimento. Possiamo, infatti, utilizzarlo per far apparire pubblicità, login form, avvisi importanti e tanto, tanto altro. Per qualsiasi delucidazione potete contattarmi a noframe@lucapipolo.it. Il codice sorgente di tutto l'articolo è disponibile qui per il download.

Read More

Creare un login sicuro con PHP e MySQL pt. 2/4

Cari lettori, benvenuti nella seconda parte di questo articolo. Vi ricordo che potete trovare la prima parte del tutorial a questo indirizzo e, inoltre, ribadisco nuovamente il nostro intento: Il tema centrale del tutorial proposto non è tanto la grafica, che potrete ovviamente modificare e personalizzare a vostro piacimento, ma la sicurezza! Vedremo, infatti, i migliori metodi per criptare le password, per resistere ai brute force e per difenderci dalle SQL injection. Anche in questa seconda parte, a fine articolo troverete anche il codice sorgente pronto all'uso!

La pagina functions.php

Tutto il codice seguente farà parte di una pagina chiamata functions.php che conterrà, per l'appunto, tutte le funzioni che andremo poi ad includere e richiamare nelle altre pagine del nostro sito.

1. Inizializzare una sessione sicura in PHP
Prima di tutto, chiariamo uno dei concetti fondamentali sulla sicurezza delle sessioni. L'utilizzo della funzione predefinita "session_start ();" nella parte superiore di ogni pagina che si desidera rendere privata, non è sufficiente ad una sicurezza totale! Il metodo più efficace consiste, invece, nel creare una funzione chiamata "sec_session_start", che inizializzerà una sessione sicura in PHP. Anche in questo caso questa funzione andrà richiamata in ogni pagina che vorrete proteggere. Diamo un'occhiata al codice prima di procedere a commentarlo:

function sec_session_start() {
        $session_name = 'sec_session_id'; // Diamo un nome alla sessione
        $secure = false; // Impostate su true se utilizzate l'HTTPS
        $httponly = true; // Questa variabile impedisce al JS di accedere all'ID di sessione
 
        ini_set('session.use_only_cookies', 1); // Forza la sessione ad utilizzare unicamente i cookies
        $cookieParams = session_get_cookie_params(); // Preleva i parametri correnti dei cookies
        session_set_cookie_params($cookieParams["lifetime"], $cookieParams["path"], $cookieParams["domain"], $secure, $httponly); 
        session_name($session_name); // Setta il nome di sessione come dalla variabile
        session_start(); // Inizializzo la sessione
        session_regenerate_id(true); // Rigenero la sessione sovrascrivendo la precedente
}

Questa funzione rende impossibile sovrascrivere l'ID della sessione tramite javascript (ad esempio nel caso di attacco XSS). Infatti la "session_regenerate_id ()" è una funzione che rigenera l'id di sessione ad ogni reload della pagina, aiutando a prevenire il dirottamento di sessione.

N.B. Se utilizzi questo codice su una pagina protetta da HTTPS la variabile '$secure' va settata su true.

2. Il login sicuro

È giunto finalmente il momento di vedere il codice della funzione che si occupa del login vero e proprio.

function login($email, $password, $mysqli)
{
    // Utilizare dichiarazioni pre-formate ci protegge dalle SQL injection 
    if ($stmt = $mysqli->prepare("SELECT id, username, password, salt FROM members WHERE email = ? LIMIT 1")) {
        $stmt->bind_param('s', $email); // Leghiamo il valore dell'email al parametro
        $stmt->execute(); // Eseguiamo la query
        $stmt->store_result();
        $stmt->bind_result($user_id, $username, $db_password, $salt); // preleviamo il risultato
        $stmt->fetch();
        $password = hash('sha512', $password . $salt); // codifichiamo la password con un codice unico
        
        if ($stmt->num_rows == 1) { // Se l'utente esiste
            // Controlliamo che l'utente non abbia effettuato troppi tentativi di accesso
            if (checkbrute($user_id, $mysqli) == true) {
                // Se l'account è bloccato
                // Inviamo un email all'account per avvertirlo
                return false;
            } else {
                if ($db_password == $password) { // Controlliamo la password
                    // Se la password è corretta
                    
                    $ip_address               = $_SERVER['REMOTE_ADDR']; // Preleviamo l'indirizzo IP dell'utente
                    $user_browser             = $_SERVER['HTTP_USER_AGENT']; // Risaliamo al browser utilizzato dall'utente
                    // Seguono i codici per la protezione XSS
                    $user_id                  = preg_replace("/[^0-9]+/", "", $user_id);
                    $_SESSION['user_id']      = $user_id;
                    $username                 = preg_replace("/[^a-zA-Z0-9_\-]+/", "", $username);
                    $_SESSION['username']     = $username;
                    $_SESSION['login_string'] = hash('sha512', $password . $ip_address . $user_browser);
                    // Login effettuato con successo
                    return true;
                } else {
                    // Se la password non è corretta
                    // Registriamo i dati del tentativo nella sessione
                    $now = time();
                    $mysqli->query("INSERT INTO login_attempts (user_id, time) VALUES ('$user_id', '$now')");
                    return false;
                }
            }
        } else {
            // Non esistono utenti
            return false;
        }
    }
}

3. Controllo dei tentativi di brute force

Il brute force, come forse saprete, è una tecnica nella quale il malintenzionato che vuole accedere all'area riservata prova migliaia e migliaia di password generate casualmente o prelevate da un dizionario attraverso un programma automatico. La nostra funzione farà si che, dopo 5 tentativi errati di login, l'utente in questione risulterà bloccato. Vediamo come:

function checkbrute($user_id, $mysqli) {
   // Preleviamo l'orario corrente
   $now = time();
   // Tutti i tentativi di login vengono immagazzinati per 2 ore dal primo tentativo 
   $valid_attempts = $now - (2 * 60 * 60); 
 
   if ($stmt = $mysqli->prepare("SELECT time FROM login_attempts WHERE user_id = ? AND time > '$valid_attempts'")) { 
      $stmt->bind_param('i', $user_id); 
      // Eseguiamo la query
      $stmt->execute();
      $stmt->store_result();
      // Se ci sono stati più di 5 tentativi
      if($stmt->num_rows > 5) {
         return true;
      } else {
         return false;
      }
   }
}

Vi ricordo che altri modi per impedire l'uso del brute force sono: inserire un test CAPTCHA oppure ritardare temporaneamente la possibilità di accedere ad ogni tentativo di login fallito.

4. Controllo dello stato di accesso

Il controllo dello stato di accesso avviene selezionando le variabili di sessione "user_id" e "login_string". La variabile "login_string" ha immagazzinato al suo interno gli IP degli utenti, le informazioni del browser e la password criptata.

function login_check($mysqli) {
   // Controllo che tutte le variabili siano state settate
   if(isset($_SESSION['user_id'], $_SESSION['username'], $_SESSION['login_string'])) {
     $user_id = $_SESSION['user_id'];
     $login_string = $_SESSION['login_string'];
     $username = $_SESSION['username'];
     $ip_address = $_SERVER['REMOTE_ADDR']; // Prelevo l'IP dell'utente. 
     $user_browser = $_SERVER['HTTP_USER_AGENT']; // Prelevo i dati del browser
 
     if ($stmt = $mysqli->prepare("SELECT password FROM members WHERE id = ? LIMIT 1")) { 
        $stmt->bind_param('i', $user_id); // Leghiamo "$user_id" al parametro
        $stmt->execute(); // Eseguiamo la query
        $stmt->store_result();
 
        if($stmt->num_rows == 1) { // Se l'utente esiste
           $stmt->bind_result($password); // Preleviamo la variabile dal risultato
           $stmt->fetch();
           $login_check = hash('sha512', $password.$ip_address.$user_browser);
           if($login_check == $login_string) {
              // Login effettuato con successo
              return true;
           } else {
              // Altrimenti: non loggato
              return false;
           }
        } else {
            // Altrimenti: non loggato
            return false;
        }
     } else {
        // Altrimenti: non loggato
        return false;
     }
   } else {
     // Altrimenti: non loggato
     return false;
   }
}

CONCLUSIONI E SORGENTI

Così si conclude la seconda delle quattro parti di questo tutorial. Per qualsiasi incomprensione o dubbio potete commentare questo articolo o inviarmi un email a noframe@lucapipolo.it. Potete anche scaricare tutto il codice sorgente da questo link. Alla prossima!

Read More

Creare un login sicuro con PHP e MySQL pt. 1/4

Cari amici oggi vi propongo il primo di 4 articoli su come costruire un interessante forma di login in PHP e MySQL. Il tema centrale del tutorial proposto non è tanto la grafica, che potrete ovviamente modificare e personalizzare a vostro piacimento, ma la sicurezza! Vedremo, infatti, i migliori metodi per criptare le password, per resistere ai brute force e per difenderci dalle SQL injection. A fine articolo troverete anche il codice sorgente pronto all'uso!

Impostare il server locale

In questo primo articolo vedremo come configurare il nostro database MySQL e come effettuare una connessione sicura ad esso. Ovviamente vi ricordo, per chi non avesse praticità nel campo della programmazione client/server che, per provare le vostre pagine dinamiche in locale sul vostro pc, necessitate di PHP 5 e di MySQL 4.1.3 o successive release. Se siete utenti OSX vi rimando a questo articolo per effettuare l'installazione di XAMPP, altrimenti se utilizzate Windows, potete seguire questa semplice guida.

Configurare il database MySQL

1. Entriamo nella schermata di phpMyAdmin da uno di questi link.

• http://localhost:8888/phpMyAdmin/
• http://localhost/phpmyadmin
• http://{your-ip-address}/phpmyadmin/

N.B. Vi ricordo che per aprire la schermata di phpMyAdmin dovete avere il server XAMPP avviato! Se non sapete farlo o non lo avete ancora installato leggete la prima parte di questo articolo e seguite le guide nei link!

2. Cliccate sulla scheda SQL per accedere al pannello che ci permette di eseguire query. Vi apparirà una schermata come quella in figura

In questa casella di testo andremo ad inserire il codice per creare il nostro database:

CREATE DATABASE `secure_login` ;

Cliccate su 'esegui' per validare la query.

3. Creiamo un utente che abbia solo i permessi UPDATE, INSERT e SELECT. Questo passaggio impedirà che, nel caso un malintenzionato riesca ad accedere al vostro database MySQL, non avrà i permessi per eliminare o distruggere le vostre tabelle. Il codice per la creazione è il seguente:

CREATE USER 'sec_user'@'localhost' IDENTIFIED BY 'aZz7nmYt';
GRANT SELECT, INSERT, UPDATE ON `secure_login`.* TO 'sec_user'@'localhost';

In questo caso ho configurato i dati dell'utente in questo modo:

        username: sec_user
        password: aZz7nmYt

Ovviamente potete modificare questi dati con quelli di vostro piacimento. L'unico consiglio che vi do è quello di utilizzare password complesse. Per essere sicuri al 100% utilizzate questo generatore casuale online: http://bit.ly/TAZi5r.

4. Creiamo una tabella e denominiamola 'members'.

CREATE TABLE `secure_login`.`members` (
  `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY, 
  `username` VARCHAR(30) NOT NULL, 
  `email` VARCHAR(50) NOT NULL, 
  `password` CHAR(128) NOT NULL, 
  `salt` CHAR(128) NOT NULL
) ENGINE = InnoDB;

Come potete vedere la tabella è formata da 5 campi: id, username, email, password e salt.

5. Creiamo una tabella per memorizzare i tentativi di login per ogni singolo utente. Questo è il modo in cui si bloccheremo i tentativi di attacchi brute force.

CREATE TABLE `secure_login`.`login_attempts` (
  `user_id` int(11) NOT NULL,
  `time` VARCHAR(30) NOT NULL 
) ENGINE=InnoDB

6. Creiamo un utente di prova in questo modo:

INSERT INTO `secure_login`.`members` VALUES(1, 'test_user', 'test@example.com', '00807432eae173f652f2064bdca1b61b290b52d40e429a7d295d76a71084aa96c0233b82f1feac45529e0726559645acaed6f3ae58a286b9f075916ebf66cacc', 'f9aab579fc1b41ed0c44fe4ecdbfcdb4cb99b9023abb241a6db833288f4eea3c02f76e0d35204a8695077dcf81932aa59006423976224be0390395bae152d4ef');

I parametri utilizzati in questo esempio sono:

        username: test_user
        email: test@example.com
        password: 6ZaxN2Vzm9NUJT2y

Creiamo la pagina di connessione al database

Creiamo la prima delle nostre pagine PHP e chiamiamola db_connect.php. Questa conterrà il codice che useremo per la connessione al nostro database mySQL. Ovviamente possiamo includere questo file su qualsiasi pagina che si desidera collegare al database. Il codice da inserire è:

define("HOST", "localhost"); // L'host al quale volete connettervi.
define("USER", "sec_user"); // L'username del database
define("PASSWORD", "aZz7nmYt"); // La password del database
define("DATABASE", "secure_login"); // Il nome del database.
 
$mysqli = new mysqli(HOST, USER, PASSWORD, DATABASE);

CONCLUSIONI E SORGENTI

Così si conclude la prima delle quattro parti di questo tutorial. Per qualsiasi incomprensione o dubbio potete commentare questo articolo o inviarmi un email a noframe@lucapipolo.it. Potete anche scaricare tutto il codice sorgente da questo link. Alla prossima!

Read More

Valide e gratuite alternative a Dreamweaver

Dreamweaver, il noto software di Adobe dedicato ai web designer e ai web developer, è certamente lo strumento perfetto per chi mastica markup e script a colazione. Non tutti però, sopratutto chi lavora freelance, possono accollarsi la spesa di 435,85€ per una licenza originale. E quindi? Quali sono le migliori alternative gratuite? Quale scegliere in mancanza di fondi? Scopriamolo insieme!

1. Sublime Text

Sublime Text è un'alternativa a Dreamweaver tra le meno conosciute ma tra le più complete ed efficaci. Offre, oltre ad un interfaccia chiara e pulita, una serie molto ampia di opzioni e personalizzazioni. Puoi esplorare tutte le features a questo indirizzo: http://bit.ly/Szn9U9.

2. Eclipse

Eclipse è sicuramente un programma più ostico ai newbie, specialmente da chi proviene dalla scuola Adobe, ma in compenso offre un'ottima documentazione, un buon supporto e una buona frequenza di aggiornamenti. Imperfetto per chi fa il designer e si occupa unicamente di CSS e HTML ma veramente performante per chi, come i developer, lavorano in PHP e JavaScript. Testatelo scaricandolo da qui: http://bit.ly/TeFMxO

3. Notepad++

È un potente editor che, come Eclipse, funziona meglio sui linguaggi di programmazione che sul markup. In ogni caso è un programma da provare assolutamente anche se, a mio parere, non è consigliabile per progetti molto grandi e ricchi di file. Scaricalo da qui: http://bit.ly/S4agkl

4. KompoZer

Il punto di forza di questo editor è l'interfaccia - per certi aspetti simile a Dreamweaver - ispirata al concetto WISIWIG, ovvero What You See Is What You Get che tradotto diventa "quello che vedi è quello che è". Personalmente ho utilizzato poche e sporadiche volte questo software ma la comunità, specialmente i Linux User, ne parlano con soddisfazione.

Read More

5 fondamentali API di HTML5

Nonostante l'HTML5, il nuovo linguaggio di markup, si stia diffondendo a macchia d'olio tra i web developer, forse non tutti sono a conoscenza di alcune API - Application Programing Interface - poco diffuse, ma molto utili!

Prima di tutto, per chi ancora non lo sapesse, vediamo cos'è un API. Con questa semplice sigla di 3 lettere, si indica ogni insieme di procedure disponibili al programmatore per ottenere un'astrazione tra l'hardware e il programmatore o tra software a basso livello e quello ad alto, semplificando in questo modo il lavoro di programmazione. Le API, in sostanza, evitano ai programmatori di riscrivere ogni volta tutte le funzioni necessarie partendo da zero. Ma adesso parliamo delle API di HTML5 e vediamo quali sono le più utili!

1. Element.classList

L'API classList ci permette di modificare le classi CSS attraverso semplicissimi controlli JavaScript. Ad esempio:

// Aggiungo una classe all'elemento
ilMioElemento.classList.add("nuovaClasse");

// Rimuovo una classe dall'elemento
ilMioElemento.classList.remove("classeEsistente");

// Controllo l'esistenza di una classe
ilMioElemento.classList.contains("unaClasse");

// Eseguo il toggle di un elemento con una classe
ilMioElemento.classList.toggle("altraClasse");

Per capire come funziona quest'API e come utilizzarla, puoi seguire questo articolo bit.ly/Qt7Twi.

2. Element.dataset

L'API Element.dataset fa si che modificare l'attributo data- diventi semplice ed intuitivo. Ad esempio:

/*  Elemento di partenza:
<div data-id="mioID" data-my-custom-key="valore inserito qui" data-name="mioDIV" id="mioDIV">
*/

// Prendo l'elemento

var elemento = document.getElementById("mioDIV");


// Prendo l'ID

var id = elemento.dataset.id;

// Recupero "data-my-custom-key"

var customKey = elemento.dataset.myCustomKey;


// Cambio il valore dell'attributo

elemento.dataset.myCustomKey = "altro valore";


// L'elemento si trasforma in:



<div data-id="mioID" data-my-custom-key="altro valore" data-name="mioDIV" id="mioDIV">

Per saperne di più puoi consultare: http://mzl.la/Ud9GAR.

3. L'attributo autofocus

L'attributo autofocus fa si che un elemento, ad esempio un button o una textarea, venga focalizzato unicamente quando la pagina è pronta per l'animazione. Vediamo come:

<input autofocus="autofocus" />

<button autofocus="autofocus">Prova!</button>

<textarea autofocus="autofocus"></textarea>

Puoi ottenere una maggiore documentazione su questa API a questo indirizzo: http://bit.ly/Xp3pZA.

4. ContextMenu

La nuova API ContextMenu ci permette di modificare il menù contestuale del browser senza necessariamente sovrascrivere gli elementi, ma comodamente aggiungendo degli elementi.

<section contextmenu="ilmioMenu">
  <!-- aggiungo il menu -->
  <menu type="context" id="ilmioMenu">
    <menuitem label="Ricarica il post" onclick="window.location.reload();" icon="/images/refresh-icon.png"></menuitem>
    <menu label="Condividi su..." icon="/images/share_icon.gif">
      <menuitem label="Twitter" icon="/images/twitter_icon.gif" onclick="goTo('//twitter.com/intent/tweet?text=' + document.title + ':  ' + window.location.href);"></menuitem>
      <menuitem label="Facebook" icon="/images/facebook_icon16x16.gif" onclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
    </menu>
  </menu>
</section>

Maggiori informazioni a: http://bit.ly/Qtc4YU.

5. window.postMessage

L'API postMessage, che è anche stata sostenuta da IE8, consente l'invio di messaggi tra le finestre e gli elementi dell'iFrame.

// Dalla finestra iframe del dominio principale, invio un messaggio alla finestra iframe ospitata su un altro dominio
var iframeWindow = document.getElementById("iframe").contentWindow;
iframeWindow.postMessage("Questo è un messaggio dal primo dominio!");
// Recupero il messaggio dalla finestra iFrame del secondo dominio
window.addEventListener("message", function(event) {
  // Controllo la provenienza del messaggio
  if(event.origin == "http://www.lucapipolo.it") {
    // Stampo il messaggio
    console.log(event.data);
    // Invio la ricevuta
    event.source.postMessage("Il messaggio è arrivato!");
  }
]);

Ecco giunti alla fine di questo articolo. Vi lascio con un'ultima ma importantissima nota: controllate sempre la compatibilità con i browser prima di adoperare una qualsiasi API! E, sopratutto, leggete le documentazioni ufficiali prima di partire in quarta, eviterete tanti guai futuri!

Read More

6 utili plugin jQuery per gestire i layout

Al giorno d'oggi la gestione dei layout attraverso il CSS è diventato uno dei problemi più importanti da affrontare per un Web Designer. Infatti, progettare layout complessi e flessibili che siano compatibili anche con i tablet, non è assolutamente facile! Per superare questo problema, vi propongo sei semplici plugin jQuery che vi permetteranno di manipolare e sviluppare layout velocemente e, sopratutto, di ottenere risultati cross-browser.

1. Columnizer

Questo plugin converte automaticamente il contenuto della vostra pagina in un formato simile a quello di un giornale. Vi basterà definire la larghezza delle colonne o, in alternativa, un numero statico di colonne flessibili e il gioco è fatto. L'unica accortezza da adottare è inserire le classi CSS utilizzate da Columnizer prima del vostro foglio di stile personale, in modo da evitare conflitti. Potete scaricare questo plugin dal sito ufficiale: http://welcome.totheinter.net/columnizer-jquery-plugin/

2. UI Layout

Questo plugin è ispirato a extJS border-layout, e ricrea le stesse funzionalità attraverso il framework jQuery. Attraverso la semplice ed intuitiva interfaccia utente, il plugin riesce a creare qualsiasi layout si desideri, dalle semplici barre laterali alle disposizioni più complesse comprensive di menù, barre di stato, sotto moduli e integrazione di altri widget jQuery. UI Layout è l'applicazione più sofisticata di questo genere che possiate trovare in rete: completa, priva di limitazioni e bug. Scaricatela subito attraverso questo link: http://layout.jquery-dev.net/

3. CSS-Template Layout

Questo script analizza l'insieme delle regole CSS e le visualizza impaginate in un layout. Le opzioni includono la possibilità di selezionare il codice da analizzare, così come utilizzare un prefisso opzionale per alcune delle regole. Trovate le istruzioni per l'installazione e tanti esempi ben illustrati a questo indirizzo: http://code.google.com/p/css-template-layout/

4. jLayout

Questo plugin è capace di disporre gli elementi HTML in quatto differenti layout attraverso l'utilizzo di altrettanti differenti algoritmi. Il primo definisce i componenti in cinque differenti regioni statiche, il secondo dispone gli elementi in una griglia definita dall'utente, il terzo si attiene sempre ad una griglia ma, questa volta, con dimensioni delle colonne e delle righe flessibili. Infine, l'ultimo algoritmo, dispone i div in orizzontale che traboccano in nuove righe solamente in mancanza di spazio. Scaricatelo e testatelo da qui: http://www.bramstein.com/projects/jlayout/jquery-plugin.html

5. EqualHeights

Creare caselle di altezza uguale a prescindere dai contenuti può essere un'operazione noiosa da effettuare con i CSS. Questo plugin permettere di soddisfare questa esigenza chiamando una singola e semplice funzione. Scopri come funziona e come utilizzarlo seguendo questo link: http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

6. Masonry

Masonry organizza gli elementi i modo inverso a quello consueto: invece di farli fluttuare prima in orizzontale e poi in verticale, riesce a creare colonne verticali che traboccano all'occorrenza in verticale. Il plugin è completamente gestito attraverso regole CSS ed utilizza funzioni come outerWidth() e innerWidth() per calcolare i margin e i padding tra gli elementi. Puoi trovarlo qui: http://masonry.desandro.com/

Read More

Come includere CSS condizionali per IE

Affinché il nostro sito venga visualizzato correttamente anche su Internet Explorer, è necessario inserire due brevi ma fondamentali righe condizionali al nostro foglio HTML.

La procedura, semplice ed intuitiva, da adottare è la seguente:

  
<!--[if IE]>  
   <link rel="stylesheet" type="text/css" href="stile-ie.css" />  
<![endif]-->  

Lo script dell'esempio precedente si occuperò di caricare il foglio "stile-ie.css" ogni volta che il browser che visualizza il nostro sito è una qualsiasi versione di IE. In realtà, aggiungendo alcuni suffissi alla causale if, possiamo rendere più preciso ed efficace il nostro script e renderlo capace di selezionare le singole versioni del browser di casa Microsoft; vediamo come.

Selezionare versioni specifiche

• Per selezionare una versione minore di quella indicata utilizziamo l'espressione lt. Ad esempio la seguente procedura condizionale attribuirà il foglio di stile solo alle versioni di IE precedenti alla 9.

 
<!--[if lt IE 9]>   
   <link rel="stylesheet" type="text/css" href="stile-ie.css" />   
<![endif]-->

• Per selezionare una versione minore o uguale a quella indicata usiamo il suffisso lte. Ad esempio proviamo a selezionare unicamente le versioni precedenti la 8, compresa la 8.

 
<!--[if lte IE 8]>   
   <link rel="stylesheet" type="text/css" href="stile-ie.css" />   
<![endif]-->

• Per selezionare una versione maggiore di quella indicata usiamo il suffisso gt. Ad esempio le seguenti righe di codice selezioneranno unicamente le versioni successive alla 7.

 
<!--[if gt IE 7]>   
   <link rel="stylesheet" type="text/css" href="stile-ie.css" />   
<![endif]-->   

• In quest'ultimo caso vediamo come selezionare una versione maggiore o uguale a quella indicata, attraverso il suffisso gte. Ad esempio:

<!--[if gte IE 7]>   
   <link rel="stylesheet" type="text/css" href="stile-ie.css" />   
<![endif]-->

E tu quale soluzione adotti per rendere il tuo sito compatibile con Internet Explorer? Commenta il mio articolo, condividilo ed esprimi la tua opinione!

Read More

PHP - Individuare la lingua di chi naviga nel vostro sito

Sapevate che esiste uno snippets PHP per riconoscere automaticamente la lingua utilizzata da chi visita il vostro sito e, di conseguenza, reindirizzare automaticamente i vostri utenti?

Questo snippets può rivelarsi fondamentale nella creazione di siti multilingua, sopratutto per evitare l'utilizzo delle ormai abusate icone a bandierina.

<?php  
   $lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);  
   echo $lang;  
?>  

Come possiamo vedere. il nostro selettore utilizza la funzione $_SERVER ed il parametro HTTP_ACCEPT_LANGUAGE. In pratica lo script risale automaticamente alla lingua impostata dal browser e, usando la funzione substr, isola i primi due caratteri ottenendo, così, la sigla della lingua.

Ovviamente potete usare questo codice per reindirizzare automaticamente i vostri visitatori verso la versione tradotta del vostro portale.

Read More