HTML TUTORIALS BLOG Guide per HTML - Javascript - CSS

Come pensi sarà il futuro del Web?

Tags
Futuro
Web
By flexlex il 14 Oct. 2013

+2 2 Comments 514 Views
.

Ormai sono diversi anni che l'HTML5 ha iniziato la sua strada per la realizzazione. Si presume che per inizio 2015 venga implementato come linguaggio di markup predefinito e standard. Pensare che tutto ha avuto inizio nel lontano 2004.
Ho scaricato Netscape Navigator 9 (Molti di voi non lo conosceranno, sono passati troppi anni) Un browser che è uscito nei primi giorni di febbraio del 2008. Il Browser di AOL, morì quel giorno, niente più supporto, nulla di nulla, non si vedeva più un futuro per questo browser, anche se tutti i browser più moderni (Chrome, Firefox, Opera) si basano su di esso. Ad Internet Explorer è mancato il suo acerrimo nemico, regnando da solo nel mondo dei browser.
Verificando sul sito http://html5test.com il supporto di netscape, si vedevano già tracce del HTML5 (le prime oserei dire) dopo ben 4 anni dall'inizio della sua progettazione. Incorporava già il sessionStorage (stranamente non il localStorage).

Ma tornando al dunque, come pensate sarà il futuro del Web?
Considerando anche che ci stanno mettendo praticamente 11 anni per portare alla luce HTML5!

Per chi fosse interessato, ecco qui una storyline:
http://www.apogeonline.com/webzine/2012/08...n-uninfografica

Last Post by 0bruno il 26 Mar. 2015

Reply
.
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
.
Quale Skin?

By flexlex il 4 Nov. 2012

4 Comments 354 Views
.

Eccoci qui con un importante sondaggio.
Questa skin e' ormai un po' vecchiotta, ma pur sempre bella.
Pensavo pero' di "modernizarla" anche spostandoci sul nuovo Layout (standard mode), visto che ha una struttura anche piu' pulita, preferirei la nuova skin.
Per adesso ho fatto solo la homepage, ora ditemi voi: la continuo o dite che e' brutta e tengo questa?

Il mio scopo era anche creare un layout piu' vergine, per facilitare la lettura, senza troppe distrazioni.

Last Post by flexlex il 6 Nov. 2012

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
.
border image

Tags
CSS3
By flexlex il 29 Aug. 2012

+1 6 Comments 489 Views
.

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

per tagliare l'immagine usiamo questa sintassi
CODICE
border-image:url(http://www.w3schools.com/cssref/border.png) 30 30 strech;

ovviamente dobbiamo di nuovo aggiungere i prefissi
CODICE
-webkit-border-image:url(http://www.w3schools.com/cssref/border.png) 30 30 strech;
-moz-border-image:url(http://www.w3schools.com/cssref/border.png) 30 30 strech;
-o-border-image:url(http://www.w3schools.com/cssref/border.png) 30 30 strech;
-ms-border-image:url(http://www.w3schools.com/cssref/border.png) 30 30 strech;
border-image:url(http://www.w3schools.com/cssref/border.png) 30 30 strech;

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

CODICE
-webkit-border-image:url(http://www.w3schools.com/cssref/border.png) 30 30 strech;
-moz-border-image:url(http://www.w3schools.com/cssref/border.png) 30 30 strech;
-o-border-image:url(http://www.w3schools.com/cssref/border.png) 30 30 strech;
-ms-border-image:url(http://www.w3schools.com/cssref/border.png) 30 30 strech;
border-image:url(http://www.w3schools.com/cssref/border.png) 30 30 strech;
border-width:15px;

LOL

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

...
Read the whole post...

Last Post by Sneffel il 6 Jan. 2014

Reply
.
Il "nuovo" filter

By flexlex il 28 Aug. 2012

4 Comments 390 Views
.

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

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:
CODICE
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')";

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

CODICE
<img style="-webkit-filter:blur(5px)" src="http://flexylex95.altervista.org/up/gif_avatar.gif" >

cambiamo i colori

CODICE
<img style="-webkit-filter:hue-rotate(180deg)" src="http://flexylex95.altervista.org/up/gif_avatar.gif" >

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

CODICE
<img style="-webkit-filter:saturate(0%)" src="http://flexylex95.altervista.org/up/gif_avatar.gif" >

ci sono alter proprieta come invert, seppia, grayscale
ma credo che questi sono i piu...
Read the whole post...

Last Post by flexlex il 28 Aug. 2012

Reply
.
Animazioni
Tags
CSS3
By flexlex il 28 Aug. 2012

2 Comments 341 Views
.
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:
CODICE
@keyframes NOMEAIMAZIONE{
0%{
color:red
}
50%{
color:green
}
75%{
color:blue
}
100%{
color:red
}
}

Io non so che dire apparte WOW, Abbiamo un animazione funzionante.
Ovviamente dobbiamo farlo per ogni browser adesso
CODICE
@-webkit-keyframes NOMEANIMAZIONE{...}
@-moz-keyframes NOMEANIMAZIONE{...}
@-o-keyframes NOMEANIMAZIONE{...}
@-ms-keyframes NOMEANIMAZIONE{...}
@keyframes NOMEANIMAZIONE{...}

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

Ecco la sintassi
CODICE
p{animation:NOMEANIMAZIONE 5s infinite}

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

Novamente aggiungiamo i prefissi
CODICE
p{
-webkit-animation:NOMEANIMAZIONE 5s infinite;
-moz-animation:NOMEANIMAZIONE 5s infinite;
-o-animation:NOMEANIMAZIONE 5s infinite;
-ms-animation:NOMEANIMAZIONE 5s infinite;
animation:NOMEANIMAZIONE 5s infinite;
}

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
Last Post by flexlex il 28 Aug. 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
.

Ultimi post

3 user(s) online

Statistics

Come pensi sarà il futuro del Web?

Quale browser usate per navigare?

Tags

Last comments

HTML, CSS, Javascript

Richieste codice

Se vuoi che venga realizzato un particolare script, puoi aprite qui una nuova discussione e presentarci le Tue idee.

Snippets

Qui verranno pubblicati dei codici sorgenti significativi per la programmazione nel web.

Forumfree

Qui puoi inserire le tue richieste dei codici da utilizzare sul circuito ForumFree

Java

La piattaforma per lo sviluppo di applicazioni desktop.

PHP

Aiuti e consigli sul linguaggio di scripting lato server.

Esercizi

Come pensi sarà il futuro del Web?

Canvas 2 (base)

Quale Skin?

Canvas

LocalStorage
+ SessionStorage

Notifiche desktop
solo chrome per adesso

border image

Il "nuovo" filter

Animazioni

Ottenere posizione geocrafica

Ultimi post

3 user(s) online

Statistics

Tags

Last comments

HTML, CSS, Javascript

Se vuoi che venga realizzato un particolare script, puoi aprite qui una nuova discussione e presentarci le Tue idee.

Qui verranno pubblicati dei codici sorgenti significativi per la programmazione nel web.

Qui puoi inserire le tue richieste dei codici da utilizzare sul circuito ForumFree

La piattaforma per lo sviluppo di applicazioni desktop.

Aiuti e consigli sul linguaggio di scripting lato server.

LocalStorage+ SessionStorage

Notifiche desktopsolo chrome per adesso

LocalStorage
+ SessionStorage

Notifiche desktop
solo chrome per adesso