Articoli con Tag ‘Internet’


jQuery: bordi rotondi sulle immagini per sovrapposizione

A causa dei diversi rendering tra i vari browser, che vedono sicuramente Microsoft Internet Explorer in testa, bisogna sempre ricorrere ad artifizi particolari per applicare effetti che, ormai, dovrebbero rappresentare uno standard. I pluri-discussi bordi arrotondati sono un classico esempio del “disastro” prodotto dalla completa incapacità di realizzare uno standard serio sul rendering delle pagine HTML/CSS. Esistono in rete numerosissime soluzioni che permettono di ottenere “effetti” (effetti che esonerano dall’HTML attuale come bordi arrotondati, effetti ombra, riflessioni, etc…) con patch sui fogli di stili, particolari trucchi con l’uso di div innestati, librerie Javascript, uso delle canvas, etc…
A titolo puramente didattico vorrei illustrare un’ulteriore tecnica (cross-browser) per applicare dei bordi arrotondati a delle immagini:

Demo e sorgenti

Continua...

Creare applicazioni Desktop con Google Chrome e FireFox?

Google Chrome permette di creare applicazioni Desktop a partire da una pagina Web? In realtà, come indicato nella voce di menu, è semplicemente permesso di creare una scorciatoia ad un collegamento che – a sua volta – apre una finestra senza barra degli indirizzi e senza tutti i “fronzoli” del browser. Con questo non significa che abbiamo creato un’applicazione Desktop; abbiamo solo creato un link allo stesso Google Chrome in modalità – per così dire- chrome-less.

Caratteristica simle, ma più ambiziosa, era già stata proposta dalla fondazione Mozilla nel 2007, tramite il progetto Prism. Questo è sicuramente più versatile ed articolato, corredato anche da un’utile estensione che permette di creare applicazioni desktop dal menu di FireFox, alla stregua di Google Chrome.

Tuttavia, entrambe le soluzioni, sono ben lontane dalla tecnologia Adobe AIR. Prima che qualcuno le confonda è bene sottolineare le differenze sostanziali tra un collegamento sul desktop, che apre una finestra senza menu, ed una applicazione desktop vero e propria.
Adobe AIR, infatti, a differenza delle soluzioni proposte da Google Chrome e Prism permette:

  • Accesso virtualmente completo al sistema su cui gira l’applicazione, con la possibilità di leggere e scrivere file. Possibilità di estendere le proprie funzionalità tramite dll (dynamic link library), estensioni e prodotti di terze parti come SHU Player (vedi Distribuire applicazioni Adobe AIR: da AIR Badge a SHU Player)
  • Gestisce l’applicazione come le altre applicazioni di sistema: installazione e disinstallazione

Continua...

WordPress: scrivere un logout personale

Partendo dal post WordPress: come creare passo passo un proprio login, eseguita la procedura di login potrebbe essere utile indicare all’interno del nostro blog un link per effettuare la disconnessione, ovvero il logout. Non useremo anche in questo caso le procedure standard di WordPress, ma vedremo come eseguire il logout a basso livello. Prima di tutto dobbiamo capire se un utente è loggato o meno. Questo è possibile interrogando semplicemente la variabile $user_ID di WordPress. Ad esempio:

1
2
3
if( $user_ID != '' ) { // oppure if( is_user_logged_in() ) {
    // un utente risulta "loggato" ...
}

Una volta che sappiamo che un utente è “loggato” nel sistema, possiamo inserire un semplice link ad una nostra pagina di logout. Creiamo quindi una pagina, ad esempio logout.php, e inserendo il seguende codice:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
 * Esegue il logout
 *
 * @author            Giovambattista Fazioli
 * @email             g.fazioli@undolog.com
 * @web               http://www.undolog.com
 */
 // Invoke WordPress bootstrap
@require_once('wp-config.php');
@require_once('wp-includes/pluggable.php');
// wp logout
wp_logout();
// carico qualsiasi altra pagina
header( "Location: /" );

E sufficiente quindi “linkare” alla nostra pagina per fornire una procedure di logout:

1
2
3
if( $user_ID != '' ) {
    echo 'Esegui il <a href="logout.php">logout</a>';
}

Continua...

Very short trick: valori undefined in Javascript

Esiste una forma abbreviata per assegnare “al volo” una valore ad una variabile se un’altra non è definita (undefined), usando l’operatore di OR logico (||) – doppio pipe:

1
2
3
4
5
// pluto risulta undefined
var pluto;
var pippo = pluto || '5';
alert( pippo );
// risultato: 5

Continua...

CSS3: qualcuno ha visto Internet Explorer?

Io proprio no…

1
2
3
4
5
6
7
8
9
p {
/* Rounded Corners */
border-radius: 9px; /* CSS 3 */
-o-border-radius: 9px; /* Opera */
-icab-border-radius: 9px; /* iCab */
-khtml-border-radius: 9px; /* Konqueror */
-moz-border-radius: 9px; /* Firefox */
-webkit-border-radius: 9px; /* Safari */
}

Continua...

Una classe countDown in Javascript

Nel post 3D CountDown con FIVe3D (vedi anche How I Did It: scrivere un countdown in Flash), veniva proposta una classe per la creazione di un oggetto CountDown in Actionscript, eccone una versione simile in Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/**
 * CountDown Class
 *
 * @author        Giovambattista Fazioli
 * @email         g.fazioli@undolog.com
 * @web           http://www.undolog.com
 *
 * @param    dd   (string) 'month day, year'
 *
 */
function countDown( dd ) {
    // init target time
    var target            = new Date( dd );
    this.targetTime        = target.getTime();
   
    /**
     * refresh countdown
     */
    this.refresh = function() {
        var today                 = new Date();
        var currentTime           = today.getTime();
        // time left
        this._leftMilliseconds    = (this.targetTime - currentTime);
        this._leftSeconds         = Math.floor( this._leftMilliseconds / 1000 );
        this._leftMinutes         = Math.floor( this._leftSeconds / 60 );
        this._leftHours           = Math.floor( this._leftMinutes / 60 );
        // no module
        this.leftDays             = Math.floor( this._leftHours / 24 );
        // for print
        this.leftMilliseconds     = this._leftMilliseconds % 1000;
        this.leftSeconds          = this._leftSeconds % 60;
        this.leftMinutes          = this._leftMinutes % 60;
        this.leftHours            = this._leftHours % 24;
    }
    this.refresh();
}

Esempio

1
2
3
var cd = new countDown( '1 1, 2009' );
// mostra quanti giorni, ore, minuti, secondi e millisecondi al primo gennaio 2009
document.write( cd.leftDays + "," + cd.leftHours + "," + cd.leftMinutes + "," + cd.leftSeconds + "," + cd.leftMilliseconds );

Continua...

Very short trick: avoid error message in PHP

Se non vogliamo che una funzione PHP emetta un qualsiasi errore o warning, basta inserire prima della chiamata alla funzione il carattere chiocciola – o at – (@):

1
2
3
4
// invece di usare la forma canonica
$res = miaFunc();
// è possibile usare
$res = @miaFunc();

Continua...

Very short trick: PHP auto echo

In PHP è possibile usare una forma abbreviata, o contratta, per visualizzare variabili o ritorni di funzioni:

1
2
3
4
5
6
7
8
// al posto di
<?php echo $miavar ?>
// è possibile scrivere
<?=$miavar?>
// al posto di
<?php echo miaFunc() ?>
// è possibile scrivere
<?=miaFunc()?>

Continua...

Skypemote versione Adobe AIR

Download Install Skypemote Adobe AIR Version

Questa è la prima release, la 0.8 (allineata con la versione online), di Skype Emotions Editor – Skypemote – in versione Adobe AIR. Per adesso le funzionalità sono le medisime della versione online, con il vantaggio di essere un’applicazione desktop, installabile quindi su Windows, Mac e Linux.
Prima dell’installazione ricordatevi di aggiornare e/o installare per la prima volta le runtime di Adobe AIR, se non l’avete già fatto in precedenza.

Download

Potete scaricare Air Skypemote da Google Code.

Continua...

Actionscript 3.0 for beginners: lesson #3

Continuiamo l’analisi dell’esempio del gioco Tic Tac Toe, presentato in Actionscript 3.0 for beginners: lesson #2. Eravamo arrivati alla funzione che crea la griglia di gioco:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/**
 * Disegno graficamente la griglia (3x3) a video
 *
 * @param        void
 * @return       void
 * @private
 */
private function createGrid():void {
    // puntatore temporaneo ad uno oggetto MovieClip
    // nota: qui si sarebbe potuto usare anche un oggetto Sprite
    // ma in questo caso mi serve di poter estendere l'oggetto
    // aggiungendo alcune proproetà personali. L'oggetto Sprite
    // è una classe chiusa e quindi non estendibile runtime, mentre
    // la classe MovieClip è una classe dinamica e quindi rende
    // possibile l'aggiunta di proprietà runtime
    var tm:MovieClip, i:uint = 0;
    // aggiungo in uno schema 3x3 i MovieClip
    for(; i < 9; i++) {
        tm                    = new MovieClip();
        addChild( tm );
        tm.x                  = OFFSETX+( (i%3)*(PLAYER_WIDTH+PLAYER_OFFSET) )
        tm.y                  = OFFSETY+Math.floor(i/3)*(PLAYER_HEIGHT+PLAYER_OFFSET)
        tm._index             = i;
        drawPlayer( tm, 0 );
    }
    // disegno le 2 linee veriticali e le 2 orizzontali
    with( this.graphics ) {
        lineStyle(6,0x666666);
        moveTo(OFFSETX,OFFSETY+(PLAYER_HEIGHT+15));
        lineTo(OFFSETX+( (PLAYER_WIDTH+20)*3 ),OFFSETY+(PLAYER_HEIGHT+15));
        moveTo(OFFSETX,OFFSETY+(PLAYER_HEIGHT+20)*2);
        lineTo(OFFSETX+( (PLAYER_WIDTH+20)*3 ),OFFSETY+(PLAYER_HEIGHT+20)*2);
        moveTo(OFFSETX+(PLAYER_WIDTH+15),OFFSETY);
        lineTo(OFFSETX+(PLAYER_WIDTH+15),OFFSETY+( (PLAYER_HEIGHT+20)*3 ));
        moveTo(OFFSETX+(PLAYER_WIDTH+20)*2,OFFSETY);
        lineTo(OFFSETX+(PLAYER_WIDTH+20)*2,OFFSETY+( (PLAYER_HEIGHT+20)*3 ));
    }
}

Continua...



Stop SOPA