HTML5 - HTML TUTORIALS BLOG Guide per HTML - Javascript - CSS - Java

Tags

Last comments

29/9 13:40: Smithe73 in [CSS] Inserimento dei commenti al passaggio del mouse
21/6 16:44: Locktrork in [Javascript] Script collegamento arcobaleno
26/3 14:20: 0bruno in Come pensi sarà il futuro del Web?
1/2 13:52: flexlex in [Javascript] Cambio dello sfondo della pagina in base all'ora
6/1 14:19: Sneffel in border image
3/10 18:03: 0bruno in Quale browser usate per navigare?
29/6 19:12: flexlex in LocalStorage
27/6 3:33: BomAle in [HTML] Capire ed interpretare i colori html in esadecimale
27/6 2:47: BomAle in [CSS] Impostare e posizionare o centrare l'immagine di sfondo di un elemento HTML
18/6 13:29: -Cedric in [Javascript] Cambiare l'immagine al passaggio del mouse: effetto Rollover

Canvas 2 (base)
Tags
HTML5
By flexlex il 4 Mar. 2013

0 Comments 200 Views
.
Facciamo una lista e procediamo con ordine
- Retangoli con bordi arrotondati
- Cerchi
- Riempire (fill)
- Clear
- importare immagine
- Introduzione a "Canvas (Advanced)"
Innanzitutto ben ritrovati
Finalmente continuo un pò con le guide

Sono sicuro che in questo piccolo periodo di inattività vi siete esercitati tantissimo con i canvas e sapete le basi
Se non è così vi conviene leggere questa Guida prima che vi becco :|

Detto questo iniziamo con:

Rettangoli con bordi arrotondati
Ragazzi... adesso diventa tosto davvero... ma vero, davvero.
Ci serviremo della Funzione arcTo.
Forse qualche spiegazione su come funziona.
abbiamo 3 punti.
P1(0,0); P2(100,0); P3(0,100);
Quindi abbiamo 90 gradi.
Sintassi:
CODICE
P1=moveTo(x,y);
arcTo(P2[x],P2[y],P3[x],P3[y],Border-Radius);

ecco qui il codice:
CODICE
c.beginPath();
c.moveTo(10,10);
c.arcTo(100,10,100,100,40);
c.lineTo(100,100);
c.stroke();
c.closePath();

praticamente il Punto "P1" è già predifinito dal punto dove finisce l'ultima linea, oppure dove è stato posizionato il punto con "moveTo".
il punto "P2" è dove si trova l'angolo (fino a qui uguale a "lineTo").
Il punto "P3" si trova dove la linea deve continuare. se le cordinate x di P2 e P3 sono uguali abbiamo un Angolo di 90º.
Poi il "Border-Radius" indica quanto viene "mangiato" dalla linea originale per creare l'angolo arrotondato.

Arrotondando tutti gli angoli e mantenendo la relatività ai punti x1 e y1 come nella funzione "strokeRect" oppure "fillRect" otteniamo una funzione che si usa esattamente come quest'ultime.

...
Read the whole post...
Last Post by flexlex il 4 Mar. 2013

Reply
.
Canvas
Tags
HTML5
By flexlex il 31 Oct. 2012

+2 0 Comments 315 Views
.
Il web si e' evoluto, oggi le pagine web non si limitano piu' alla sola lettura dei testi, ma sono diventati molto dinamici. Ricche di immagini, animazioni, grafici, video e musichette... aspettate, grafici!?.

ma i grafici non sono delle immagini con delle informazioni facilmente interpretabili? Esattamente.

Ma non abbiamo bisogno di photoshop, GIMP o Paint per fare queste cose?

Con HTML5 e CSS3 possiamo iniziare a mettere da parte tutti questi evolutissimi programmi per creare gradienti, bordi arrotondati, ombre, testi e adesso anche grafici.

Non abbiate paura di utilizzare questi "fogli di disegno", perche da IE9 sono supportati senza problema da tutti i browser (almeno le basi, ovvero il "2D", per WebGL e 3D, dovremmo attendere)

basta chiacchiere e passiamo all' azione:
creiamo subito la base:
Preparativi HTML
HTML
<canvas id="foglio" width="500" height="350"></canvas>

fino ad adesso nulla di complicato spero:
canvas = tag
id = per prendere l'elemento con javascript
width = larghezza in pixel
height = altezza in pixel

Preparativi JS:
HTML
can=document.getElemenById("foglio"); //salvare il foglio in una variabile
c=can.getContext("2d"); //salvare il "contesto" in una variabile

perche salvare il contesto in una variabile cosi corta? beh, perche dovremmo usarla spesso....

adesso vi insegno:
- scegliere il colore delle linee
- scegliere il colore delle superfici
- disegnare una linea
- disegnare un retangolo
Scegliere un colore per le linee
beh, i colori possiamo definirli come meglio crediamo: hsl, hsla, rgb, rgba, esadecimale, nome;
quindi per una linea rossa possiamo fare cosi
CODICE
c.strokeStyle="red"...
Read the whole post...

Last Post by flexlex il 31 Oct. 2012

Reply
.
LocalStorage
+ SessionStorage

Tags
HTML5
By flexlex il 9 Sep. 2012

+3 4 Comments 562 Views
.

Salvare informazioni, uno dei sogni piu segreti di ogni scripter e coder.
personalizzare i colori, e che la prossima volta sono ancora tali.
magari un gioco in HTML5 tipo scacchi, e ricordarsi a che punto era la partita.

queste sono solo alcune delle tantissime funzione ch puo' avere il LocalStorage.

Oggi oltre ad insegnarvi il localStorage, vi insegnero' anche la sintassi breve, che e' 1000 volte piu comoda da usare.

prendiamo come esempio che vogliamo creare uno script che da il benvenuto con il nome.

iniziamo a vedee se in precedenza e' gia stato salvato un nome utente
CODICE
<script>
if(localStorage.utente){//utente esiste
utente=localStorage.utente
}
else{//chiediamo di inserire il nome
localStorage.utente=prompt("inserisci tuo nome","")
utente=localStorage.utente
}
document.write(utente)
</script>

Ops il codice e' gia' finito XD
basta salvare la variabile, in localStorage faccendo cosi: localStorage.[variabile]=variabiledasalvare

Forse anche troppo semplice XD
invece coi cookie dovevamo fare i salti mortali per riuscire a salvare informazioni.

inoltre localStorage offre molto più memoria, relativamente ai cookie.
i cookie salvano 4kb (se non ricordo male)
il localStorage arriva a piu mega (mi ricordo che su safari sono 20MB)

Ma se volessimo salvare un informazione, solo finche il browser viene chiuso?

beh, la storia rimane la stessa, solo che a posto di usare "localStorage" dovete usare "sessionStorage" ed il gioco e' fatto

un carissimo saluto, sempre e ancora flexlex

Last Post by flexlex il 29 June 2013

Reply
.
Notifiche desktop
solo chrome per adesso

Tags
HTML5
By flexlex il 31 Aug. 2012

+2 4 Comments 458 Views
.

allora, faccio quest guida, anche se funziona solo su google chrome al momento.
e' una delle poche volte dove dobbiamo usare i prefissi su un javascript per farlo funzionare.

facciamo tutto passo per passo:
passo 1: creare bottone + function

per adesso niente di difficile
CODICE
<script>
function not(){

}
</script>

<input type="button" value="notifica" onclick="not()">

passo 2: cverificare permessi (in caso contrario chiedrli)

gia qualcosa di piu difficile
CODICE
<script>
function not(){
if (window.webkitNotifications.checkPermission()==0) {//permessi: ok

}
else{//chiedo permessi (appare popup in cima al browser)
window.webkitNotifications.requestPermission();
}

}
</script>

<input type="button" value="notifica" onclick="not()">

passo 3: inviare notifica

difficolta media XD
CODICE
<script>
function not(){
if (window.webkitNotifications.checkPermission()==0) {//permessi: ok

window.webkitNotifications.createNotification("URL-IMMAGINE","TITOLO-NOTIFICA","TESTO E CORPO DELLA NOTIFICA").show();

}
else{//chiedo permessi (appare popup in cima al browser)
window.webkitNotifications.requestPermission();
}

}
</script>

<input type="button" value="notifica" onclick="not()">

alla pressione del tasto otterremo una bella notifica in basso a destra, con immagine, titolo e corpo.
l'utente poi puo scegliere dove mettere le motfiche (in quale angolo), se disattivare le notifiche, chiuderle ecc..

screenshot:

Last Post by Soul-Kun il 1 Sep. 2012

Reply
.
Ottenere posizione geocrafica

Tags
HTML5
By flexlex il 31 July 2012

0 Comments 410 Views
.

IN HTML5 c'e' la possibilità di trovare la posizione di un computer o dispositivo mobile.
questo può essere utile per limitare la pagina a certe aree di una regione.
Vorrei sottolineare, che gran parte del HTML5 e' composto anche da Javascript.

prima cosa dobbiamo vedere se il browser supporta la API
CODICE
if(navigator.geolocation){//supportato

}
else{//non supportato
alert("mi dispiace, niente geolocation per te")
}

poi dobbiamo dare inizio alla funzione che ci localizza, ovvero:
CODICE
navigator.geolocation.getCurrentPosition()

quindi arriviamo a:
CODICE
if(navigator.geolocation){//supportato
navigator.geolocation.getCurrentPosition()
}
else{//non supportato
alert("mi dispiace, niente geolocation per te")
}

ora tra le parentesi di "getcurrentposition" scriviamo il nome della funzione che deve ssere seguita, quando verremo individuati.

CODICE
navigator.geolocation.getCurrentPosition()

quindi arriviamo a:
CODICE
if(navigator.geolocation){//supportato
navigator.geolocation.getCurrentPosition(mostralatlon)
}
else{//non supportato
alert("mi dispiace, niente geolocation per te")
}
function mostralatlon(){//funzione eseguita una volta trovati

}

arrivati a questo punto dobbiamo solo completare la nostra funzione mostralatlon (mostra latitudine e longitudine)

CODICE
navigator.geolocation.getCurrentPosition()

quindi arriviamo a:
CODICE
if(navigator.geolocation){//supportato
navigator.geolocation.getCurrentPosition(mostralatlon)
}
else{//non supportato
alert("mi dispiace, niente geolocation per te")
}
function mostralatlon(evento){//funzione eseguita una volta trovati
alert("Latitudine:"+evento.coords.latitude+"\nLongitudine:"+evento.coords...
Read the whole post...

Last Post by flexlex il 31 July 2012

Reply
.
creare suggerimenti personalizzati nei input

Tags
HTML5
By flexlex il 28 July 2012

3 Comments 302 Views
.

quando scriviamo in un input come questa avvolte il browser ci sugerisce quello che vogliamo cercare. lo stesso accade avvolte anche con le searchbox per i browser che lo supportano.
ma come sarebbe creare dei suggerimenti a nostra scelta?

diamo un occhiata alla sintassi.
CODICE
<input name="nomi" list="namelist">

<datalist id="namelist">
<option>Alberto</option>
<option>Alessandro</option>
<option>Antonio</option>
<option>Anna</option>
<option>...</option>
</datalist>

quando digiteremno "A" ci usciranno tutti i suggerimenti possibili.
purtroppo non posso farvi un esempio pratico perche ci sono i filtri di BlogFree :S

questi tag sono per il momento supportati in FireFox Opera e Chrome

Last Post by Soul-Kun il 29 July 2012

Reply
.