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

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:
ecco qui il codice:

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.

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

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:


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

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


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

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




passo 2: cverificare permessi (in caso contrario chiedrli)

gia qualcosa di piu difficile



passo 3: inviare notifica

difficolta media XD



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:

(immagine presa da http://w3schools.com)

per tagliare l'immagine usiamo questa sintassi

ovviamente dobbiamo di nuovo aggiungere i prefissi


pero' una volta ritagliata l'immagine, possiamo scegliere quanto largo deve il bordo usando border-width






cosa fanno stretch e round
quel esmepio di bordi qui sopra e' stretch (stira)


...

Read the whole post...

nei css2 avevamo gia' la possibilita di usare filter, ma solo in Internet Explorer.
filter viene molto usato insieme ad alpha per craere opacita' una sintassi abbastanza semplice, ma ancora piu semplice in tutti gli altri browser

pero' in internet explorer si poteva creare anche molto piu coi filter, come invertire i colori, creare sfondi gradienti, ecc... per colpa delle sintassi troppo complicate, queste vennero quasi completamente ignorate. esempio per sfondo gradiente in IE:


ma oggi (per adesso solo su chrome e safari) abbiamo il nuovo filter.
prendiamo un immagine cavia, per esempio il mio avatar:

bene, adesso divertiamoci coi filter
sfochiamo




cambiamo i colori



saturiamo (0%=grigio | 100%=normale | 200%=colori rafforzati)



ci sono alter proprieta come invert, seppia, grayscale
ma credo che q...

Read the whole post...

Il questo tutorial impareremo ad usare il keyframes.
Ancora una volta ci ritroveremo a lavorare con i prefissi.

Certo, potremo usare le transizioni combinate con un dei intervalli di javascript. Ma ecco una lista di ottimi motivi per il quale usare le animazioni

• Browser che usano antialiasing, perdono un sacco di memoria nel cambiare tra ottimizzazione qualità e non se usiamo Js


• Usando Css, la pagina rimane piu leggera


• Si possono calcolare meglio i tempi


• È piu Figo

La sintassi è la seguente:


Io non so che dire apparte WOW, Abbiamo un animazione funzionante.
Ovviamente dobbiamo farlo per ogni browser adesso


Wow, bello, ma adesso? Adesso cosa viene animato?
Aspettate, dobbiamo ancora specificarlo

Ecco la sintassi

ovvero:
animation: [Nome dato al animazione] [durata animazione] [ripetizione animazione]


Novamente aggiungiamo i prefissi


Ecco fatto, con questo codice si possono tranquillamente creare slideshows. Un mio compagno di classe ha usato le animazioni, per creare uno sfondo che cambiasse continuamente con l'opacità.
I modi come applicare questa tecnica sono molti e sono utili le remote cose.

Un carissimo saluto Flexlex

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


poi dobbiamo dare inizio alla funzione che ci localizza, ovvero:

quindi arriviamo a:


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



quindi arriviamo a:


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





quindi arriviamo a:

Le trasformazioni sono leggere (per i browser) ma potenti (per l'occhio umano) cambiamenti per un oggetto.

Sono effetti visivi molto interesanti.

le proprietà di transform sono "rotate, scale, skew, translate", poi ci sono ancora le prorieta' 3D per i browser WEBKIT (safari 3+ e chrome 20+)

le trasformazoni 2d sono suportate da tutti i browser, a parte IE da partire della versione 9
le trasformazioni trovano luogo al centro del oggetto

facciamoli tutti una alla volta

rotate

girare l'oggetto di totali degrees (gradi)



nuovamente API sperimentali, quindi nuovamente prefissi.


scale








con questa proprieta, possiamo ingrandire l'oggetto. letteralmente scalarlo. anche in due assi diferenti.
valore 1: ingrandimento in larghezza
valore 2: ingrandimento in altezza

se viene definito solo un valore, il secondo valore equivale il primo



skew
sempre con uno o due valori in gradi possiamo inclinare l'oggetto desiderato






translate
sposta l'oggetto di TOT pixel o percentuale.
per esempio 100% significa sposta a destra quanto l'oggetto stesso e' largo
...

Read the whole post...