Explosive Lab Blog, Html5

Tracciato casuale con Canvas e ProcessingJs

2012-02-24T09:21:00.000-08:00

Oggi vi presento un generatore casuale di tracciati creato con ProcessingJs, per capire subito di cosa si tratta vi lascio il link per la demo di questo generatore casuale di tracciati e di seguito ne riporto un immagine, anzi due:

Questo esempio è stato realizzato in Canvas tramite l' aiuto di ProcessingJs non è nulla di particolare ma è molto interessante la semplicità del codice per generare questo esempio.
Questo è il codice processing, la prima parte è composta dal codice base per l' inizializzazione della tela:

void setup(){
size(400,400); //imposto la grandezza del canvas
background(0); //colore del background nero
fill(255); //colore background figure
stroke(255); //colore linee e contorni
frameRate(15); //velocità del framerate per s
}

In questa seconda parte invece dichiaro le variabili essenziali, quelle spaziali che ci serviranno per generare le linee e la variabile n semplice ma importante per lo svolgimento dello script.

int x, y, x2, y2, n = 1;
x = 0; y = 400/2; x2 = 10; y2 = y;
void draw(){ //funzione ripetuta ogni tot (framerate)
line(x, y, x2, y2); //disegno la linea
if(n == 1) l1(); //linea casuale verticale
if(n == 2) l2(); //linea casuale orizzontale
if(n == 3) l3(); //linea casuale verticale
if(n == 4){ l4(); n = 0;} //linea casuale orizzontale
n++;
}

Di seguito riporto le funzioni che ho creato per generare casualmente il tracciato, esse sono richiamate tramite un costrutto if dalla prima all' ultima per poi ripartire da capo sino all' infinito.

void l1(){ x = x2; y = y2; x2 = x2; y2 -= random(5, 50); }
void l2(){ x = x2; y = y2; x2 += random(5, 50); }
void l3(){ x = x2; y = y2; y2 += random(5, 50); }
void l4(){ x = x2; y = y2; x2 += random(5, 50); }

Introduzione alle Api Twitter

2012-02-23T01:59:00.000-08:00

Twitter, il Social Network per micropost proprio in questi giorni ha raggiunti circa 922.000 utenti registrati (22 febbraio), la continua crescita di questo social e l' utilità dello stesso mi hanno spinto ad utilizzare le API di Twitter e vedendo che nel web italiano gli articoli/guide su questo argomento scarseggiano ne scriverò qualcuna io compresa questa per imparare ad utilizzarle pienamente.

Esistono diversi tipi di Api rese disponibili da Twitter, di seguito elenco le più comuni:

Twitter for Websites: una suite per integrare Twitter molto semplicemente nei tuoi siti web, queste Api sono utilizzabili anche dai meno esperti, è molto utile nel caso vuoi inserire il famoso bottone per il following o se vuoi mostrare i tuoi tweet senza fatica.
Search API: queste Api sono create appositamente per eseguire query quindi ricerche all' interno il contenuto di Twitter, servono per trovare tweet con specifiche keyword, i tweets di uno specifico utente o riferiti all' utente stesso.
REST API: permettono l' accesso al core interno di Twitter, sono le più utili nel caso sei qui perché hai intenzione di sviluppare un' applicazione per il social network. Se cliccate il link vedrai la numerosità di queste Api che puoi trovarle tutte molto comodamente qui.
Streaming API: queste Api permettono lo streaming in realtime di Twitter sono utili nel caso richiedi un intensivo utilizzo dei dati, lo stesso social consiglia una lettura completa della documentazione purtroppo in inglese.

Per avere tutto sotto controllo sul sito è disponibile la documentazione ufficiale nella quale trovi un insieme molto comodo di link ordinato per categorie.

Un passo avanti

Ora ti farò vedere un semplice esempio di utilizzo delle Api Twitter che stampa semplicemente il mio nome utente e il mio username, ecco il codice Javascript con jQuery per semplificare la chiamata:
Qui trovi l' esempio live.

$(function() {
var JSONurl = 'http://api.twitter.com/1/users/show.json?screen_name=ExplosiveLab&callback=?';
$.getJSON(JSONurl, function(data) {
$.each(data, function(key, val) {
if(key == 'name') {
$('div#tweets').append('<h3>' + val + '</h3>');
}
if(key == 'screen_name') {
$('div#tweets').append(' <i>@' + val + '</i>');
}
});
});
});

Questo codice può sembrare molto complicato ma in verità è semplicissimo infatti non faccio altro che inviare una richiesta alle Api e ricevere una risposta JSON, ma visto che tutto questo può portare a una notevole confusione a presto pubblicherò la guida per utilizzare le Api di Twitter con jQuery.
Alla prossima quindi ;)

Css3 cool menu

2012-02-21T12:48:00.002-08:00

Dopo una piccola pausa in Francia sono tornato e sono pronto per scrivere nuovi articoli per Explosive Lab Blog, oggi ti voglio presentare un altro menu Css con tanto di animazioni tramite le Css3 transition e layout Html5.

Piccola nota aggiuntiva:
Ho creato anche una pagina per Explosive Lab Blog su FaceBook, seguimi e convidi ;)

L' immagine che vedi a sinistra è il menu in stato normale di colore blu, a destra invece troverete lo stesso menu verde, potete trovare una demo live del menu css3 qui.
Nel seguente pezzo di codice Css puoi trovare evidenziato in rosso il colore da cambiare nel caso vuoi modificare il colore del menu. Qui trovi una lista completa di tutti i colori.

nav ul li{
margin-top: 5px;
width: 60px;
padding: 2px 5px 2px 20px;
height: 30px;
list-style: none;
line-height: 30px;
text-align: center;
background: #3ea514;
...
}

Di seguito trovi il codice html completo:

<nav>
<ul>
<a href="#"><li class="active">home</li></a>
<a href="#"><li>news</li></a>
<a href="#"><li>demo</li></a>
<a href="#"><li>project</li></a>
<a href="#"><li>about</li></a>
<a href="#"><li>contact</li></a>
</ul>
</nav>

Ed infine ecco il codice css3:

nav{
width: 100px;
margin: 20px 0 0 0;
}

nav ul{
width: 80px;
margin: 0px; padding: 0px;
}

nav ul li{
margin-top: 5px;
width: 60px;
padding: 2px 5px 2px 20px;
height: 30px;
list-style: none;
line-height: 30px;
text-align: center;
background: #3ea514;
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
inset 0 10px 50px rgba(255, 255, 255, 0.2),
inset 0 15px 1px rgba(255, 255, 255, 0.1);
border-top-right-radius: 4px; border-bottom-right-radius: 4px;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
}

nav .active{
width: 70px;
color: #fff;
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
inset 0 15px 40px rgba(255, 255, 255, 0.4),
inset 0 15px 1px rgba(255, 255, 255, 0.1);
}

nav ul li:hover{
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
inset 0 15px 40px rgba(255, 255, 255, 0.4),
inset 0 15px 1px rgba(255, 255, 255, 0.1);
width: 80px;
}

nav ul a:link, nav ul a:visited, nav ul a:focus, nav ul a:active{
text-decoration: none;
color: #ddd;
font-family: Arial;
font-size: 1.1em;
}

nav ul a:hover{
color: #fff;
}

Se vuoi che una voce del menu appaia selezionata (come nel casa della scritta 'project' dell' immagine a destra) devi semplicemente applicare la classe active alla lista li corrispondente così:

<a href="#"><li class="active">home</li></a>

Puoi utilizzare il menu in qualunque caso vuoi, sia per un sito professionale o per una semplice applicazione, sentiti libero di pubblicarlo e condividerlo.

DART, programmazione web strutturata

2012-02-15T03:12:00.000-08:00

DART è un nuovo linguaggio di programmazione class-based per la creazione di applicazioni web strutturate. Sviluppato da Google con l' obbiettivo di essere semplice, efficiente e scalare, il linguaggio Dart combina la potenza e tutte le caratteristiche di un nuovo linguaggio con dei costruttori familiari e una sintassi leggibile.

Questo è ciò che trovate sul sito ufficiale del nuovo linguaggio andando nella sezione Technical Overview, subito dopo trovate le caratteristiche principali(key features) che vi spiego di seguito:

Classi

Classi e interfacce forniscono un buon meccanismo per definire efficienti APIs. Questi costrutti permettono l' incapsulamento e la riutilizzazione di metodi e dati.

Tipi opzionali

Dart permette ai programmatori di aggiungere dei tipi statici al loro codice, per maggiori info ti rimando all' articolo ufficiale sui tipi opzionali molto esplicativo.

Librerie

Gli sviluppatori possono creare e utilizzare librerie che rimangono inalterate durante il runtime. Pezzi di codice sviluppati autonomamente possono quindi fare affidamento a librerie condivise.

Tooling

Dart includerà un ricco ambiente di sviluppo, librerie e tools di sviluppo costruiti per supportare il linguaggio, questi tools consentiranno produttività e dinamicità di sviluppo[...]

Queste che vi ho appena elencato sono le proprietà principali del linguaggio, ora passiamo subito agli esempi per vedere la sintassi del nuovo linguaggio Dart:

Prima di tutto il vecchio e semplice hello world:

main() { print('Hello, Dart!');}

Questo è sempre lo stesso esempio con una variabile:

main() {
var name = 'World';
print('Hello, ${name}!');
}

Il seguente esempio calcola la distanza fra due punti:

class Point {
Point(this.x, this.y);
distanceTo(Point other) {
var dx = x - other.x;
var dy = y - other.y;
return Math.sqrt(dx * dx + dy * dy);
}
var x, y;
}
main() {
Point p = new Point(2, 3);
Point q = new Point(3, 4);
print('distance from p to q = ${p.distanceTo(q)}');
}

Se invece vuoi vedere se un browser supporta Dart o no una questo:

<script type='text/javascript'>
if (!navigator.webkitStartDart) {
// Browser doesn't support Dart
}
</script>

Come utilizzo dart?
Sviluppare in Dart è semplicissimo, infatti basta recarsi a questo link http://try.dartlang.org/ con un browser moderno oppure scaricate il Dart editor da qui.
Se hai bisogno di una guida seria per Dart la trovi sempre sul sito ufficiale(in inglese).

Domande frequenti jQuery parte 2

2012-02-14T06:24:00.000-08:00

Ecco la seconda parte delle domande più frequenti di jQuery tradotte dalla pagina Frequently Asked Questions del sito ufficiale dello stesso Framework.
Trovi la prima parte qui.

jQuery F.A.Q. parte 2

Come verifico l' esistenza di un elemento?

Utilizza la proprietà length di jQuery dopo aver selezionato l' elemento:

if($('p.response').length)
$('p.response').show(500);

La proprietà length in jQuery può trarre in inganno ma è molto semplice, infatti se affiancata a un selettore ritorna il numero degli elementi selezionati, quindi anche se l' elemento ha un display:none risulterà comunque presente nella pagina.

C'è da notare che non è sempre necessario verificare se un elemento esiste. Il seguente codice mostra l' elemento, se esiste, invece non accade nulla(nessun errore) se non esiste.

$('p#id').show();

Come determino lo stato di un elemento attivato?
Se vuoi determinare se un elemento è visibile o no puoi usare i selettori :visible e :hidden.

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

Se invece vuoi semplicemente agire su un elemento basandoti sulla sua visibilità basta includere :visible o :hidden nel selettore jQuery:

$('p.top:visible').css('color','green');

Come posso abilitare o disabilitare un elemento di un form?

In jQuery ci sono due possibili soluzioni, impostare l' attributo disabled rispettivamente a vero o falso:

//disabilitare #btn1
$('#btn1').attr('disabled', true);
//abilitare #btn1
$('#btn1').attr('disabled', false);

Oppure aggiungere o rimuovere l' attributo disabled:

//disabilitare #btn1$('#btn1').attr('disabled', 'disabled');//abilitare #btn1$('#btn1').removeAttr('disabled');

Per ora è tutto, prossimamente pubblicherò la terza parte con altre 3 F.A.Q jQuery, per trovare la lista completa(in inglese) vai qui.

Explosive Lab Blog review

2012-02-13T06:18:00.000-08:00

Proprio oggi ho raggiunto le 10000 pagine visualizzate su questo blog da quando è stato creato (23 ottobre 2011) che corrisponde alla data del mio primo post (una citazione), per questo risultato devo ringraziare proprio te e tutti i miei altri lettori, anche occasionali.
Oggi il blog conta 54 post più questo 55, purtroppo solo 4 commenti ed è per questo che non mi posso ritenere soddisfatto quindi se stai leggendo questo post non esitare a commentare; 4.319 pagine visualizzate a gennaio e ciò fa capire che il blog è in costante crescita e 209 pagine visualizzate oggi(14.55).

Ho voluto creare questo post, oltre al traguardo delle 10000 visualizzazioni per informarti che fra 3 giorni, precisamente Giovedì 16 parto per la Francia stando via 4 giorni; andrò a trovare mia sorella che ora è la per motivi di studio e quindi sarò impossibilitato a pubblicare ulteriori post per Explosive Lab Blog. Se riesco pianifico qualche post così da non restare a vuoto sino a lunedì.

Qual' è il futuro di Explosive Lab Blog?
Beh, caro lettore questo è tutto da scoprire, infatti solo se seguirai la vita di questo blog potrai saperlo veramente. Ultimamente sto collaborando con Html5 And More e il suo creatore per un futuro progetto ma di questo non voglio anticipare assolutamente niente, segui questo blog e lo scoprirai :)
Sono alla ricerca sempre di nuovi articoli o esempi da proporti, non smetterò mai di rendere sempre più interessante questo blog!

Detto questo ti auguro buona giornata,
evolution.

5 Html5 Game, Demo, Site e Example

2012-02-12T12:18:00.000-08:00

L' Html5 oltre a destare notevole interesse come novità del web 2.0 riscontra molto successo per la costruzione di siti web interattivi(Web Application), giochi, o semplici demo ed esempi.
Tra le novità di Html5 sicuramente troviamo le Web Application, cioè quei siti che utilizzando le nuove tecnologie fornite dallo stesso linguaggio di markup Html5 sono riusciti a distinguersi dalla massa spiccando per la loro originalità; anche i giochi o i cosiddetti 'esperimenti' non sono da meno, infatti tramite di essi è possibile capire tutte le possibilità di questo fantastico insieme di tecnologie.

Oggi ti voglio presentare proprio quei siti oltre a quello che stai leggendo ;)

Iphone creato solo con Css3
Questo fantastico iphone è creato interamente con i Css3 con tanto di slider e di icone sempre in puro Css e un tocco di Javascript. Niente immagini, SVG o Canvas, 3395 linee di Css e 335 linee di Javascript + Jquery.
Un vasto sguardo alle nuove potenzialità di Css3: ombre, gradienti e nuove proprietà.
Css3? ma che centra?
La specifica Css3 è 'inclusa' nel vasto mondo di Html5, se vuoi avere maggiori dettagli su tutte le novità su di essi vai qui: http://css3clickchart.com/ nel link che ti ho appena proposto troverai Web Application che descrive in modo semplice e intuitivo con codici, esempi, link e tutorial tutte le nuove caratteristiche di Css3.

Chrome Web Store
Fantastica web application by Google, un web store interamente dedicato ad applicazioni web, giochi, estensioni e temi per il browser Chrome. Di questo però ne ho già parlato in questo articolo.

Angry Birds for browser
Ecco a te il gioco Angry Birds creato interamente in Html5 giocabile quindi comodamente dal tuo browser web se supporti canvas o dal tuo cellulare.
Questo gioco creato da google fa capire quanto potente sia il mondo di Html5 e come ormai Flash sia facilmente superabile.

Html5 Logo
Semplice web application creata dal W3C, essa permette di capire il perché della scelta di adottare logo e aiuta la creazione di un logo personalizzato a seconda delle tecnologie utilizzate nella propria Web App Html5. Colora il mondo di arancio!

Chrome Experiments
Chrome Experiments è una vetrina per creativi esperimenti web la maggiorparte dei quali creati con Canvas, SVG, Javascript e WebGl.
Se vuoi dare uno sguardo al futuro di Html5 sei nel posto giusto.

Css3 icon Menu

2012-02-11T02:40:00.000-08:00

Giocando con le proprietà Css3 è possibile creare fantastici effetti, questa volta ho deciso di sviluppare un semplice menu ad icone che potete trovare qui.
Di seguito trovate le tre immagini dei relativi stati del menu Css3, il primo a riposo, nel quale potete notare una leggera opacità:

Il secondo stato invece rappresenta l' :hover, eseguito in particolare sull' elemento indicato dalla freccia:

Il terzo rappresenta lo stato :active, cioè quando un elemento viene cliccato:

La struttura html5 del menu è la seguente:

<div class="menu0">
<ul>
<li><img src="http://cdn1.iconfinder.com/data/icons/Absolute%2032-PNG/32/Configuration.png" /></li>
<li><img src="http://cdn1.iconfinder.com/data/icons/Absolute%2032-PNG/32/Settings_-_Dark.png" /></li>
<li><img src="http://cdn1.iconfinder.com/data/icons/Absolute%2032-PNG/32/iTunes.png" /></li>
<li><img src="http://cdn1.iconfinder.com/data/icons/Absolute%2032-PNG/32/RAM.png" /></li>
<li><img src="http://cdn1.iconfinder.com/data/icons/Absolute%2032-PNG/32/Command.png" /></li>
</ul>
</div>

Come potete notare il menu è composto da un semplice div con classe menu0 la quale contiene le seguenti regole Css3:

div.menu0 ul li{
display: inline; //imposto gli elementi in linea
list-style: none; //tolgo lo stile della lista
width: 100px; height: 100px;
padding: 32px 15px 12px 15px;
border-radius: 200px; //creo il cerchio
opacity: 0.7; //setto l' opacità a 0.7
transition: all 0.8s; //imposto la transizione di tutti i tag li
-webkit-transition: all 0.8s; //per compatibilità Chrome...
-moz-transition: all 0.8s; //per compatibilità con Mozzilla
-o-transition: all 0.8s; //per compatibilità con Opera
}

Poi tramite il selettore :hover imposto l' opacità nulla della lista se il mouse passerà sopra di essa in questo modo:

div.menu0:hover ul li{
opacity: 1;
}

Infine aggiungo 2 regole Css per definire le animazioni di rollhover e click:

div.menu0 ul li:hover{ box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3); background: #f0fdf0; }
div.menu0 ul li:active{ box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 10px 10px rgba(0, 0, 0, 0.1), inset 0 -10px 10px rgba(0, 0, 0, 0.1); background: #d1f9d2; }

Vuoi altre icone? Nessun problema, su iconFinder c'è il set apposito di icon.
Ritengo importante far notare che per una maggiore compatibilità è necessario aggiungere i suffissi(webkit, moz,o e ms) anche per le proprietà Css3 box-shadow e border-radius.
Ti ricordo ancora una volta che puoi trovare la demo del menu css3 qui.

L' oggetto document in Javascript

2012-02-11T02:03:00.000-08:00

L’ oggetto document di Javascript viene creato ogni qual volta il tuo browser visualizza una pagina HTML, esso offre l’ accesso alle varie proprietà e ai vari metodi che intervengono nella visualizzazione della pagina web.

Un esempio?

Uno di questi metodi è il metodo document.write() che sicuramente conoscerai, se non è così la sua funzione è semplicissima, infatti consente di stampare una stringa di testo all’ interno del documento HTML.

Esempio:

document.write('Questo testo verrà stampato nella pagina');

Lista completa delle proprietà e dei metodi dell’ oggetto document

Le proprietà e i metodi più importanti possiedono una breve descrizione.

Proprietà:

activeElement
alinkColor
anchors
applets
bgColor (restituisce il valore esadecimale del colore di sfondo del documento)
charset
classes (usato per impostare gli stili di classi)
cookie (usato per impostare i cookie Javascript di un documento)
defaultCharset
designMode
dir
doctype (restituisce il doctype del documento in questione)
documentElement (restituisce una stringa con il nodo radice del documento)
domain (restituisce il nome del dominio del server del documento)
embeds
expando
fgColor (restituisce il valore esadecimale del colore del testo del documento)
fileCreatedDate (restituisce la data di creazione del documento)
fileModifiedDate ( restituisce la data dell’ ultima modifica del documento)
fileSize ( restituisce le dimensioni del documento in byte)
formName
forms
ids
images
implementation
lastModified
layers
all (consente l’ accesso a tutti gli oggetti della pagina)
linkColor
links
parentWindow
plugins
protocol
readyState
reffer
tags
title (restituisce il titolo della pagina)
uniqueID
URL
URLUnecoded
vlinkColor
XMLDocument
XSLDocument

Metodi:

attachEvent()
createAttribute()
createComment()
createDocumentFragment() (crea un nuovo documento)
createElement()
createEventObject()
createStyleSheet() (crea un foglio di stile che verrà utilizzato nel documento)
createTextNode()
detachEvent()
elementFromPoint()
execCommand()
getElementById() ( restituisce un riferimento all’ oggetto con l’ attributo ID passato come parametro)
getElementByName()
getElementByTagName() ( restituisce i riferimenti agli elementi con il tag inviato come parametro)
getSelection()
hasFocus()
mergeAttributes()
open() (apre un nuovo documento e ne consente la scrittura tramite write() o writeln())
close()
recalc()
setActive
write() (contente di scrivere una stringa di testo in un documento Html)
writeln() (fa la stessa cosa di write() ma alla fine della stringa da stampare termina la riga con ‘\n’)

Per avere maggiori info su i metodi e le proprietà di Javascript puoi semplicemente cercare su google il metodo/proprietà seguito dalla parola chiave Javascript.

Mirino con ProcessingJs

2012-02-10T04:00:00.000-08:00

Durante lo sviluppo di giochi o semplici applicazioni per scopi intuitivi è utile creare un mirino che segue il mouse e che magari al click di esso richiami un particolare evento o funzione.

Qui puoi trovare una demo del codice ProcessingJs oppure puoi tranquillamente vedere l' effetto nell' immagine seguente.

Il funzionamento del codice ProcessingJs è molto semplice, infatti per creare il mirino basta formare un cerchio nelle esatte coordinate del mouse e due semirette che partono dall' origine del cerchio sino a poco più in la...

Prima di tutto inizializzo la funzione setup() che serve per inizializzare il Canvas:

void setup(){
size(500, 500); //grandezza del canvas
background(0); // sfondo del canvas
strokeWeight(2); //grandezza linea di contorno
stroke(255); //colore linea di contorno
smooth(); //antialiasing
fill(146); //colore riempimento oggetti
}

Poi con la funzione draw() che viene richiamata ogni tot frameset disegno mirino vero e proprio tramite un ellisse e due linee(una verticale e una orizzontale):

int x, y, x2, y2;
x = 0; y = 0;
void draw(){ //funzione richiamata ogni tot
background(0); //pulisco il canvas
line(x-20, y, x+20, y); //creo la linea orizzontale
line(x, y-20, x, y+20); //credo la linea verticale
ellipse(x, y, 10, 10); //creo l' ellisse
}

Infine trovo le coordinate del mouse tramite Processing in modo semplicissimo, infatti tramite la funzione mouseMoved() il linguaggio restituisce rispettivamente le coordinate x e y del mouse:

void mouseMoved(){
x = mouseX; //assegna a x il valore di mouseX che contiene le coordinate del mouse rispetto all' asse x
y = mouseY;
}

Per il codice ProcessingJs completo vai qui.

Demo ProcessingJs

2012-02-10T00:45:00.000-08:00

Cos'è Processing?

Il linguaggio processing è stato originalmente creato da MIT in collaborazione con il gruppo Media Lab e Aesthetics e Computation necessitando di colmare il divario tra gli sviluppatori, gli artisti, etc., e creando una via che permette ai nuovi programmatori(o non programmatori) di eseguire complesse visualizzazioni lavorando facilmente. Processing è stato creato usando Java, e può essere pensato come un Java semplificato, con delle Api semplificate per disegni e grafici.Qui potete trovare una semplice guida introduttiva(in inglese) dalla quale ho preso questa spiegazione. Il linguaggio ProcessingJs invece è un port del linguaggio stesso che permette di utilizzarlo per lavorare nella tela Canvas direttamente con Javascript mantenendo però la sintassi Java.

Alcune fantastiche demo di ProcessingJs

Ball Droppings

Disegna linee per far rimbalzare le palline di varie dimensioni controllando le loro direzioni.

Tower of Defence

Fantastico gioco creato sempre in ProcesingJs, forse la grafica non è il massimo ma tiene davvero attaccati allo schermo

ABSTRACT01js

Rielaborazione di un vecchio sketch 2d, veramente un bel effetto.

Galactic Inbox

Gioco molto simpatico creato dal team di Gmail, da notare il loro interesse per processingJs

Asteroids

Rielaborazione del vecchio e caro gioco Asteroids.

Infine vi lascio un mio simpatico esempio creato sempre con ProcessingJs, un semplice cerchio che segue il mouse :)

Vi lascio anche il source:

void setup(){
size(500, 500);
background(0);
fill(255);
}
int xE, yE, E, mod1, mod2, r;
xE = yE = 100;
r = 50;
void draw(){
mod1 = (xM-xE)/10;
mod2 = (yM-yE)/10;
background(0);
xE += mod1;
yE += mod2;
ellipse(xE, yE, r, r);
}
int xM, yM;
void mouseMoved(){
xM = mouseX;
yM = mouseY;
}

Cielo stellato con ProcessingJs + Html5

2012-02-09T10:17:00.000-08:00

Ultimamente visto il successo riscosso da Html5 e le 'sue' Api Canvas non ho esitato ad informarmi sull' argomento anche scoprendo il linguaggio Processing e il suo relativo port ProcessingJs.

In parole semplici ProcessingJs può essere pensato come un framework che facilita le operazioni 2d e 3d del Canvas.

Successivamente trovate l' immagine che rappresenta il cielo stellato generato automaticamente con ProcessingJs:

Potete trovare lo script in azione qui. (premi F5 per generare un altro cielo stellato casuale)

Questo è il codice Processing che ho creato per generare casualmente il cielo:

var c = 0;
void star(n){
pushStyle();
background(0, 15, 43);
stroke(255);
while(c < n){
x1 = random(1, width-1);
y1 = random(1, height-1);
if(n%c == 0){
strokeWeight(random(3,4));
}else{ strokeWeight(random(2));}
point(x1, y1);
c++;
}
popStyle();
c = 0;
}

Questo invece è il codice ProcessingJs completo:

void setup(){
size(700, 230);
background(0, 15, 43);
smooth();
fill(255);
stroke(255);
star(700);
}

void draw(){
}

var c = 0;
void star(n){
pushStyle();
background(0, 15, 43);
stroke(255);
while(c < n){
x1 = random(1, width-1);
y1 = random(1, height-1);
if(n%c == 0){
strokeWeight(random(3,4));
}else{ strokeWeight(random(2));}
point(x1, y1);
c++;
}
popStyle();
c = 0;
}

Chrome Web Store

2012-02-08T01:19:00.000-08:00

Chrome Web Store

Il Chrome Web Store è un marketplace online che permette agli utenti che possiedono il browser Google Chrome di scaricare o acquistare migliaia di Applicazioni web, temi e estensioni. Il Chrome Web Store è attualmente disponibile in lingua italiana anche se la maggior parte dei componenti aggiuntivi è in inglese non si dovrebbero avere difficoltà a navigare nel portale.

Dentro il Chrome Web Store
Una volta registrati tutto sempre tramite il browser Chrome potrai navigare liberamente in cerca di fantastici componenti aggiuntivi per il tuo browser, ma non solo, infatti come ho già detto puoi trovare ottime Applicazioni Web che sono veri e propri siti web interattivi che forniscono un vasto insieme di soluzioni mantenendo velocità e fluidità.

Proprio per testare il Chrome Web Store by Google, dopo aver pagato la tassa di sviluppatore di 5$ ho pubblicato la mia prima semplice applicazione nello store, Clock Time, che si occupa semplicemente di stampare l' ora in un formato alquanto gradevole, ecco un immagine:

Questo è il link se vuoi scaricare l' applicazione!

Detto questo traggo le mie conclusioni.
Chrome Web Store è un market molto giovane rispetto ai suoi concorrenti, ma come al solito Google non si smentisce, infatti tramite varie forme lo store permette di pubblicare senza sforzo App o estensioni a pagamento così da far subito concorrenza a i suoi 2 più grandi rivali(Apple e Android). Come vedi non lo paragono neanche a Mozzilla che pur avendo le sue care estensioni è rimasto notevolmente indietro con la creatività in fattore marketing.
Tramite queste nuove Applicazioni Web il futuro degli sviluppatori dovrà passare anche da questo market essendo una buona fonte di pubblicità e purtroppo di sana concorrenza.
Per ora è tutto, non esitate a commentare :)

Domande frequenti jQuery 1

2012-02-07T03:38:00.000-08:00

Qui puoi trovare le domande maggiormente chieste durante l' utilizzo di jQuery tradotte da me in italiano dal sito ufficiale; se hai anche tu qualche domanda che qui non trovi non esitare a chiederla tramite commento.

jQuery F.A.Q. parte 1

Come seleziono un elemento usando una classe o un ID?
Questo codice seleziona un elemento con ID 'myId'. Visto che l' ID è unico questa espressione seleziona sempre, a seconda della situazione, un elemento o nessun elemento nel caso esso non esista.

$('#myId')

Questo codice seleziona l' elemento con classe 'myClass'. Dato che un qualunque numero di elementi può avere la stessa classe questa espressione seleziona un numero qualunque di elementi.

$('.myClass')

Un oggetto jQuery contenente l' elemento selezionato può essere assegnato tranquillamente a una variabile Javascript:

var element1 = $('#myId');

Ricorda anche che puoi intervenire sugli elementi in un oggetto jQuery anche tramite altre funzioni jQuery.

var element1 = $('#myId').text(); //Questa funzione nativa di jQUery permette di risalire al testo dell' elemento

Come posso selezionare gli elementi quando ho già un elemento DOM?
Se hai una variabile contenente un elemento DOM e hai la necessità di selezionare gli elementi connessi ad esso puoi farlo tramite il metodo find() così:

var element1 = document.getElementById('myId'); //elemento DOM
$(element1).find('p'); //trova tutti i paragrafi contenuti nell' elemento DOM

Molte persone cercano di concatenare un elemento DOM o un oggetto jQuery con una stringa in questo modo:

$(element1 + '.myClass');

Ma questo è sbagliato! Non è possibile concatenare oggetti con stringhe.

Come posso testare se un elemento possiede una determinata classe?
Il metodo hasClass() di jQuery (introdotto dalla versione 1.2) si occupa nativamente di questo scopo:

if($('p').hasClass('evid')){ //se hasClass trova la classe 'evid' ritorna true e quindi esegue l' alert
alert('classe trovata');
}

Puoi anche utilizzare il metodo is() con gli appropriati selettori Css3 per delle corrispondenze avanzate:

if($('div').is('p.uno')){

console.log('corrispondenza trovata');

}

Per ora è tutto, pubblicherò prossimamente sempre a gruppi di 3 domande le prossime FAQ di jQuery che puoi trovare sul sito ufficiale in inglese; se hai domande non esitare a chiedere qui.

Css3 Clock Design

2012-02-06T05:22:00.000-08:00

Questo nuovo design Css3 che con l' aiuto di Javascript simula un orologio digitale a tutti gli effetti.

Per vedere la demo in azione vai qui.

Creare il design forse è la parte che può sembrare più complicata, ma grazie alle diverse proprietà css3(border-radius, box-shadow) diventa tutto molto semplice e tutto ciò permette di evitare l' uso di pensanti immagini creando la grafica tramite l' utilizzo dei Css3.
Per chi volesse ecco il codice Css completo:

div.clock{
width: 400px;
height: 120px;
padding: 10px 20px;
margin: auto;
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
inset 0 -40px 50px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
inset 0 -40px 50px rgba(0, 0, 0, 0.2);
-o-box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
inset 0 -40px 50px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
inset 0 -40px 50px rgba(0, 0, 0, 0.2);
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
background: #ddd;
}
div.cont{
width: 100px;
height: 100px;
margin: 10px;
float: left;
background: #333;
text-align: center;
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
0 5px 1px rgba(0, 0, 0, 0.9),
inset 0 -1px 1px rgba(255, 255, 255, 0.3),
inset 0 2px 1px rgba(255, 255, 255, 0.3),
inset 0 -20px 30px rgba(255, 255, 255, 0.1),
inset 0 20px 30px rgba(255, 255, 255, 0.1),
0 0 15px 4px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
0 5px 1px rgba(0, 0, 0, 0.9),
inset 0 -1px 1px rgba(255, 255, 255, 0.3),
inset 0 2px 1px rgba(255, 255, 255, 0.3),
inset 0 -20px 30px rgba(255, 255, 255, 0.1),
inset 0 20px 30px rgba(255, 255, 255, 0.1),
0 0 15px 4px rgba(0, 0, 0, 0.1);
-o-box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
0 5px 1px rgba(0, 0, 0, 0.9),
inset 0 -1px 1px rgba(255, 255, 255, 0.3),
inset 0 2px 1px rgba(255, 255, 255, 0.3),
inset 0 -20px 30px rgba(255, 255, 255, 0.1),
inset 0 20px 30px rgba(255, 255, 255, 0.1),
0 0 15px 4px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
0 5px 1px rgba(0, 0, 0, 0.9),
inset 0 -1px 1px rgba(255, 255, 255, 0.3),
inset 0 2px 1px rgba(255, 255, 255, 0.3),
inset 0 -20px 30px rgba(255, 255, 255, 0.1),
inset 0 20px 30px rgba(255, 255, 255, 0.1),
0 0 15px 4px rgba(0, 0, 0, 0.1);
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
}
@-webkit-keyframes 'pulse'{
from{
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
}

to{
-webkit-transform: rotateX(360deg);
-moz-transform: rotateX(360deg);
-o-transform: rotateX(360deg);
}
}
.move{
-webkit-animation-name: pulse;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: pulse;
-moz-animation-duration: 1s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
}
div.cont h3{
line-height: 100px;
margin: 0px; padding: 0px;
color: #eee;
font-size: 4.5em;
}
div.cont span{
position: absolute;
margin-top: -40px;
font-family: Arial;
font-size: 1.1em;
color: #999;
}

div.cc{
width: 360px;
margin: auto;
}

Enjoy :)

Metodo .css() di jQuery

2012-02-04T02:52:00.000-08:00

Metodo .css() di jQuery
Il metodo .css() di jQuery permette di eseguire diverse operazioni riguardanti i Css degli elementi, infatti esso permette di scoprire le proprietà degli stili stessi e di modificarle a piacimento.
L' uso più comune di questo metodo è usarlo per prelevare uno stile del primo elemento trovato tramite selettore jQuery così:

$('p').css('background-color');

Questo esempio ritorna il colore di sfondo del primo paragrafo trovato, per esempio rgb(170,170,170).
Da notare che il metodo .css() restituisce lo stesso risultato anche se usiamo un termine differente come pattern, magari un esempio dal sito ufficiale chiarisce meglio:

$('div.left').css('float');
$('div.left').css('cssFloat');
$('div.left').css('styleFloat');

In questo caso se il float sarà verso sinistra il metodo jQuery restituirà la stringa left in ogni caso.

Un passo avanti
Ora poniamoci il problema di conoscere il valore del background di un paragrafo solo se ci passiamo sopra con il mouse; niente di arcano, infatti basta utilizzare l' evento mouseover() e la parola chiave this che ci permette di selezionare l' elemento corrente utilizzando solo 3 righe jQuery.

$('p').mouseover(function(){
alert($(this).css('background-color'));
});

Come vedi l' evento mouseover si attiva solo quando il mouse passa sopra ad un paragrafo, quando succede esso crea un alert e tramite this trova il background dell' elemento corrente.
Per l' esempio live vai qui.

Modificare gli stili degli elementi
Sempre tramite questo metodo è possibile modificare una o più proprietà di un elemento con estrema facilità, infatti con questa riga:

$('selettore css3').css('nomeProprietà','value');

modifichiamo la proprietà dell' elemento selezionato con il valore dentro value.
Se vogliamo invece settare più proprietà di un elemento possiamo fare così:

$('p').css({'background-color' : '#333', 'color' : 'white'});

Trovi l' esempio qui. In questo caso tutti i paragrafi cambieranno il colore di sfondo e quello del font.
Se cerchi una maggiore documentazione ti rimando alla pagina ufficiale della proprietà .css() di jQuery.

Per ora è tutto, se hai domande non esitare a chiedere qui, alla prossima.

Metodi addClass() e removeClass() di jQuery

2012-02-03T01:16:00.000-08:00

jQuery

Metodo .addClass di jQuery

Aggiunge la classe o le classi specificate al set di elementi passati tramite selettore jQuery di Javascript.

.addClass( nomeClasse );

Dove nomeClasse indica la classe o le classi da aggiungere separate tramite uno spazio; grazie questo metodo è anche possibile aggiungere una classe dopo che si sia verificato un determinato evento, come il passaggio del mouse sopra l' elemento.
Ecco un esempio pratico che si limita ad aggiungere una classe a tutti i paragrafi della pagina:

$('p').addClass('color');

E' importante capire che il metodo .addClass() non sostituisce una eventuale classe dell' elemento ma si limita ad aggiungerla ignorando le altre eventuali classi.
Ora vediamo un esempio che aggiunge tre classi a tutti i paragrafi contenuti nel tag div di un documento:

$('div p').addClass('color menu big1');

Metodo .addClass di jQuery
Se si vuole invece rimuovere una classe da un elemento si può utilizzare il metodo .removeClass() il quale permette di rimuovere una classe, classi multiple o tutte le classi da un set di elementi selezionati.
Per rimuovere una classe tramite questo metodo jQuery si utilizza questo metodo:

$('p.nascosto').removeClass('color');

In questo caso ho rimosso la classe color da tutti i paragrafi con classe nascosto. Come per il metodo precedente è possibile rimuovere più classi semplicemente separandole con uno spazio; è anche possibile rimuovere tutte le classi semplicemente lasciando il metodo vuoto, quindi se voglio cancellare tutte le classi di tutti i paragrafi scriverò:

$('p').removeClass();

Un passo avanti...
E' possibile inoltre, tramite tutte e due i metodi creare una funzione per eseguire un ciclo su tutti gli elementi selezionati, quindi è possibile per ogni elemento eseguire operazioni a parte assegnandoli una classe unica.
Ecco la sintatti da utilizzare per .addClass():

.addClass( function(index, currentClass){
//quello che vuoi qui...
});

Come potete notare questa funzione accetta 2 parametri(dati da Jquery), uno è l' index il quale a ogni ciclo indica la posizione dell' elemento (dal primo '0' all' ultimo...), il secondo invece, currentClass, indica la eventuale classe trovata sull' elemento. Ecco un esempio che aggiunge la classe big1 solo ai paragrafi che possiedono una classe font.

$('p').addClass(function(index, currentClass){
var addClass;
if(currentClass === 'font'){
addClass = 'big1';
}
return addClass;
});

Qui trovi un esempio.

Introduzione a jQuery

2012-02-02T01:19:00.000-08:00

Introduzione a jQuery

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

In italiano:

jQuery è una veloce e concisa libreria Javascript che semplifica la transazione Html, la manipolazione degli eventi, le animazioni, e le iterazioni Ajax per un rapido sviluppo web. jQuery è progettato per cambiare il modo in cui scrivi Javascript.

Questa frase la troviamo se ci dirigiamo sul sito ufficiale di jQuery (jQuery.com), nel quale possiamo trovare tutta la documentazione a riguardo.
jQuery è un ottimo framework Javascript che aiuta lo sviluppatore a essere più efficiente aiutando a scrivere meno ottenendo di più: Write Less, Do More, naturalmente mantenendo un ottima compatibilità cross-browser.

La nascita di jQuery risale al 2006, grazie allo sviluppatore John Resign con l' intento di creare un framework veloce e semplice, non per altro è il framework più utilizzato dagli sviluppatori nel mondo, attualmente l' ultima versione di jQuery è la 1.7.1.

Un altra notevole potenzialità è la possibilità di usare plugin specifici creati dagli sviluppatori di tutto il mondo; tramite questo sito puoi trovare una lista costantemente aggiornata di tutti i plugin infatti la sezione del sito ufficiale riguardante i plugin di jQuery è in ricostruzione.

Intervista a John Resing
Questo è solo una piccola parte dell' intervista completa, se vuoi leggerla tutta vai qui.

Riccardo: jQuery è uno dei framework Javascript più utilizzati (e forse il più utilizzato in assoluto) su scala mondiale. Quale è stata a tuo parere la ragione principale di questo grande successo?

John: La semplicità. Le API di jQuery sono molto più semplici di quelle fornite nativamente da Javascript e dalla maggior parte degli altri framework. Credo che la maggior parte dei framework tenda a complicare le cose anziché cercare la soluzione più semplice per poter portare a termine un lavoro. La semplicità è la caratteristica principale di jQuery. L'API è semplice, la buona documentazione permette di iniziare immediatamente ad utilizzarla e la totale resa cross-browser ne semplifica notevolmente l'utilizzo.

Inserire jQuery nelle nostre pagine:

Per iniziale a sviluppare con jQuery si deve scaricare la libreria dal sito ufficiale e inserirla nel proprio hosting, oppure è possibile inserirla direttamente nelle nostre pagine tramite le api di google o sempre dal sito ufficiale così:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

in questo modo siamo sicuri di avere sempre l' ultima versione del framework inclusa nella nostra pagina; per una maggiore documentazione sui metodi e sulle proprietà di jQuery puoi guardare nella documentazione in inglese oppure aspettare ulteriori alticoli da questo blog :)

Alla prossima!

Css3 pure Tablet Design

2012-01-30T02:42:00.000-08:00

Oggi vi presento un design creato solamente con i Css3 e le sue varie e fantastiche proprietà.
Con questo design ho cercato di riprodurre un generico tablet portatile, ecco la foto:

C'è anche uno slider funzionante, comunque provvederò ad aggiornarlo, infatti questa è solo la versione 0.1 :)

Se vuoi vedere la demo del tablet clicca qui.
Nella pagina troverai i sorgenti e potrai anche utilizzare lo slider creato anch' esso tramite Css3 e le transition.
Sono gradite opinioni e consigli sul Design; alla prossima.

Galleria di immagini Css3

2012-01-27T08:43:00.000-08:00

Nel mio precedente articolo ho spiegato come utilizzare l' elemento figure e vi avevo promesso che scrivevo un tutorial per creare una galleria di immagini con Css3, più in particolare questa:

Per visualizzare l' esempio completo vai qui.

<figure class="a">
<figcaption><p>WAR!</p></figcaption>
</figure>

Questo è il codice Html5 molto semplice che ho usato per creare la prima immagine che vedere (quella degli aerei); la classe a si riferisce all' immagine di sfondo, ora vediamo il css più da vicino

figure.a{
background: url('/Nerdz/img/wallpaper2.jpg') center center;
}

Essa non fa altro che impostare l' immagine di sfondo del cerchio posizionandola centralmente, ho dovuto ricorrere a questo metodo forse un po rozzo non per futili motivi, infatti in questo modo con qualunque immagine voi mettiate il cerchio sarà sempre un cerchio e non una forma strana o non prevista.
Qui puoi trovare un esempio del codice che ho appena scritto.

Come vedete dell' esempio passando sopra con il mouse sarà visualizzato un tooltip contenente il testo inserito dentro figcaption.

Se volete invece che il tooltip sia visualizzabile a prescindere che l' utente interagisca o no con l' immagine si deve semplicemente aggiungere una classe chiamata on al paragrafo

<figure class="a">
<figcaption><p class="on">WAR!</p></figcaption>
</figure>

Qui trovi l' esempio oppure guarda qui:

Per creare questo semplice effetto ho utilizzato la pseudoclasse css3 :hover in questo modo:

figure:hover p, figure p.on{
padding: 2px;
height: 20px;
display: block;
text-align: center;
background: #fff;
margin-top: 45%;
font-weight: bold;
font-size: 1.3em;
color: #666;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

Perchè non andare oltre con i Css3?
Sfruttando le transizioni Css3 è possibile creare animazioni sugli elementi della pagina Html(5), quindi sarebbe possibile aggiungendo un ulteriore classe allargare le immagini a piacimento quando l' utente ci passa sopra con il mouse, vediamo come:

<figure class="a animate">
<figcaption><p class="on">WAR!</p></figcaption>
</figure>

Qui trovi l' esempio live.

.animate{
transition-property: width, height, border-radius;
transition-duration: 500ms;
-webkit-transition-property: width, height, border-radius;
-webkit-transition-duration: 500ms;
-moz-transition-property: width, height, border-radius;
-moz-transition-duration: 500ms;
-o-transition-property: width, height, border-radius;
-o-transition-duration: 500ms;
}
.animate:hover{
width: 500px;
height: 500px;
border-radius: 300px;
}

Tramite questa classe, animate, aggiungendola all' elemento figure avremo la nostra animazione al passaggio del mouse sopra l' immagine, bello vero? Infatti questa classe aumenta gradualmente le dimensioni, da 300px sino a 500px e di conseguenza aumenta anche il border-radius.
Per visualizzare l' esempio completo vai qui!
Di seguito riporto il file Css3 completo:

figure{
float: left;
width: 300px;
height: 300px;
border-radius: 200px;
box-shadow: inset 0 40px 50px rgba(0, 0, 0, 0.2),
inset 0 -40px 50px rgba(0, 0, 0, 0.2),
inset 0 0 3px 1px rgba(0, 0, 0, 0.3),
0 0 3px 1px rgba(0, 0, 0, 0.2);
border: 5px solid #fff;
}
.animate{
transition-property: width, height, border-radius;
transition-duration: 500ms;
-webkit-transition-property: width, height, border-radius;
-webkit-transition-duration: 500ms;
-moz-transition-property: width, height, border-radius;
-moz-transition-duration: 500ms;
-o-transition-property: width, height, border-radius;
-o-transition-duration: 500ms;
}
.animate:hover{
width: 500px;
height: 500px;
border-radius: 300px;
}
figure:hover{
cursor: pointer;
box-shadow: inset 0 50px 30px rgba(0, 0, 0, 0),
inset 0 -50px 30px rgba(0, 0, 0, 0),
inset 0 0 3px 1px rgba(0, 0, 0, 0.3),
0 0 3px 1px rgba(0, 0, 0, 0.2);
}
figure:active{
}
figure.a{
background: url('/Nerdz/img/wallpaper2.jpg') center center;
}
figure.b{
background: url('/Nerdz/img/futurama2.jpg') center center;
}
figure.c{
background: url('/Nerdz/img/futurama1.jpg') center center;
}
figcaption p{
display: none;
}
figure:hover p, figure p.on{
padding: 2px;
height: 20px;
display: block;
text-align: center;
background: #fff;
margin-top: 45%;
font-weight: bold;
font-size: 1.3em;
color: #666;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

Figure e Figcaption con Css3

2012-01-26T04:49:00.000-08:00

L' elemento Figure è un nuovo tag introdotto grazie a Html5 che insieme a Figcaption permette di rappresentare un blocco distinto di informazioni in un testo, come una immagine, un grafico, tabelle, codici o altro ancora.

Questo elemento è molto utile in quanto facilità la formattazione del testo separando i due contenuti (testo e blocco) senza spezzare il flusso del documento stesso e grazie al secondo elemento Figcaption possiamo introdurre un ulteriore informazione per descrivere meglio il contenuto qual' ora per esempio fosse un immagine.
Sintassi base:

<figure>
<img src="/immagine1" alt="Immagine uno" />
<figcaption>Descrizione del' immagine</figcaption>
</figure>

Come ho detto l' elemento figure non ammette solo immagini, infatti potrete benissimo trovarvi nella situazione di dover formattare un codice di esempio in questo modo:

<figure>
<figcaption>Esemio 1.0, Javascript</figcaption>
<code>
var count = 0;
while(count <= 100){
alert(count);
count++;
}
</code>
</figure>

Il prossimo esempio invece, preso dal sito ufficiale del W3C presenta il tag <figure> con tre immagini all' interno:

<figure> <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
alt="The castle has one tower, and a tall wall around it.">
<img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
alt="The castle now has two towers and two walls.">
<img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
alt="The castle lies in ruins, the original tower all that remains in one piece.">
<figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
</figure>

Grazie a questi due nuovi elementi di Html5 abbiamo la possibilità di avere una maggiore flessibilità nel caso dobbiamo intervenire sugli stili dell' elemento stesso; nel caso di immagini lavorando un po' con le nuove proprietà Css3 possiamo creare, come al solito, fantastici effetti almeno dal mio punto di vista ma spero anche dal vostro. ^^
Nel prossimo articolo, infatti, spiegherò come creare questo design con Css3 contenente delle immagini(la seconda immagine rappresenta lo stato :hover):

Css3 Design: Cerchi con stile

2012-01-24T07:13:00.000-08:00

Con i Css3 come abbiamo visto in questa interfaccia è possibile creare fantastici effetti grafici solo tramite l' utilizzo di poche semplici proprietà; principalmente la proprietà border-radius e la box-shadow, ma è l' unione di molteplici stili che da luogo a questi design.
Oggi vedremo come creare dei cerchi con Css3 nei quali possiamo inserire facilmente del testo; ecco gli esempi di oggi:

Ti consiglio però di visualizzare la versione live nel sito ufficiale di Explosive Lab, dove potrai anche notare l' effetto :hover(quando passi con il mouse sopra l' elemento) e l' effetto :active(quando clicchi l' elemento).
In questo tutorial ti spiegherò come creare il primo effetto, gli altri due compreso il primo potrai scaricarli direttamente dal sito.
Iniziamo!

Struttura Html(5)
La struttura semantica di questo effetto è molto più semplice di quanto si possa pensare, infatti è composta da un div e da un p.

<div class="ball">
<p>Benvenuto nel mio sito, questi 3 cerchi cono stati creati interamente con i <em>css3</em>!</p>
</div>

Creiamo il cerchio
Dopo avere impostato gli stili base a nostro piacimento, quale il margin, il colore di sfondo e di conseguenza quello testuale dobbiamo creare un cerchio con i Css3 proprio come avevo spiegato qui. Per chi non lo avesse letto consiglio una rapida vista dell' articolo, comunque è semplicissimo, infatti basta impostare le misure del div (height e width naturalmente identiche) e definire il border-radius a metà di quel valore. In questo caso visto che dopo definiremo un padding per il paragrafo la misura degli angoli arrotondati dovrà essere maggiore. Quindi:

div.ball{
margin: 10px;
background-color: #444;
width: 200px;
height: 200px;
border-radius: 150px; /* non 100px ma 150px */
text-align: center;
border: 20px outset #eee;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.5),
inset 0 20px 20px rgba(0, 0, 0, 0.3),
inset 0 -20px 20px rgba(0, 0, 0, 0.3);
}

Bordo e ombre
Come potete vedere dal codice ho impostato anche un bordo di 20px per creare l' effetto 'cornice', per le sfumature invece ho usato la proprietà box-shadow di Css3 meglio spiegata in un precedente articolo qui.

Centrare il testo
Per centrare il testo all' interno del box ho usato il caro e vecchio padding; Ho anche aggiunto il colore del testo e ho impostato il font-weight a bold per avere il testo in grassetto.

div.ball p{
color: #ddd;
font-weight: bold;
padding: 40px 40px 40px 40px;
}

Attento, però, perchè se aumenti la larghezza del cerchio devi aumentare naturalmente il padding.

Gestire il click con i Css3
Per evitare fraintendimenti non intendo con questo titoletto di spiegarvi come reindirizzare l' utente su un url con i css3 ma vi spiego come modificare il box quando l' utente lo clicca o semplicemente ci passa sopra.
I selettori :hover e :active ci aiutano in questo caso e ci permetto di modificare il Css dell' elemento in questione. Ecco quindi il codice per completare il Css3:

/* se il mouse passa sopra l' elemento */
div.ball:hover{
cursor: pointer;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.5),
inset 0 20px 20px rgba(0, 0, 0, 0.3),
inset 0 -20px 20px rgba(0, 0, 0, 0.3),
inset 0 30px 50px rgba(255, 255, 255, 0.1);
}
/* se il mouse clicca l' elemento */
div.ball:active{
cursor: pointer;
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5),
inset 0 20px 20px rgba(0, 0, 0, 0.4),
inset 0 -20px 20px rgba(0, 0, 0, 0.4),
inset 0 30px 50px rgba(255, 255, 255, 0.1);
}

Ricorda che puoi scaricare tutto gratuitamente qui, enjoy!

:first-letter Css, modificare la prima lettera di un testo

2012-01-23T13:45:00.000-08:00

Grazie ai Css modificare la prima lettera di un elemento Html è semplicissimo, infatti grazie al selettore :first-letter possiamo creare uno stile aggiuntivo alla prima lettera del paragrafo in questione.
Scrivendo

p:first-letter{

color: #666;
font-size: 3em;

}

Otteniamo questo

Semplice vero? Purtroppo come in questo caso, se imposto un grande valore di font per la prima lettera la spaziatura con la riga sottostante è troppo elevata e questo non crea un bel effetto(vedi immagine).

Per ovviare questo problema devo impostare il line height a 100%. Così:

p:first-line{
line-height: 100%;
}

Per ottenere un effetto ancora più realistico possiamo assegnare anche un float left al selettore in questo modo:

p:first-letter{
color: #666;
font-size: 3em;
float: left;
}

In questo modo la prima lettera sembrerà più 'incassata', prendendo questo effetto:

Proprietà border radius e cerchi con Css3

2012-01-23T12:51:00.000-08:00

La proprietà border-radius di Css3 permette di arrotondare a piacimento gli angoli di un box generico, con più precisione essa definisce il raggio di 1/4 di un ellisse il quale definisce la forma dello spigolo in questione(vedi immagine sotto). Il primo valore indica il raggio orizzontale, il secondo valore indica quello verticale; se il secondo valore è omesso sarà copiato dal primo.

Esempio perso dal W3C

Per creare un semplice box arrotondato possiamo utilizzare la forma più semplice del border-radius in questo modo:

border-radius: 10px;

Se volete invece avere dei lati perfettamente rotondi dovrete impostare il valore del raggio esattamente a metà del valore del' altezza nel box sul quale attuare l' effetto. In questo caso, non sapendo il valore del paragrafo utilizzo un valore del border-radius sicuramente maggiore della metà del' altezza stessa.

border-radius: 50px;

Questo attributo permette anche, come introdotto inizialmente, la definizione individuale dell angolo per ogni spigolo del box.
Infatti

border-radius: 50px 10px 23px 1px;

è uguale a:

border-top-left-radius: 50px;
border-top-right-radius: 10px;
border-bottom-right-radius: 23px;
border-bottom-left-radius: 1px;

E ora un ultimo trucco... grazie a questa proprietà Css3, border-radius, lo ripeto ancora per farvelo restare in mente ^^, è possibile creare cerchi, infatti impostando un valore d' altezza e di larghezza uguali e il border-radius a metà di questo valore possiamo ottenerli senza il minimo sforzo. Ecco un esempio:

height: 300px;
width: 300px;
border-radius: 150px;

La proprietà box shadow Css3

2012-01-20T03:31:00.000-08:00

Css3 box-shadow

La proprietà box-shadow Css3 permette la creazione di una o più ombre di un box. La proprietà accetta da 2 a 4 parametri per il posizionamento dell' ombra, una parola opzionale inset per le ombre interne e un colore anch'esso opzionale (esadecimale o rbg/rgba).

box-shadow: 1px 1px 1px 0 #333;

Questa è la forma più semplice della proprietà, il primo valore (1px) corrisponde alla deviazione verso destra dell' ombra, il secondo (1px) indica lo spostamento verso il basso e il terzo valore del box-shadow indica il raggio di sfocatura dell' ombreggiatura, il quarto invece (0px) indica la distanza dell' ombra dal box in questione e come vedete ho omesso il 'px' cosa possibile quando il valore è '0'; infine l' ultimo ne indica il colore.Come potete notare ho applicato l' esempio a questo div, davvero semplice.
Ps: E' possibile utilizzare oltre ai colori esadecimali anche quelli in formato rgb/rgba, esempio:

box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);

Questo codice genererà una ombreggiatura nera sfumata con opacità di 0.5.

Valori negativi
I valori della proprietà box shadow accettano anche valori negativi, possiamo vedere l' esempio applicato a questo box; il codice in questione è questo:

box-shadow: -1px -1px 1px green;

Come vedete ho omesso il valore della distanza dell' ombreggiatura, infatti se un valore vale 0 è possibile tralasciarlo.

Ora per creare una sfumatura più complessa utilizzo il quarto valore, quello per la distanza dell' ombra. Codice:

box-shadow: 0 0 20px 1px orange; Risultato:

Sfumatura Css3 con la proprietà text-shadow!

Come vedete ho ottenuto un semplice effetto di ombreggiatura totale nei contorni del box.

La parola chiave inset
Per eguagliare tutte le potenzialita o quasi di un editor grafico il w3c propone anche una comoda keyword per creare ombreggiature interne. Questa parola è inset ed è possibile inserirla all' inizio e alla fine della dichiarazione box-shadow css3. Esempio:

box-shadow: inset 0 15px 20px #ccc;

Valori multipli
Naturalmente è possibile dare più effetti con text-shadow su un singolo box semplicemente aggiungendo una virgola alla fine della prima sfumatura e scrivendo il resto dopo di essa. Vediamo un esempio:

box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.5),
inset 0 20px 20px rgba(0, 0, 0, 0.3),
0 3px 3px rgba(0, 0, 0, 0.5);

Qui puoi trovare la referenza ufficiale del w3c.

Css3 Free UI con box-shadow
Visto che siamo a tema ti informo che ho creato questa UI con Css3 in particolare con la proprietà box-shadow scaricabile gratuitamente :)

E infine diamo un piccolo sguardo alla compatibilità nei browser della proprietà box-shadow:

Per i browser Mozzila e Safari e Chrome dobbiamo aggiungere il solito suffisso -webkit- e -moz-

-moz-box-shadow: -1px -1px 1px green;

-webkit-box-shadow: -1px -1px 1px green;

box-shadow: -1px -1px 1px green;

Per IE<=8 invece, come sempre, dobbiamo usare il suo filtro shadow

filter: progid:DXImageTransform.Microsoft.Shadow(color='green', Direction=50, Strength=5);

Only Css3 Free User Interface

2012-01-20T01:02:00.000-08:00

Oggi vi presento una semplice User Interface (UI) creata da me in Css3 e Html5 senza uso di script e immagini per creare l' effetto; il design è scaricabile gratuitamente a questo indirizzo.
Ecco un immagine dell' interfaccia Css3:

Css3 UI Free

Siete naturalmente liberi di utilizzarla e modificarla, per vedere l' esempio in azione vai nella pagina ufficiale.
Aspetto vostre opinioni in merito ^^

Linee guida sul’ accessibilità dei contenuti Web, parte 1

2012-01-18T08:34:00.000-08:00

Per chi non conosce i problemi di accessibilità che riguardano le pagine Web, sappiate che molti utenti operano su contesti molto diversi dal nostro:

Essi possono non essere in grado di vedere, sentire, muoversi o essere in grado di trattare alcuni tipi di informazione facilmente o del tutto.
Essi possono avere difficoltà a leggere del testo o a comprenderlo.
Essi possono non essere abilitati o non avere mouse e/o tastiera.
Essi potrebbero avere uno schermo per solo testo, un piccolo schermo o una connessione lenta.
Essi possono non parlare o capire fluentemente la lingua nel quale un documento è stato scritto.
Essi potrebbero essere in una situazione dove i loro occhi, orecchie o mani sono occupati o interferiti. (stanno andando al lavoro oppure lavorano in un ambiente rumoroso)
Essi possono avere una versione precedente del browser, un browser completamente diverso, un voice browser o un diverso sistema operativo.

Uno sviluppatore deve considerare queste differenti situazioni durante il design di una pagina. Per esempio usando un foglio di stile per controllare lo stile del font e eliminando l’ elemento font gli autori html avranno più controllo sulle loro pagine, rendere le pagine più accessibili a persone con ipovisione (problemi di vista) e condividere i fogli di stile spesso il tempo di download della pagina per gli utenti.

Prima parte della tradizione in italiano della pagina web del W3C sull’ accessibilità dei contenuti nelle pagine web.

Titolo ufficiale: Web Content Accessibility Guidelines 1.0

Css3 button Tutorial con box shadow

2012-01-14T04:29:00.000-08:00

Creare bottoni Css3 non è mai stato così semplice, infatti grazie alla proprietà css3 box-shadow è possibile ottenere ottimi risultati che possono benissimo eguagliare qualunque editor grafico. Anzi, se facciamo un paragone tra le due tecnologie (Css3 e per esempio Photoshop) sarà molto più sbrigativo creare il button con i Css3 applicando poche semplici regole.
Qui puoi guardare un esempio in azione dei bottoni che andremo a creare; il tuo browser potrebbe anche non essere compatibile con il box-shadow quindi ecco la immagine dei css3 button:

Per creare un bottone innanzi tutto ho usato il tag button così da avere una maggiore flessibilità:

<button class="shadow1 color">Css3 Button</button>

Così facendo ho assegnato al bottone due classi, la classe shadow1 nel quale verrà scritto il codice che dà l' effetto al bottone, e la classe color che ne definisce il colore.
Vediamo la prima classe: shadow1

.shadow1{
margin: 5px;
padding: 5px 10px 5px 10px;
text-align: center;
border: 0px solid;
box-shadow: inset 0 5px 10px rgba(255, 255, 255, 0.4), /* ombra bianca per la sfumatura */
inset 0 1px 1px rgba(255, 255, 255, 1), /* linea bianca sfumata in alto */
0 0 1px 1px rgba(0, 0, 0, 0.3), /*linea nera sfumata di contorno */
0 1px 1px rgba(0, 0, 0, 0.3), /* linea nera sfumata in basso */
inset 0 13px 15px rgba(255, 255, 255, 0.4); /* ombra bianca per la sfumatura */
border-radius: 3px;
color: #fff;
font-weight: bold;
}

In questa classe ho definito il margin e il padding, ho allineato il testo centralmente, definito il bordo a 0px cosa molto importante, impostato i bordi con una curvatura di 3px tramite border-radius, ho impostato il colore e la formattazione del testo a bold.
Ora diamo uno sguardo più attento alla proprietà più importante, box-shadow, ma prima voglio farvi una piccola introduzione.
La proprietà box-shadow accetta vari tipi di parametri, questa è la sua forma più semplice:

box-shadow: 1px 1px 1px #333;

In questo caso ho impostato un ombra spostata a destra e in basso di 1px con una sfocatura di 3px e di colore #333. Semplice vero? e per fare una ombra interna? Basta inserire il valore inset nella proprietà così:

box-shadow: inset 1px 1px 1px #333;

Ricordatevi anche che il colore può essere definito tramite la modalità rgb/rgba anche per impostare un opacità del colore. Esempio:

box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);

In questo caso ho impostato un ombra senza movimento, sfuocata di 10px e di colore nero sfuocato (0.3%).
Esiste anche un altro valore accettato dal box-shadow, che ne definisce la larghezza del' ombra in questione, essa va definita in pixel dopo l' effetto di sfocatura.

Ritornando a noi non è difficile capire cosa ho creato con la proprietà box-shadow, infatti ho anche inserito una spiegazione al fianco di ogni operazione effettuata.
Continuiamo con i css.

Ora dobbiamo definire lo stato del bottone :active e :hover che servono per dare un effetto più realistico nel callback con gli utenti:

.shadow1:hover{
cursor: pointer;
box-shadow: /* ombra bianca per la sfumatura */
inset 0 1px 1px rgba(255, 255, 255, 1), /* linea bianca sfumata in alto */
0 0 1px 1px rgba(0, 0, 0, 0.3), /*linea nera sfumata di contorno */
0 1px 1px rgba(0, 0, 0, 0.3); /* linea nera sfumata in basso */
}

.shadow1:active{
box-shadow: /* ombra bianca per la sfumatura */
inset 0 1px 1px rgba(255, 255, 255, 1), /* linea bianca sfumata in alto */
0 0 1px 1px rgba(0, 0, 0, 0.3), /*linea nera sfumata di contorno */
0 1px 1px rgba(0, 0, 0, 0.3), /* linea nera sfumata in basso */
inset 0 5px 10px rgba(0, 0, 0, 0.2) /* linea nera sfumata alta */;
}

La classe .shadow1:hover sarà attivata quando l' utente posizionerà il mouse sopra il bottone, la classe .shadow1:active verrà attivata quando l' utente cliccherà il bottone css3.

Ora passiamo alla parte più semplice, la definizione del colore; ecco il codice Css:

.orange{ background: #f28d22; } .orange:hover{ background: #f5a652; }
.red{ background: #ed3624; } .red:hover{ background: #f16153; }
.green1{ background: #36be62; } .green1:hover{ background: #58cf7f; }
.yellow{ background: #f9d10d; } .yellow:hover{ background: #fada3f; }
.violet{ background: #c148f0; } .violet:hover{ background: #d177f4; }
.blue{ background: #2e60cb; } .blue:hover{ background: #4673d5; }
.light_blue{ background: #69d2f7; } .light_blue:hover{ background: #9ae1f9; }
.brown{ background: #b38a51; } .brown:hover{ background: #c2a275; }

Grazie a queste 'microclassi' infatti potrai cambiare il colore semplicemente cambiando la classe color con uno dei seguenti colori.
Ma come crearne uno nuovo? Semplicissimo, vai qui, scegli un colore che ti piace e inseriscilo nel primo background, poi preleva un colore più chiaro ma della stessa sfumatura e inseriscilo nel secondo background e il gioco è fatto.
Se vuoi riguardare i Css3 button in azione clicca qui.

Text Shadow Css3

2012-01-12T02:55:00.000-08:00

Il Css3 una ha introdotto una nuova proprietà riguardante il testo, la proprietà text-shadow con lo scopo di aggiungere l' ombreggiatura ad ogni lettera di un testo a cui si vuole dare l' effetto.
La proprietà text-shadow si presenta in questo modo:

text-shadow: 3px 3px 5px #333;

Se per esempio provaste ad applicare questo effetto a un testo otterreste sempre questo:

Infatti il primo valore (3px) serve per definire lo spostamento verso destra dell' ombra, il secondo valore serve ad indicare lo spostamento verso il basso, il terzo invece indica la sfocatura dell' ombreggiatura in questione.

Vediamo un altro esempio:

text-shadow: 0px 0px 3px orange;

In questo caso ho lasciato i primi due valori a 0 e ho impostato la sfuocatura a 3px così che la sfumatura prenda un effetto diverso da quello precedente, quasi come un enfasi o un testo 'fluo'.
Terzo esempio:

Nel terzo esempio ho cercato di simulare il 3D aggiungendo più di un ombra, infatti la proprietà text-shadow supporta le ombre multiple semplicemente mettendo una virgola e scrivendo successivamente la nuova ombreggiatura; ecco il codice:

text-shadow: 1px 1px 1px #999,

2px 2px 1px #888,

3px 3px 1px #777,

4px 4px 1px #666,

5px 5px 1px #555,

6px 6px 1px #444,

7px 7px 1px #333,

8px 8px 1px #222,

9px 9px 1px #111,

10px 10px 1px #000;

Può sembrare difficile ma invece è tutt' altro che complicato, infatti sono in tutto 10 sfumature che servono per completare la scala di grigi (da #999 a #000 che è il nero), i primi due valori invece variano da 1 a 10px per aumentare la profondità dell' ombreggiatura.

Quarto esempio:

Per creare come nel' esempio un testo con solo il contorno dobbiamo rendere negativi alcuni valori, anche se non è il massimo della bellezza ecco il codice per crearlo:

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

Il colore della linea di contorno in questo caso è definito nel text-shadow che in questo caso è black.

Html5 Canvas demo #2

2012-01-11T05:28:00.000-08:00

Nell' articolo precedente ho spiegato come generare cerchi con il Canvas, e non solo, infatti introducendo le due funzioni c_arc() e c_arcRandom() ho creato uno script in grado di creare cerchi casuali in questo modo:

html5 canvas demo #1

Bene, oggi vi voglio presentare la seconda demo html5 creata sempre con canvas e Javascript capace sempre di generare cerchi casualmente in un tempo preciso, allo scadere dello stesso la tela canvas sarà ripulita e verranno ristampati nuovi cerchi e così via. Potrai anche variare il raggio dei cerchi con le frecce direzionali rispettivamente sinistra e destra per incrementare o diminuire la misura.

Per vedere la demo in azione vai qui (sito ufficiale di Explosive Lab)

Nella stessa pagina troverai una spiegazione esaustiva del codice e dell' esempio in questione, troverai anche un link a un file .js con il codice completo.

Cerchi con Canvas Html5

2012-01-09T06:23:00.000-08:00

Per designare un cerchio con il Canvas di Html5 bisogna usare il metodo arc() impostando come partenza dell' angolo a 0 e come fine 2*PI (in javascript = 2*Math.PI).

Questa è il metodo ufficiale che ho prelevato dal sito del W3C.

void arc(double x, double y, double radius, double startAngle, double endAngle, optional boolean anticlockwise);

Come vedete i valori da inserire sono considerati double quindi è possibile inserire valori con la virgola.
Prima della spiegazione del metodo vediamo un esempio:

window.onload = function(){

var canvas = document.getElementById('ex1');
var c = canvas.getContext('2d');

c.beginPath();

c.arc(100, 120, 60, 0, 2*Math.PI, false);

c.fillStyle = '#333';

c.fill();
}

Nello script in precedenza ho utilizzato la funzione c.arc per creare un cerchio in Canvas dove il centro di questo cerchio è dato dalle coordinate x(100) e y(120), r(60) indica il suo raggio e gli altri valori invece ( inizio angolo, fine angolo e l' anticlockwise)sono sempre li stessi. Ho anche riempito il cerchio del colore #333 grazie a c.fillStyle che permette di impostare lo sfondo di un oggetto canvas.

Risultato:

Un passo avanti.

E' possibile per esempio creare tanti cerchi nello stesso contesto canvas semplicemente riscrivendo quelle 4 righe di codice precedenti tot volte, questa tecnica però non sicuramente la più intelligente e benché meno sbrigativa infatti se si vuole generare un numero elevato di archi è bene creare una apposita funzione e richiamarla di volta in volta e perché no con un altra funzione :) .
Prima di tutto vediamo il risultato:

per vederlo in azione vai clicca qui.

Ora vediamo come creare la semplice funzione per generare cerchi casualmente. (Se vuoi una infarinatura sulla casualità in Javascript vai qui.)

function c_arc(x, y, r, fStyle){
c.beginPath();
c.arc(x, y, r, 0, 2*Math.PI, false);
c.fillStyle = fStyle;
c.fill();
}

Questa funzione accetta 4 parametri, due sono le rispettive coordinate spaziali x e y per il posizionamento, r è il raggio del cerchio e fStyle è il colore dello sfondo dell' oggetto; il resto del codice inserito nella funzione è inutile spiegarlo, infatti è identico al primo script visto in questo articolo stando dal fatto per le variabili x, y e r.

Bene, grazie a questa funzione possiamo generare cerchi a volontà, ma non casualmente, infatti per farlo abbiamo bisogno di quest' altra funzione:

function c_arcRandom(rMax, loop, fStyle){

var c1 = 0;

while(c1 <= loop){

var x = Math.floor(Math.random()*(canvas.width+1));

var y = Math.floor(Math.random()*(canvas.height+1));

var r = Math.floor(Math.random()*(rMax+1));

c_arc(x, y, r, fStyle);

c1++;

}

Anche questa è molto semplice da capire, infatti essa accetta 3 parametri, rMax che indica il massimo raggio che i cerchi potranno avere, loop indica il numero di ripetizioni da attuare, quindi il numero di cerchi da generare e fStyle indica sempre il colore di riempimento. Essa opera tramite un ciclo while che genera casualmente le tre variabili (x, y, r) chiamando poi la funzione c_arc() per generare i cerchi.

Vedi lo script in azione (http://explosivelab.altervista.org/Canvas/canvas1.html)

Elemento Section di Html5

2012-01-04T03:30:00.000-08:00

L' elemento section di Html5 rappresenta una sezione generica di un documento o di una applicazione. Una sezione è raggruppamento tematico del contenuto, tipicamente con una intestazione.

<section> </section>

Esempi di sezione potrebbero essere una suddivisione in capitoli di una pagina, in questo caso ogni capitolo rappresenterebbe una sezione con un suo heading separato. Un altro esempio potrebbe essere la suddivisione di una pagina in sezione, una per l' introduzione, una per le news e l' altra per i contatti.

Ora vediamo un semplice esempio di utilizzo del tag section:

<body>
<header>
<h1>Frutta fresca</h1>
</header>
<section>

<h1>Limoni</h1>
<p>I limoni sono buonissimi</p>
</section>
<section>
<h1>Fragole</h1>
<p>Ma le fragole sono imbattibili.</p>
</section>
</body>

Come vedete ho utilizzato due sezioni con un tag <h1> ciascuno, cosa molto conveniente per dare più attinenza alla pagina in questione; il tag <section> è molto utile, ma attenzione, il w3c sconsiglia di utilizzarlo per contenuti redistribuiti nella pagina (come nei blog gli articoli) infatti esso non è un contenuto generico ma deve rappresentare una parte ben precisa del documento.

Ringrazio il W3C per gli spunti, se vuoi maggiori informazioni guarda la documentazione ufficiale sul' elemento <section> qui.

Attributo Placeholder di Html5

2011-12-31T05:10:00.000-08:00

Placeholder Html5 Attribute

L' attributo placeholder di Html5 rappresenta un breve suggerimento (una parola o una frase breve) al fine di favorire l' utente con l' inserimento dei dati nel campo. Come suggerimento nel placeholder potresti inserire un valore di esempio o una breve descrizione del formato previsto.
Ecco un semplice esempio di utilizzo:

<p><label>Name: <input type="text" name="fullname" placeholder="Bred Follinbarg"></label></p>
<p><label>Address: <input type="email" name="address" placeholder="dudu@example.net"></label></p>
<p><label>Password: <input type="password" name="password" placeholder="*******"></label></p>
<p><label>Description: <input type="text" name="desc" placeholder="Email Account"></label></p>

Prova questo stesso esempio nel sito ufficiale di Explosive Lab. Demo

Per lunghi suggerimenti o altro testo aggiuntivo si consiglia di utilizzare l' attributo title; ricordo anche che l' attributo placeholder non deve essere usato in alternativa al label.

Supporto nei browser
Purtroppo l' Html5 essendo ancora in draft quindi in via di sviluppo l' attributo placeholder non è ancora pienamente supportato da tutti i browser. Di seguito riporto una semplice tabella esplicativa riguardo ai browser e al supporto dell' attributo:

Safari 5.1 (supportato)
Firefox 8(supportato)
Opera 11.1 (supportato)
Chrome 15 (supportato)
IE 6,7,8,9 (non supportato)

Vai qui per maggiori dettagli.

Aggiornata l' home page di Explosive Lab

2011-12-28T11:26:00.001-08:00

Aggiornata l' home page di Explosive Lab (link)

Auguri e buone feste a tutti (in ritardo)

2011-12-25T15:21:00.000-08:00

Cari lettori oggi vi auguro i miei più pieni auguri di natale (da notare l' orario dell' articolo, asd), come mio regalo oggi vi presento il blog di supporto di Explosive Lab su Tumblr chiamato It's so Easy!, in esso oltre a essere disponibili sotto forma di link veloci tutti gli articoli di questo blog potete anche trovare nuovi approfondimenti su tematiche sempre inerenti a: Html5, Css3, Javascript, Canvas e molto altro ancora; entraci subito!

Assegnare scorciatoie da tastiera con Html5

2011-12-20T04:44:00.000-08:00

Ad ogni elemento che può essere attivato o focalizzato(focus) può essere assegnata una singola scorciatoia da tastiera per attivarlo, utilizzando l' attributo accesskey di Html5. Ricorda però che noi sviluppatori non siamo gli unici a voler assegnare queste comode scorciatoie, infatti è bene controllare prima, a differenza del browser e del sistema operativo se esistono dell accesskey già predefinite tramite javascript.

Di seguito ho scritto la sintassi dell' attributo accesskey:
<elemento accesskey="tasto">

Esempio:
<nav>
<a href="/entra.html" accesskey="V">Entra.</a>
<a href="/esci.html" accesskey="F">Esci.</a>
</nav>

Nel caso di questo ultimo esempio se l' utente premerà la combinazione di tasti alt+V sarà reindirizzato nella pagina /entra.html, nel caso clicchi alt+F andrà nella pagina /esci.hml.
Come avete potuto notare assegnando una acceskey ad un elemento a (link), al susseguirsi di una precisa combinazione da tastiera si viene reindirizzati nel' apposito link; le caso di un form invece se si assegna una scorciatoia al verificarsi di essa viene impostato il focus dell' elemento in questione.

Esempio:
<form action="index.html">
Cerca: <input type="search" name="search" accesskey="s">
</form>

Nel precedente esempio come già detto se viene utilizzata la scorciatoia sarà attivo il focus su l' input di nome search; anche l' elemento textarea, allo scattare dell' evento viene attivato il focus su di esso, nel' elemento button invece oltre al focus viene inviata la richiesta del form inerente alla pagina web.

Funzioni obsolete di Html5

2011-12-19T14:06:00.000-08:00

Passando da Html4 a Html5 alcune funzioni per la formattazione di una pagina web usate in circostanze ristrette o di uso non usuale sono state considerate obsolete. Il gruppo W3C ha diviso queste funzioni in due categorie: quelle obsolete ma conformi e quelle obsolete e non conformi allo standard.

Funzioni obsolete ma conformi:

Non si dovrebbe specificare l' attributo 'border' su un elemento immagine. Se l' attributo è presente il suo valore deve essere 0.
Non si dovrebbe specificare l' attributo 'lenguage' su un elemento script. Nel caso fosse presente basta aggiungere il solito 'type="text/javascript"'.
Non si dovrebbe neanche più specificare, nel caso lo si faccia, l' attributo name sull' elemento a.

Queste funzioni obsolete se non corrette normalmente creano avvisi durante la validazione della pagina in questione.

Un altro tipo di funzioni è quello delle obsolete e non conformi allo standard, quindi fate bene attenzione, infatti questi elementi non sono più utilizzabili dopo la specifica di Html5.

Funzioni obsolete non conformi:

applet (usa embed o object)
acronym (usa abbr)
bgsound (usa audio)
dir (usa ul)
frame
frameset
noframes (usa iframe e i Css)
isindex (usa form espliciti con text field)
listing (usa pre e code)
nextid (usa GUIDs)
noembed (usa object o embed quando è necessario il fallback)
plaintext (usa il 'text/plain' MIME type)
rb (inutile, usa l' elemento ruby)
Lista completa con pagina ufficiale del W3C.

Come vedi tutti gli elementi eliminati o quasi hanno uno o più elementi sostitutivi adatti per svolgere quello scopo, per questo questi elementi sono stati considerati inutili e definiti come obsoleti; ciò aiuta molto la crescita del markup Html5 come futuro standard.

Metodo Random Javascript, numeri e scritte casuali.

2011-12-13T12:47:00.000-08:00

Con Javascript è possibile generare numeri casuali tramite il metodo random() dell' oggetto Math, infatti esso genera un numero casuale da 0 a 1 (decimali compresi); in questo articolo spiegherò il funzionamento del metodo e come visualizzare scritte casualmente.

var n = Math.random();
alert(n);
//0.3736578756943345

Come puoi vedere il risultato è un numero molto piccolo, quasi inutile per i nostri script, infatti solitamente è meglio usare numeri interi per creare rotazioni casuali di scritte o annunci; vediamo come:

var n = Math.random()*11;
alert(n);
//7.972552427323535

In questo caso il risultato è un numero reale con virgola da 1 a 10; ora basta togliere la parte decimale con il metodo Math.floor() che restituisce il numero intero arrotondato per difetto.

var n = Math.floor(Math.random()*11);
alert(n);
//3

Perfetto, ora quando la variabile sarà dichiarata assumerà un valore da 1 a 10, se per esempio vogliamo avere un range più vasto basta moltiplicare il metodo Math.random() per il numero massimo al quale si somma 1; per esempio:

var n = Math.floor(Math.random()*101);
alert(n);
//42

Ora vediamo come creare un visualizzatore di testo random con l' aiuto del random javascript.

Creo un array contenente gli elementi o le scritte da visualizzare.

var text = new Array('

<p>Questo è il primo elemento</p>',

'<p>Questo è il secondo elemento</p>',

'<p>Questo è il terzo elemento</p>',

'<p>Questo è il quarto elemento</p>',

'<p>Questo è il quinto elemento</p>'

);

Poi creo la variabile che conterrà il numero generato casualmente tramite la funzione Math.floor(Math.random()*(text.length) che genera un numero casuale da 0 sino alla lunghezza dell' array prelevata tramite length.

var n = Math.floor(Math.random()*(text.length));

Infine stampo il testo casuale da visualizzare.

document.write(text[n]);

Semplice Vero?

Pagine Doorway / Gateway

2011-12-09T04:43:00.001-08:00

Le pagine Doorway o pagine Gateway, letteralmente pagine di entrata, sono pagine ottimizzate per i motori di ricerca solo per precise parole chiave allo scopo di reindirizzare l' utente alla home page del sito da pubblicizzare. In poche parole le pagine Doorway sono pagine estremamente ottimizzate per i motori di ricerca allo scopo di raggiungere i primi posti nella SERP (pagina dei risultati del motore di ricerca).

Come detto in questo articolo queste pagine 'di entrata' appartengono al lato oscuro del Web Marketing, ma questo è solo un punto di vista, infatti creare pagine Doorway in modo intelligente è un ottima tecnica per portare visitatori al proprio sito; purtroppo una sovraottimizzazione può portare all' oscuramento della pagina da parte dei motori di ricerca.

Per creare una pagina Doorway, dopo averla ottimizzata a dovere (title,meta,h1, etc...) bisogna inserire un redirect, io solitamente uso Javascript in questo modo:

<script language="JavaScript">

</script>

Il 3000 indica il tempo in millisecondi dopo del quale si eseguirà il redirect.

Così con questo script dopo 3 secondi l' utente sarà reindirizzato verso la home page del sito allo scopo di sponsorizzare il prodotto o il sito in questione.

E' meglio evitare di usare queste tecniche senza pensare al danno che può portare una cattiva ottimizzazione della pagina Gateway, la sovraottimizzazione è penalizzata da Tutti i motori di ricerca.

Canvas Linee, tutorial sui tipi fondamentali, diagonali, assi e lati

2011-12-07T11:34:00.001-08:00

Nell' articolo precedente ho spiegato come impostare l' elemento Canvas e come tracciare una linea generica; in questo tutorial invece vi spiegherò come disegnare le diagonali,gli assi e i lati della tela Canvas in questione semplicemente con lo strumento linea.

Di seguito riporto i modi generali per farlo, infatti ho utilizzato canvas.height che è una variabile che indica l' altezza della tela Canvas e canvas.width per indicare la lunghezza di essa così da rendere compatibili le operazioni con qualunque lunghezza del riquadro utilizzato per il disegno.

Ricordo che per creare una linea con Canvas si utilizza la seguente forma:

context.moveTo(x,y);

context.lineTo(x,y);

context.stroke();

Ho inserito anche context.lineWidth = 5 per impostare la grandezza della linea.

Asse orizzontale (x)
context.moveTo(0, canvas.height/2);

context.lineTo(canvas.width, canvas.height/2);

context.lineWidth = 5;

context.stroke();

Asse verticale (y)
context.moveTo(canvas.width/2, 0);

context.lineTo(canvas.width/2, canvas.height);

context.lineWidth = 5;

context.stroke();

Diagonale 1 (da sinistra in alto sino a destra in basso)

context.moveTo(0,0);

context.lineTo(canvas.width, canvas.height);

context.lineWidth = 5;

context.stroke();

Diagonale 2 (da sinistra in basso sino a destra in alto)

context.moveTo(canvas.width, 0);

context.lineTo(0, canvas.height);

context.lineWidth = 5;

context.stroke();

Lato superiore

context.moveTo(0, 0);

context.lineTo(canvas.width,0);

context.linewidth = 5;

context.stroke();

Lato inferiore

context.moveTo(0, canvas.height);

context.lineTo(canvas.width, canvas.height);

context.linewidth = 5;

context.stroke();

Lato destro (left)

context.moveTo(0, 0);

context.lineTo(0, canvas.height);

context.linewidth = 5;

context.stroke();

Lato sinistro (right)

context.moveTo(canvas.width, 0);

context.lineTo(canvas.width, canvas.height);

context.linewidth = 5;

context.stroke();

Api HTML5: Canvas

2011-12-03T02:15:00.001-08:00

Il Canvas, in italiano tela, è un nuovo tag HTML5 che fornisce le Api per la stesura di immagini bitmap tramite javascript nel web. Questa specifica appartenente inizialmente ai sviluppatori di Apple passo' tra le mani di WHATWG e poi da quelle del W3C. Questo è un importantissimo standard che potrebbe sostituire il Flash già da subito.
E' bene sapere inoltre che il Canvas è un Api a basso livello e richiede una gestione manuale di tutte le interattività; esso principalmente è stato creato per avere una superficie dove renderizzare in brevi tempi bitmap. Oltre per creare effetti grafici il Canvas può essere utilizzato per creare animazioni o giochi anche complessi compatibili con qualunque browser o dispositivo mobile che lo supporta.

The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.

Per iniziare ad usare da subito l' elemento Canvas dovete inserire questo codice dentro il tag body.

<canvas id="example" width="500" height="500">

Se l' elemento non è supportato questo testo lo sostituirà.
</canvas>

Come vedete è molto semplice, basta inserire il tag e modificare la larghezza e l' altezza (defaults: 300)e magari modificare opportunamente i Css.

Per iniziare a divertirsi con Canvas invece sarebbe meglio avere della basi anche misere di Javascript, infatti per la creazione di immagini bitmap il Canvas si basa unicamente su questo linguaggio di scripting; vediamo un esempio che disegnerà una linea retta nella mia tela.

<script>
//creo una funzione che si attiva appena la pagina si carica.
window.onload = function(){
//trovo la tela 'example' nel documento
var canvas = document.getElementById('example');
//impostop il contesto 2d
var context = canvas.getContext('2d');

//traccio una linea
context.moveTo(100,150);
context.lineTo(450,50);
context.stroke();

};
</script>

Risultato:

Nell' esempio precedente ho solo mostrato una piccolissima parte del Canvas, infatti esso ha una grossa moltitudine di elementi totalmente utilizabili, eccone alcuni:

Linea
Arco, curva quadrata, curva di bezier
Angoli arrotondati
Forme personalizzate
Rettangolo, cerchio, semi cerchio
Colore di sfondo e di linea
Gradiente lineare e radiale, pattern
Specifiche per immagini e testo

Clicca qui per visitare la pagina ufficiale della specifica.
Qui puoi anche trovare un tutorial sulle linee fondamentali del Canvas.

Introduzione ai CSS3 - parte 2

2011-12-01T09:13:00.001-08:00

Introduzione ai CSS3

I CSS3 si basano modulo per modulo ai precedenti CSS2 usando questa specifica come proprio nucleo, così facendo essi sono completamente compatibili con i vecchi CSS; ciò vuol dire che se hai mai scritto uno stile CSS validato con i vecchi standard esso sarà compatibile con la nuova specifica CSS3.

Qui puoi trovare lo stato ufficiale dello standard; come puoi vedere i lavori sono presi abbastanza con comodo, ma questo è necessario per una avere buona stesura del linguaggio.
Il World Wide Web Consortium ha annunciato che sarà pronto per il luglio 2014, da questo puoi capire fin da subito che i CSS3, attualmente, non sono completamente supportati da tutti i browser, anche se la disattenzione degli stessi utenti che non lo aggiornano compromettono maggiormente l' incompatibilità di uno stile.
Questo non significa che un sito web non possa apparire uguale davanti a tutti browser, anzi, è un traguardo che tutti i buoni sviluppatori web dovrebbero avere, poi sta a te decidere secondo la tua ragione; se pensi che la compatibilità cross-browser sia una lotta inutile fortunatamente sei libero di sviluppare come meglio credi.

Migliorie dei CSS3 rispetto ai CSS2

I CSS3 rispetto ai CSS2 sono completamente modulari, questo denota una profonda modifica alla struttura del linguaggio. Di seguito riporto i moduli più importanti:

Selectors

I Selettori sono dei pattern che selezionano gli elementi in un documento HTML o XML, essi esitono sin dai CSS1 e sono stati ampliati maggiormente con l' avvento dei CSS3...

CSS Color

I CSS3 utilizza le proprietà relative ai colori per il testo, lo sfondo, i bordi e altre parti del documento stesso. Nella nuova specifica i CSS3 aggiunge nuovi metoti per la definizione del colore...

CSS Multi-column Layout

I sistemi a griglia sono fondamentali per l' impaginazione, nei CSS3 infatti è stato introdotto un nuovo modulo per l' impaginazione web a colonne multiple...

CSS Text Level 3

Questo modulo definisce le modalità per la manipolazione del testo e le specifiche per il modello di elaborazione, essa copre le interruzioni di riga, l' allineamento, la gestione degli spazi, la decorazione del testo e la sua trasformazione...

Generare colori casuali con Javascript

2011-11-26T02:13:00.001-08:00

Oggi vi voglio presentare una piccola classe Javascript da me creata per generare colori HTML casualmente.

Attualmente la classe è molto semplice ma essenziale, infatti puoi decidere quale codifica dare al colore che ti sarà restituito; puoi scegliere:

Hexadecimal notation #EC5C64
Functional notation rgb(222,222,6)

Puoi anche decidere l' opacità di un colore se scegli la Functional notation.
Codice:

 function color_html(format,opacity){
   if(format == 'hex'){
     var color = '#';
     var simble = '0123456789ABCDEF'.split('');
     for(var i=0; i<=5; i++){
       color +=  simble[Math.round(Math.random() * 15)];
     }
    return color;
   }
  
   else if(format == 'dec' && opacity == 0){
     var color = 'rgb(';
     for(var i=0; i<=2; i++){
       color += Math.round(Math.random() * 254);
       if(i<2){color += ',';}
     }
     return color += ')';
   }
   
   else if(format == 'dec' && opacity != 0){
     var color = 'rgba(';
     for(var i=0; i<=2; i++){
       color += Math.round(Math.random() * 254) + ',';
       if(i==2){ color += opacity + ')' }
     }
     return color;
   }  
  }

Come vedete dallo script tutto il codice è incluso in un unica funzione chiamata color_html() che accetta 2 parametri, il format indica la notazione di ritorno del colore, le possibilità sono 2, o hex(esadecimale) o dec (decimale), nel caso scegliete dec potete anche impostare l' opacità da 0.1 a 1 per variare l' opacità del colore stesso.

Dopo avere inserito la funzione nel codice per avere un colore esadecimale casuale per esempio basta scrivere:

<script>

  var c = color_html('hex');

  //stamperà per esempio #53C47C

  alert(c);

</script>

Per avere un colore in notazione decimale senza opacità invece si scrive semplicemente:

<script>
  var c = color_html('dec');
  //stamperà per esempio rgb(161,116,249)
  alert(c);
</script>

Per un colore sempre in notazione decimale con opacità basta aggiungere un altro valore (da 0.1 a 1):

<script>

  var c = color_html('dec',0.4);

  //stamperà per esempio rgba(54,178,118,0.4)

  alert(c);

</script>

Per ora è tutto, appena saranno fatte modifiche sostanziali allo script scriverò un nuovo articolo.

Web Marketing e ROI, ritorno degli investimenti

2011-11-06T05:28:00.000-08:00

Il Web Marketing è una branca del marketing che si occupa di tutte le strategie e tecniche per il commercio online. Esso è fondamentale durante la stesura di un progetto nel web, infatti il Web Marketing prende in considerazione svariate tecniche come:

Posizionamento nei motori di ricerca (SEO).
Ottimizzazione del sito o dell' applicazione.
Affiliazioni e banner pubblicitari ( campagne Pay per click, etc...).
Mentioning: tecnica di web marketing 2.0 che sfrutta i social network per promuovere il progetto.
Viral Marketing o Marketing Virale: che sfrutta l' originalità dell' idea di base per effettuare un passaparola da un gruppo ristretto di soggetti a un elevato gruppo di utenti finali. Esso per esempio è molto utile per una rapida creazione di una mailing-list.
Email Marketing: invio di massa di e-mail pubblicitarie a una lista di utenti inscritti a una mailing-list.

Naturalmente le strategie di Web Marketing sono molto più numerose da quelle da me citate, infatti esso è costantemente in continua evoluzione; il continuo sviluppo delle tecnologie del web provoca il continuo evolversi di questo business.

Ma Cos'è il ROI?
Il ROI (Return on investment) in italiano ritorno degli investimenti è un indicatore relativo utilizzato per capire quanto rende un capitale investito dall' azienda. Esso nel web marketing ha lo stesso utilizzo.

in formula:

Ma ecco cosa dice Andrea Boaretto riguardo al ROI nel web marketing e nei social media.

Geolocalizzazione con le API di HTML5

2011-11-05T12:42:00.000-07:00

L' Html5 API Geolocation definisce un interfaccia di alto livello alle informazioni sulla posizione associate al dispositivo in questione, come latitudine e longitudine. Le fonti comuni di informazioni sulla posizione comprendono il GPS, segnali di rete, IP address, Wifi e altro ancora.

Per utilizzare questa API è necessario l' utilizzo di Javascript, di seguito riporto un esempio esplicativo:

<script>

    function showMap(position) {
      //Qui è possibile prelevare le informazioni:

      var Latitudine = pos.coords.longitude;

      var Longitudine = pos.coords.latitude;

      var Accuratezza = pos.coords.accuracy;

      var Altitudine = pos.coords.altitude;

      var Accuratezza_Altitudine = pos.coords.altitudeAccuracy;

      var heading = pos.coords.heading;

      var Velocità = pos.coords.speed;

    }

    //Richiesta di posizione.
    navigator.geolocation.getCurrentPosition(showMap);

</script>

Infine vi voglio presentare una semplice web application scritta da me in HTML5 e CSS3:
Geolocation with Html5

Cos'è un infoprodotto?

2011-11-05T05:45:00.000-07:00

Un infoprodotto è un prodotto informativo principalmente basato sul web, esso è rivolto a un particolare gruppo di persone interessate all' argomento. La presentazione di un infoprodotto può variare di volta in volta, può essere un Ebook, un video corso, un evento live, un file mp3 e altro ancora...

Per creare un infoprodotto è necessario essere un esperto nell' argomento per il quale si vuole creare la guida, infatti creare un infoprodotto copiando informazioni per il web non è un modo corretto per crearlo, anzi, solitamente una nicchia di mercato cerca un infoprodotto proprio quando le informazioni che cercano non sono reperibili sul web, o sono scritte in malo modo senza approfondimenti.

Per pubblicizzarlo invece ci vuole una buona dose di web marketing, per esempio se io creo un video corso sull' SEO Marketing l' indicizzazione sui motori di ricerca sarà pressoché nulla per via del materiale usato; purtroppo Google non sa ancora indicizzare i contenuti di un video.

Quindi se creo una guida sul web è maggiormente indicizzata?
No, infatti il vostro infoprodotto sarà vendibile sino a che resterà unico, quindi privato; infatti se la vostra guida potrà essere indicizzata dagli spyder dei motori potrà essere raggiungibile anche da qualche malintenzionato.

Infine vi voglio ricordare che se vendete un infoprodotto non cartaceo (modo più usato), come un video esso sarà valorizzato molto meno dagli utenti nel senso di prezzo. Vendere una cosa astratta, che non si può toccare è difficile ma abbassando i prezzi si arriva a un giusto compromesso.

The first W3C Conference 2011, la prima conferenza del W3C

2011-11-01T16:12:00.000-07:00

Il W3C annuncia la sua prima conferenza che si terrà il 15 e il 16 novembre pesso Redmond Marriott Town Center (7401 164th Avenue NE Redmond, WA 98052 USA); essa tratterà dell' HTML5, tema ormai scottante nella quotidianità di internet e delle Web Open Platform.

Il W3C lascia a tutti voi questo messaggio ( da me tradotto ):

Se tu sei uno sviluppatore o un designer che vuoi ascoltare le ultime novità riguardanti l' HTML5 e le open web platform salva questa data.
Un limitato numero di posti saranno resi disponibili per la conferenza dal vivo [...]

Link al sito ufficiale.

Introduzione ai CSS3

2011-11-01T06:05:00.000-07:00

Quando la prima specifica CSS fu pubblicata, tutto il CSS fu contenuto in un documento definito CSS Level 1. Il CSS Level 2 venne definito a sua volta in un singolo documento a capitoli.Tuttavia per i CSS oltre al Level 2, il CSS Working Group ha scelto di adottare un approccio modulare, dove ogni modulo definisce una parte del CSS. Questo divide la specifica in pezzi più maneggevoli permettendo una più immediata modifica della specifica.

Il CSS3 (Level 3) si basa sul Css Level 2, modulo per modulo, esso usa la specifica CSS2.1 come proprio nucleo. Ogni modulo aggiunge funzionalità e/o sostituisce parti della specifica CSS2.1.

Ma a cosa servono i CSS3?

I CSS3 hanno lo scopo di rappresentare e impaginare graficamente una pagina HTML, quindi permette di superare i limiti del precedente linguaggio, ma non solo. Essi inoltre permettono di creare semplici animazioni e trasformazioni, cambiare l' opacità di un elemento, bordi arrotondati, ombre, Web fonts e layout multicolonna.
In conclusione si può dire che i Css3 sono un vero punto di forza per un qualunque sviluppatore web, ma state attenti, ricordo che la specifica non è ancora uno standard, quindi potrete trovare problemi di incompatibilità fra browser.

Qui trovate maggiori dettagli sui CSS3 nel sito ufficiale del W3C.

L' HTML5 è sicuro? report security

2011-10-31T06:03:00.000-07:00

L' ENISA (European Network and Information Security Agency) nel 31 luglio ha redatto un pdf di 60 pagine nel quale espone oltre 50 minacce, problemi e raccomandazioni riguardanti l' HTML5 ma non solo; esso ha voluto essere un contributo per migliorare gli standard del W3C soprattutto in tema sicurezza per gli utenti, quindi anche per il proprio browser.

I maggiori problemi indicati sono:

Geo-location Cache Polling, possibilità di accedere alla cache per visualizzare l' utlima geolocalizzazione effettuata.
Form Tampering, grazie alla nuova possibilità di inserire un bottone fuori dal form di riferimento l' attaccante può facilmente dirottare la destinazione del link o l' azione del bottone.
Controlling Functionality, Web Messaging: Origin delegation, HTML5 Content Handlers, HTML5 Disabling Click-jacking Protection, Controlling functionality, Permission system design e altro ancora.

E' molto importante dice Giles Hogben di ENISA, che "per la prima volta" durante la stesura di una specifica HTML sia incorporata la sicurezza in fase di progettazione. Il W3C ha ancora qualche anno per correggere al meglio tutte le vulnerabilità di HTML5 e le sue API prima di rendere standard il markup.

Vi invito a scaricarlo per maggiori informazioni (in inglese).

Protocollo Sitemap, come utilizzarlo?

2011-10-31T04:28:00.000-07:00

La Sitemap è un file XML che contiene gli URL di un sito web con dei metadati aggiuntivi allo scopo di consentire ai motori di ricerca di eseguire la scansione del sito in modo più efficiente.

Utilizzare il protocollo Sitemap non assicura il posizionamento nei motori di ricerca, ma facilita la scansione del sito da parte dei crawler, i quali scansionando il file trovano gli url più importanti e la frequenza delle modifiche. Questo è molto importante se si intende creare un sito ben ottimizzato dai principali motori di ricerca.

Come ho detto il protocollo è formato da un file XML che deve contenere un tag di apertura <urlset>, un tag <url> e dentro ogni tag url un tag <loc>; tutto il resto è opzionale.

Ecco un esempio esplicativo di una Sitemap standard:

<?xml version="1.0" encoding="UTF-8"?>

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

   <url>
      <loc>http://www.esempio.it/</loc>

      <lastmod>2011-01-01</lastmod>

      <changefreq>monthly</changefreq>

      <priority>0.9</priority>
   </url>

</urlset>

Nell' esempio da me riportato puoi notare anche 3 nuovi attributi:

loc, URL della pagina. L'URL deve iniziare con il protocollo (ad esempio http) e terminare con una barra finale, se richiesto dal server web. Questo valore deve contenere meno di 2048 caratteri.

lastmod, Data dell'ultima modifica del file. Questa data dovrebbe avere il formato W3C Datetime, che ti consente di omettere l'ora, se lo desideri, e di utilizzare il formato AAAA-MM-GG.
Questo tag è separato dall'intestazione If-Modified-Since (304) che il server può restituire ed è possibile che i motori di ricerca utilizzino queste informazioni da entrambe le sorgenti in modo differente.

priority, La priorità di questo URL rispetto ad altri URL del sito. L'intervallo di valori validi è compreso tra 0,0 e 1,0. Questo valore non influisce sul modo in cui le tue pagine vengono confrontate con le pagine di altri siti, ma ti consente di indicare ai motori di ricerca le pagine che reputi più importanti per i crawler. La priorità predefinita di una pagina è 0,5.

Per maggiori informazioni vai sul sito ufficiale

HTML5 - Chi lo usa?

2011-10-30T06:59:00.000-07:00

L' HTML5, come ho già detto è un markup ancora in fase di sviluppo dal W3C, esso è una tecnologia destinata ad essere lo standard più utilizzato per la stesura di pagine e applicazioni web based.

Purtroppo per colpa della sua incompatibilità non si può assicurare una totale uguaglianza della pagina web nei differenti browser dei visitatori.

Credete che queste piccole disavventure scoraggino i più innovativi sviluppatori?
No signore; infatti viste tutte le sue nuove API e i nuovi elementi l' Html5 è ampiamente utilizzato dai principali sviluppatori web in svariati casi, Google per esempio ultimamente sta modificando la stessa home page e il proprio YouTube rendendo l' Html5 parte integrante della pagina.

Un altro esempio del trionfo dell' HTML5 è stato creato da Nessuno, programmatore italiano creatore del social/forum nerdz.eu creato appositamente per persone appassionate tecnologia.

Se infine volete lustrarvi gli occhi con qualche sito scritto in Html5 e Css3 clicca qui.
L' HTML5 è una tecnologia da non sottovalutare, basta usare un po di cautela durante la stesura delle applicazioni per evitare le incompatibilità fra browser; le quali tuttora esistono e continueranno ad esserci.

Google Webmaster Tools - introduzione

2011-10-30T05:56:00.000-07:00

Google Webmaster tools è un ottimo strumento gratuito messo a disposizione da Google per monitorare il traffico in entrata propri siti web, l' indicizzazione del proprio sito sullo stesso motore di ricerca ed eventuali errori di ottimizzazione.

Grazie ad esso è possibile avere una panoramica quasi completa del proprio sito, per questo Google Webmaster tools è un servizio da sfruttare per il proprio marketing e per pianificare l' andamento del proprio network.

I principali servizi offerti sono:

Configurazione sito

Sitemap, Accesso crawler, Sitelink, Cambio di indirizzo, Impostazioni, Parametri Url.

Il tuo sito sul web

Query di ricerca, Link che rimandano al tuo sito, Parole chiave, Link interni, Statistiche sugli iscritti.

Metriche +1

Impatto sulla ricerca, Attività, Pubblico.

Diagniostica

Malware, Errori di scansione, Statistiche scansione, Visualizza come Googlebot, Suggerimenti HTML.

Funzioni sperimentali

Ricerca personalizzata, Anteprime istantanee, Prestazioni del sito, Sitemap Video.

Per accedere ed per iniziare a monitorare il tuo sito devi eseguire il login con un account di Google qui e cliccare su aggiungi sito.
Dopo aver fatto ciò basterà aspettare qualche giorno per visualizzare le prime statistiche del tuo sito; consiglio ai principianti di dare un occhiata alle funzioni da me prima elencate direttamente sul portale.

Social Game Economics Infographic

2011-10-30T03:33:00.000-07:00

L' industria dei social game o browser game è un settore molto proficuo, infatti le entrate nel 2011 hanno superato i 4 miliardi; di questo passo nel 2013 si supereranno i 6 miliardi.

about social gamers

il 35% dei giocatori online non ha esperienze di gioco passate
in america, 1 persona su 5 ha già giocato ad un gioco online
83% dei videogiocatori usa Facebook per i giochi online

in-game purchases

6 miliardi, questa è la cifra predetta che secondo gli esperti i social gamers spenderanno entro il 2013
il 41% degli utenti hanno eseguito più di un acquisto dalle piattaforme di gioco online
il 53% dei giocatori negli U.S e dell UK hanno speso e/o acquistato soldi virtuali tramite questi giochi
l' 83% dei giocatori sempre negli U.S e dell UK hanno acquistato un regalo virtuale
il 28% dei giocatori negli U.S e dell UK hanno acquistato una valuta virtuale in cambio di soldi reali

mobile gaming

il 70%/80% dei download mobili sono giochi
54 miliardi, la cifra che l' industria mobile dovrebbe guadagnare entro il 2015
84%, giocatori in possesso di un tablet
140 milioni, numero di download eseguiti per scaricare Angry Birds

major acquistions

EA ha acquistato Playfish per per 40 milioni
Disney ha acquistato Playdom per 763.2 milioni

HTML5 Infographic + Traduzione

2011-10-25T11:58:00.000-07:00

Dopo avere visto e letto questa splendida infografica su HTML5 e tutte le sue caratteristiche principali ho ritenuto opportuno tradurla, per rendere il contenuto accessibile a tutti evitanto la traduzione.

L' HTML è un linguaggio con la quale creare documenti strutturati secondo una semantica per il testo, le intestazioni, i paragrafi, le liste, i link, i quote e altri numerosi tag.
L' HTML5 è la prossima revisione dell' HTML, il quale può essere utilizzato per creare nuove funzioni dalla quale trarre beneficio sia come utenti sia come sviluppatori. L'HTML5 ha introdotto vari elementi e attributi, di seguito riporto i più importanti:

L' elemento Canvas

L' elemento Canvas può essere utilizzato per creare grafici, grafica per giochi o semplici immagini.

Tutto questo senza l' utilizzo di plug-in aggiuntivi, le possibilità sono infinite.

L' elemento Video

Inserire video senza utilizzare plugin da terze parti come Adobe Flash e Apple QuickTime era sino ad ora impossibile. Grazie all' elemento Video ora lo è. Esso ha intenzione di diventare un nuovo standard per visualizzare video online.

La Geolocalizzazione

Intercettare la posizione di un utente non è una novità nel web. Infatti, più siti la trovano mediante la locazione dell' IP address. Ma questo non è sempre possibile, quindi la geolocalizzazione con HTML5 è un metodo alternativo corretto per individuare la locazione di un user.
La nuova idea è ottenere le informazioni tramite il WiFi e il GPS.

Le applicazioni web Offline

The offline web application permettono all' utente una continua iterazione con una applicazione web o dei documenti anche quando la loro connessione non è disponibile. L' utente può, per esempio, accedere alla email localmente senza connettersi a internet o senza installare alcun client esterno.

Non ho ritenuto necessario tradurre la seconda parte del testo che tratta della compatibilità della geolocalizzazione tra i vari browser, potete trovare tutte le informazioni necessarie qui; l' ultima parte, riguardante al confronto fra HTML5 e Flash verrà trattata più avanti.

Cos'è l' HTML5? - introduzione

2011-10-25T02:37:00.000-07:00

L' HTML5 è un linguaggio di markup sviluppato dal W3C, più precisamente da dei membri del gruppo stesso che nel 2004 decisero di creare un nuovo progetto finalizzato per continuare l' evoluzione del' Html. Questo gruppo prese il nome di Web Hypertext Application Working Group (WHATWG), gruppo di lavoro distaccato dal W3C stesso, anche se due anni più tardi (2006) lo stesso W3C prese parte allo sviluppo dell' HTML5 e si unì al gruppo.
Esso è un insieme di tecnologie e API create appositamente per rendere sempre più funzionale il normale flusso di una pagina web e per favorire le compatibilità cross-browser per gli sviluppatori.

Attualmente l' HTML5 è in fase di sviluppo (draft) ma ciò non vuol dire che esso non è utilizzabile, infatti i principali browser più moderni, quali Google Chrome, Opera, Mozzilla e ultimamente anche Internet Explorer(>=9) hanno incluso questa specifica anche se non totalmente.

Per scoprire se il tuo browser è compatibile clicca qui (HTML5 test).

Cosa c'è di nuovo nell' HTML5?

Nuovi tag strutturali per rendere più semantico il codice (header,aside,section,footer...) e estesi tag con nuovi attributi per dare una maggiore accessibilità al sito o alla applicazione
Modificati o deprecati tag già esistenti praticamente inutilizzati
Aggiunto supporto per Canvas, permettendo di creare animazioni e grafica vettoriale con Javascript e supporto anche per SVG per avere un approccio vettoriale.
Introduzione alla Web Storage, metoto per la memorizzazione dei dati molto più efficiente dei vecchi cookie
API per la Geolocalizzazione con HTML5 con le quali è possibile conoscere la posizione del visitatore quasi precisamente a seconda delle informazioni rilevate
Web Workers: consentendo di eseguire codice javascript in modo asincrono

Maggiori dettagli sulla specifica (W3C).

SEO, Search Engine Optimization, Trend

2011-10-24T12:00:00.000-07:00

Cos' è il Search Engine Optimization?
Il SEO è l' insieme di tecniche e attività finalizzate ad ottenere maggiore visibilità e quindi maggiore traffico per un sito web; quindi avere un sito non ottimizzato porterebbe di conseguenza a una minore visibilità se non a una totale esclusione dai motori di ricerca. Questa ottimizzazione non ha sempre degli effetti immediati, infatti l' ottimizzazione sui principali motori è assai ardua e duratura.

In poche parole essere un SEO coi fiocchi significa saper ottimizzare un sito a seconda della richiesta o della necessita qualunque contenuto si voglia 'sponsorizzare'.

Queste tecniche e attività vengono eseguite direttamente sul codice HTML, su tutti i contenuti di un sito e in modo non troppo differente anche nello stesso testo che stai leggendo in questo momento.

Il lato oscuro del SEO Marketing.
Il SEO Marketing più precisamente Search Engine Marketing è la parte di Web marketing che si applica esclusivamente ai motori di ricerca.
Per lato oscuro intendo tutte quelle tecniche utilizzate per raggiungere maggiori risultati in minor tempo possibile utilizzando tecniche che non rispettano le linee guida base dei motori di ricerca; ecco di seguito le più comuni:

Testo e link nascosti con parole chiave nascoste, Pagine doorway o gateway, Keyword stuffing, Desert scraping, Cloaking

In un post più esplicativo spiegherò queste tecniche con più dettagli.

Cos'è L'HTML?

2011-10-23T13:12:00.000-07:00

L' HTML (HyperText Markup Language) è un linguaggio usato per la stesura di pagine nel Web, esso non è un vero e proprio linguaggio di programmazione ma è un linguaggio di markup, infatti è privo di variabili o altre caratteristiche alla base di un comune linguaggio.

L' HTML nasce per la necessità di condividere pagine e informazioni sul web con uno standard unico; viene sviluppato da Tim Berners-Lee al CERN di Ginevra assieme al protocollo HTTP il quale viene utilizzato come sistema per la trasmissione della informazioni nel World Wide Web.

La sintassi di questo linguaggio di markup viene aggiornata costantemente dal W3C, che dal 2007 ha ricominciato la definizione di HTML5, attualmente in stato di bozza (draft).

Ogni documento ipertestuale deve essere scritto in un file di estensione .htm o .html, di seguito riporto un esempio ( in HTML5 ):

<!DOCTYPE HTML>
<html>
 <head>
  <title>Titolo della pagina</title>
 </head>
 <body>
  <p>Testo visualizzato nella pagina</p>
 </body>
</html>

A seconda della versione del linguaggio la formattazione è leggermente diversa, le principali sono:

HTML 1
HTML 2
HTML 3.2
HTML 4
HTML 5 (draft)

World Wide Web (WWW)

2011-10-23T03:43:00.000-07:00

Il World Wide Web, in sigla WWW, anche conosciuto come grande rete mondiale, è un servizio di internet che permette di navigare ed usufruire di un insieme vastissimo di contenuti multimediali e di ulteriori servizi accessibili a tutti o ad una parte selezionata degli utenti di Internet.

Il World Wide Web nasce principalmente nel 1991 presso il CERN di Ginevra, quando il ricercatore Tim Berners-Lee definì il protocollo HTTP (HyperText Transfer Protocol); più precisamente nel 6 agosto 1991 quando lo stesso ricercatore mise online su internet il primo sito web.

Solo due anni dopo il CERN decide di rendere pubblica la tecnologia alla base del web aprendo una nuova strada piena di possibilità e tecnologia nella quale ormai siamo immersi.

World Wide Web Consortium (W3C)

2011-10-23T02:54:00.000-07:00

Il World Wide Web Consortium (W3C) è una comunità internazionale dove i membri organizzatori, un personale a tempo pieno e il pubblico lavoro contribuiscono per sviluppare gli standard Web.

Cliccando sul link verrete indirizzati nella home page italiana del sito; l’ ho postato perché è una fonte davvero molto importante se non indispensabile per uno sviluppatore web.

Home page ufficiale in italiano: http://www.w3c.it

Home page ufficiale in inglese: http://www.w3.org

Questo sito potrà essere molto utile, se non indispensabile per qualsiasi progetto cosa tu voglia progettare e infine ricorda che gli standard vengono creati appositamente per essere utilizzati ;)

Citazione

2011-10-23T02:51:00.000-07:00

Internet è nato nella mente e nelle utopie di tante persone nei primi anni sessanta, ma per la massa, per le imprese e per il mondo nel complesso, Internet nasce effettivamente nel 1995. È dall’ampia diffusione delle tecnologie del World Wide Web che si comincia a parlare sempre di più del commercio elettronico anche per gli utenti finali e non solo per le transazioni fra grandi imprese.

-wikipedia

div.clock{
	width: 400px;
	height: 120px;
	padding: 10px 20px;
	margin: auto;
	box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
	inset 0 -40px 50px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
	inset 0 -40px 50px rgba(0, 0, 0, 0.2);
	-o-box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
	inset 0 -40px 50px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
	inset 0 -40px 50px rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-webkit-border-radius: 5px;
	background: #ddd;
	}

	div.cont{
	width: 100px;
	height: 100px;
	margin: 10px;
	float: left;
	background: #333;
	text-align: center;
	box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
	0 5px 1px rgba(0, 0, 0, 0.9),
	inset 0 -1px 1px rgba(255, 255, 255, 0.3),
	inset 0 2px 1px rgba(255, 255, 255, 0.3),
	inset 0 -20px 30px rgba(255, 255, 255, 0.1),
	inset 0 20px 30px rgba(255, 255, 255, 0.1),
	0 0 15px 4px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
	0 5px 1px rgba(0, 0, 0, 0.9),
	inset 0 -1px 1px rgba(255, 255, 255, 0.3),
	inset 0 2px 1px rgba(255, 255, 255, 0.3),
	inset 0 -20px 30px rgba(255, 255, 255, 0.1),
	inset 0 20px 30px rgba(255, 255, 255, 0.1),
	0 0 15px 4px rgba(0, 0, 0, 0.1);
	-o-box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
	0 5px 1px rgba(0, 0, 0, 0.9),
	inset 0 -1px 1px rgba(255, 255, 255, 0.3),
	inset 0 2px 1px rgba(255, 255, 255, 0.3),
	inset 0 -20px 30px rgba(255, 255, 255, 0.1),
	inset 0 20px 30px rgba(255, 255, 255, 0.1),
	0 0 15px 4px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
	0 5px 1px rgba(0, 0, 0, 0.9),
	inset 0 -1px 1px rgba(255, 255, 255, 0.3),
	inset 0 2px 1px rgba(255, 255, 255, 0.3),
	inset 0 -20px 30px rgba(255, 255, 255, 0.1),
	inset 0 20px 30px rgba(255, 255, 255, 0.1),
	0 0 15px 4px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-webkit-border-radius: 5px;
	}

	@-webkit-keyframes 'pulse'{
	from{
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	-o-transform: rotateX(0deg);
	}

	to{
	-webkit-transform: rotateX(360deg);
	-moz-transform: rotateX(360deg);
	-o-transform: rotateX(360deg);
	}
	}

	.move{
	-webkit-animation-name: pulse;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-name: pulse;
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	}

	div.cont h3{
	line-height: 100px;
	margin: 0px; padding: 0px;
	color: #eee;
	font-size: 4.5em;
	}

	div.cont span{
	position: absolute;
	margin-top: -40px;
	font-family: Arial;
	font-size: 1.1em;
	color: #999;

	}

	div.cc{
	width: 360px;
	margin: auto;
	}

figure{
	float: left;
	width: 300px;
	height: 300px;
	border-radius: 200px;
	box-shadow: inset 0 40px 50px rgba(0, 0, 0, 0.2),
	inset 0 -40px 50px rgba(0, 0, 0, 0.2),
	inset 0 0 3px 1px rgba(0, 0, 0, 0.3),
	0 0 3px 1px rgba(0, 0, 0, 0.2);
	border: 5px solid #fff;
	}

	.animate{
	transition-property: width, height, border-radius;
	transition-duration: 500ms;
	-webkit-transition-property: width, height, border-radius;
	-webkit-transition-duration: 500ms;
	-moz-transition-property: width, height, border-radius;
	-moz-transition-duration: 500ms;
	-o-transition-property: width, height, border-radius;
	-o-transition-duration: 500ms;
	}
	.animate:hover{
	width: 500px;
	height: 500px;
	border-radius: 300px;
	}

	figure:hover{
	cursor: pointer;
	box-shadow: inset 0 50px 30px rgba(0, 0, 0, 0),
	inset 0 -50px 30px rgba(0, 0, 0, 0),
	inset 0 0 3px 1px rgba(0, 0, 0, 0.3),
	0 0 3px 1px rgba(0, 0, 0, 0.2);
	}
	figure:active{

	}



	figure.a{
	background: url('/Nerdz/img/wallpaper2.jpg') center center;

	}

	figure.b{
	background: url('/Nerdz/img/futurama2.jpg') center center;
	}

	figure.c{
	background: url('/Nerdz/img/futurama1.jpg') center center;
	}

	figcaption p{
	display: none;
	}

	figure:hover p, figure p.on{
	padding: 2px;
	height: 20px;
	display: block;
	text-align: center;
	background: #fff;
	margin-top: 45%;
	font-weight: bold;
	font-size: 1.3em;
	color: #666;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	}