il web 2.0

Google books:ricerca i tuoi e-book preferiti

nixare — Tue, 21 Apr 2009 09:03:01 +0000

Goggle ha sfornato un altro dei suoi dolcetti carichi di innovazione:

Google Book è un nuovo motore di ricerca per il web, in grado di trovare libri sparsi per il mondo.

-presenta il solito sistema di word suggestion per l’inserimento delle voci da ricercare e se siete in cerca di libri la cui visualizzazione è completamente gratuita, scegliete il filtro adatto per la vostra ricerca!

Senza alcun filtro,i risultati conterranno sia libri la cui anteprima è limitata nel numero di pagine, sia libri la cui anteprima è completa.

-selezionando un risultato, Goggle offre una pagina molto ben organizzata, in cui sono presenti(sotto forma di tabbed-page) sia le informazioni del libro, sia la popssibilità di visualizzare le pagine stesse in anteprima

Il funzionamento dell’anteprima si serve della tecnologia AJAX: ogni volta che l’utente si muove con la scrollbar, cambiando la pagina da visualizzare, una chiamata asincrona parte del browser, richiedendo il contenuto relativo a quella pagina.Arrivata la risposta HTTP, il contenuto viene messo all’interno di un DIV che funge da foglio.

-L’aspetto dell’anteprima ricorda il formato .PDF di casa Adobe

LightBox:nuovi modi di visualizzare le immagini

nixare — Mon, 20 Apr 2009 23:18:19 +0000

Le immagini di grandi dimensioni non si aprono più in pagine separate:è arrivato LightBox

LightBox è un plugin Javascript che rende piacevole la visualizzazione di immagini di grandi dimensioni, senza aprirle in una nuova finestra.

Le versioni più comuni :

rendono lo sfondo nero semi-trasparente
visualizzano un’immagine .gif che simula il caricamento dell’immagine
animano il ridimensionamento dell’immagine
inserisce il contenuto della proprietà “title” dell’immagine come fosse una didascalia
ha un bottone di chiusura
ha bottoni per lo scorrimento delle immagini, nel caso che il Plugin sia applicato a più immagini
In particolare stiamo parlando del plugin di casa jQuery.ScaricaLightBox.
Usarlo è semplicissimo:
1. E’ necessario scaricare anche la libreria JQuery standard(già presente nello zip del lightbox)
2. Inserire tra i tag i 2 script:

per asscosiare i vari link al lightbox, si possono usrae i selettori di classe, id, opppure definendo nel link la proprietà rel=”lightbox”

ora le vostre immagini acquisteranno un nuovo aspetto!!!

BUON DIVERTIMENTO!!!

FoxTab,Firebug,HTMLvalidator: componenti aggiuntivi di Mozilla Firefox

nixare — Mon, 20 Apr 2009 22:41:26 +0000

Il browser FireFox offre la possibilità di aggiungere dei componenti aggiuntivi in grado di manipolare i documenti web e di aggiungere funzionalità efficienti alla navigazione in Internet, secondo i nostri gusti e i nostri interessi.
Si tratta di autoinstallanti che vengono aggregati e lanciati con l’esecuzione del browser:
dal punto di vista stilistico ne segnalo uno molto carino, che prende spunto un pò dagli stili di visualizzazione tipici di casa Apple:

FoxTab è un componente aggiuntivo che permette la visualizzazione dei tab(le schede che si possono aprire mantenendo aperta una singola finestra) con effetti di riflessione simili al “Cover-Flow” di Itunes.
E’ possibile scegliere tra vari stili diversi e selezionare il tab che ci interessa aprire.
Risulta utile quando ci si trova a lavorare con tanti tab aperti e li si vuole scorrere in modo veloce

Dal punto di vista degli sviluppatori web, ne segnalo un paio molto utili:

Firebug è un componente aggiuntivo utile per gli sviluppatori web: consente
- la navigazione e l’analisi dell’intero documento Html controllando gli elementi di stile di ciascun elemento e gli stili ereditati,il layout di ciascun elemento secondo il box-Model(margin-padding-border-content),la struttura del DOM con i vari nodi e figli di ogni elemento
- la visualizzazione degli script presenti nel documento(pannello script) e dei file CSS collegati al documento stesso(pannello CSS)
- l’analisi delle richieste HTTP con i tempi di ridposta, e in particolar modo separare le richieste di tipo asincrono(Ajax e JS)contenuti flash, immagini, css, html
HTML validator è un componente aggiuntivo che sarà visibile in fondo a destra nella vostra finestra del browser(una volta installato). Serve a controllare se la pagina web caricata rispetta gli standard HTML,XHTML e se contiene errori: una “v” di colore verde indica che il documento non contiene errori, mentre una “x” rossa indica la presenza di errori.Un doppio click sull’icona apre una finestra di dialogo con l’elenco degli errori,le cause e le possibili soluzioni

Visitando il sito di Mozilla FireFox nella sezione addons o componenti aggiuntivi, è possibile scegliere tra centinaia di piccole applicazioni di ogni genere e utilità vai al sito

favicon.ico:inserire un’icona nella barra degli indirizzi

nixare — Mon, 20 Apr 2009 22:40:30 +0000

Diamo un tocco di classe in più alle nostre pagine web… : facciamo in modo che quando viene caricata la pagina del nostro sito, compaia una piccola icona a fianco della barra degli indirizzi.

La piccola icona che vediamo, è un file con estensione .ico , di dimensioni 8px X 8px, e con 16 livelli di colore.

Questo curioso accorgimento dell’icona è supportato solo dalle più recenti versioni dei browser, tra cui anche Mozilla FireFox.

Esistono un sacco di editor, freeware e a pagamento, che si occupano di creare icone a partire da un’immagine preeseistente oppure di disegnarle completamente da zero.

Ne segnalo uno ,che non ha bisogno di essere installeto sul Pc, poichè è accesibile dal web e svolge le operazioni su un server remoto, restituendoci semplicemente la nostra icona nel formato adatto(dimensioni e numero di colori).Salviamola come “favicon.ico” online icon maker

Il passo successivo è integrare la nostra favicon alla pagina web:

basta semplicemente inglobare all’interno dei tag la seguente riga di codice

<link href=”/favicon.ico“ rel=”shortcut icon“/>

e sarà visibile la simpatica icona in alto nella barra

Youtube:scaricare legalmente i video sul tuo PC

nixare — Mon, 20 Apr 2009 16:56:05 +0000

Scaricare i video pubblicati su Youtube è facile e legale.
Esistono varie soluzioni:componenti aggiuntivi di firefox o siti Web che lo fanno online.
Quì vi do i riferimenti per farlo online, all’indirizzowww.keepvid.com

copiare dal sito di youtube il contenuto del campo di testo sotto la voce “url”
andare sul sito www.keepvid.com e incollare il contenuto nel campo “url”
premere il bottone “download”
nella sezione “download link” scegliere il formato di destinazione(ne dipende anche la qualità finale)
si possono salvare in formato .flv(filmato flash) oppure in formato .mp4(miglior qualità)
scegliere la directory di salvataggio

In questo modo potrete avere una libreria di video sul vostro PC

youtube:integrare i video nella propria pagina web

nixare — Mon, 20 Apr 2009 16:39:30 +0000

YOUTUBE è una delle piattaforme di streaming video più visitate al mondo.
La cosa più bella e sorprendente è che chiunque può rendere visibile un particolare filmato, che magari gli stà davvero a cuore, nella propria pagina personale.
Le operazioni da fare sono semplici e soprattutto poche:

ricercare sul sito www.youtube.com il proprio video preferito
nella parte destra della finestra ,a fianco del video, c’è una scritta “codice da incorporare”: copia quel codice
all’interno della tua pagina personale,effettua un “incolla” in qualunque punto
modifica le proprietà “width” e ” height” per cambiare le dimensioni della finestra del video, e la proprietà “background” per il colore di sfondo

…..il gioco è fatto!!!

Ajax nello specifico:creare una chiamata asincrona

nixare — Mon, 20 Apr 2009 16:24:30 +0000

Ajax non è un nuovo linguaggio, ma un nuovo modo di utilizzare gli standard già esistenti!!
Ricordo che Ajax è basato su javascript la richiesta HTTP.
Per comunicare con il server, si utilizza l’oggetto XMLHttpRequest.

N.B. per l’elaborazione della richiesta è necessario un linguaggio dinamico lato server, come PHP,JSP,ASP
L’oggetto in questione è compatibile con le versioni di browser:

Internet Explorer .05+
Safari1.2
Firefox 1.0+
Netscape 7
Opera 8+

Con XMLHttpRequest è possibile gestire i vari stati della richiesta HTTP:
La proprietà “.readystate” assume valori compresi tra 0 e 4.

UNSENT=0 la richiesta non è ancora stata inizializzata
OPENED=1 la richiesta è stata creata ed è pronta per essere spedita
HEADERS_RECEIVED=2 la richiesta è stata inviata
LOADING=3 la richiesta è in fase di elaborazione
DONE=4 la richiesta è stata completata

creare un oggetto xmlHTTP = new XMLHttpRequest();

xmlHTTP.onreadystatechange=function(){ … }si occupa di registrare la funzione che elaborerà la risposta dal server
xmlHTTP.readyStateregistra lo stato della risposta del server:ogni volta che il readyState cambia, la funzione ” onreadystatechange ” viene eseguita
responseTexti dati mandati indietro dal server vengono richiamati con la proprietà responseText

METODI:

open(metodo, url, async, user, password)
- metodo = “GET”, “POST”
- url = URL completa della richiesta
- async = true/false (facltativo, default=true) {indica se la chiamata deve essere asincrona oppure sincrona}
- user, password (facoltativi)
send(data)
- inizializza la richiesta
- data = corpo della richiesta HTTP(facoltativo)può essere un documento oppure un DOMString
- la URL è già stata data al metodo open()
- send() termina immediatamente se async==true,
  ma il trasferimento continua in background
  (Genera gli eventi readystatechange)
- send() trasferisce i dati in modo sincrono se
  async==false

ELABORARE LA RICHIESTA:

quando la proprietà “readyState==4″, il corpo della risposta è totalmente arrivato e pronto per essere usato.
Si può accedere con la proprietà responseText oppure responseXML ,a seconda che si voglia elaborare i dati in formato XML oppure come semplice testo.

ESEMPIO PRATICO

1)inseriamo il codice javascript nell’header della pagina html

2)ORA ANDIAMO A REGISTRARE LA CHIAMATA ALLA FUNZIONE,AD UN EVENTO(come un click del mouse) SU UN ELEMENTO DELLA PAGINA HTML, AD ESEMPIO:

invia

3)ORA ANDIAMO A ELABORARE LA PAGINA elabora.php:

echo “contenuto della risposta”;//echo —-scrive in output

?>

specifiche su XMLHttpRequest

Adobe Flash nel web:esperienze interattive ad alti livelli

nixare — Mon, 20 Apr 2009 15:01:12 +0000

Siete studenti e volete divertirvi a creare dei siti web interattivi da poter mostrare a quache vostro amico?

Bene!Adobe Flash offre la possibilità agli studenti universitari e non solo di poter acquistare la licenza d’uso didattica dei suoi prodotti a prezzi davvero ridotti.

Flash cs4 è l’ultima versione del pluripremiato ambiente di sviluppo per creare flmati e presentazioni in formato .swf
Ciò che lo rende così popolare e usato, è il fatto che crea contenuti che sono compatibili con ogni browser(dipendono solo dalla versione del player di filmati .swf che si ha installata sul proprio Pc)

La nuova versione propone un’interfaccia davvero intuitiva e ben disegnata.

suggestionanti modalità di interpolazione dei movimenti, anch’esse semplici ed intuitive

supporta l’uso della tavoletta grafica per disegnare

piena compatibilità di integrazione con gli altri software di casa Adobe:a riguardo è utile sapere che flash permette di importare file .psd(photoshop) , .ai(illustrator), .fw(firewok) potendo lavorare sui livelli distinti del file appena importato e con la possibilità di convertire i vari oggetti in clip filmato.

implementazione di un linguaggio ad oggetti, noto come ActionScipt, arrivato alla versione 3.0, non molto distante dal conosciuto JAVApermette di gestire animazioni e pianificazione di eventi e contenuti, in un’unica classe da importare nella “Scena di lavoro”

con flash cs4 è possibile modificare l’aspetto grafico dei componenti di base contenuti nei package di default

integrazione con Adobe AIR per disegnare le applicazioni desktop

ottima documentazione online su ActionScript e l’uso dell’ambiente di sviluppo

supporta la comunicazione Ajax con il server

possibilità di inserire filmati precaricati o in streaming, all’interno del nostro Sito

comunicazione con Server in formato XML

E poi…c’è bisogno di tanta fantasia voglia di imparare, perchè è davvero ricco di strumenti utili e funzionali

Sito Adobe
e per vedere la classifica dei migliori siti sviluppati con la tecnologia Flash…vai

css3 e mozilla Firefox: bordi e sfondo

nixare — Mon, 20 Apr 2009 14:23:03 +0000

Non sono solo voci di corridoio quelle che portano Mozilla Firefox al primo posto tra i browser-web più utilizzati al mondo:
-Alto livello di supporto con gli standard più recenti(Javascript, CSS )
-Possibilità di integrazione di componenti aggiuntivi per colmare appieno i propri bisogni:
dallo sviluppatore in cerca dellaWebDeveloper ToolBar, al fanatico degli “accrocchi” per personalizzare colori, forme e aspetto delle proprie pagine.
Se mescoliamo questa sua capacità con le innovazioni stilistiche del CSS3(“cascading stylesheet” o più comunemente fogli di stile), otteniamo uno strumento altamente flessibile per creare le pagine web ad opera d’arte!
Purtoppo a oggi non tutti i browser supportano tutte le proprietà presenti nei fogli di stile dell’ultimo standard.
Analizziamo alcune proprietà dei fogli di stile supportati da FireFox 3.0.8:

Bordi colorati con più colori:
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;applicando questi stili all’elemento desiderato, si può ottenere un carino paragrafo colorato

Bordi arrotondati:a)usare la proprietà “border-radius: 25pt 50pt” per rendere arrotondati i bordi
b) richiede 2 parametri che indicano l’angolo di curvature orizzontale e verticale dell’ellisse
c) omettendo uno dei due parametri, verranno posti tutti e due allo stesso valore dell’unico presente
d)per modificare ognuno degli angoli, usare la proprietà border-top-right-radius:25pt 50pt ….etc

Box ombreggiati:
a)usare la proprietà “box-shadow: valore valore valore #colore , valore2 valore2 valore2 #colore2 “b)la proprietà è una lista di ombre separate da una virgola, ciascuna definita da 3 valori ed un colore
c)l’ombra non influenza la struttura del layout

il primo valore è l’offset orizzontale dell’ombra:valori negativi e positivi spostano l’ombra a sinistra o a destra

il secondo valore è l’offset verticale dell’ombra:valori negativi e positivi spostano l’ombra in alto e in basso

il terzo valore indica il raggio di sfocatura:più alto è il valore, più l’ombra è sfocata;il valore=0 nessuna sfocatura

in caso che i browser non supportino queste proprietà, si può utilizzare il seguente trucchetto:

creare delle immagini .PNG dei quattro angoli arrotondati, con lo sfondo esterno trasparente(per l’arrotondamento) e posizionarli con le proprietà style=”position:relative;top:value;bottom:value;right:value,left:value”;

creare delle immagini .GIF o .JPEG senza trasparenze, e con il colore di sfondo desiderato( poichè browser come Internet Explorer 6 non supporta le trasparenze delle immagini .png), e posizionarle negli angoli desiderati come detto sopra

per i bordi con più colori,creare un’immagine e inserirla o come sfondo di un div di dimensioni scelte, o come immagine vera e propria

ESEMPIO DI BORDI SFUMATI:

materiale preso da:
www.w3.org/TR/CSS
per approfondimenti si consiglia la documentazione ufficiale e i vari tutorial:
www.w3schools.com
www.html.it

librerie javascript a confronto

nixare — Mon, 20 Apr 2009 10:40:10 +0000

Il potenziale di javascript è in continua crescita e sviluppo.
Basta!!! ..cimentarsi con decine di righe di codice( tra l’altro confuso) solamente per creare dei simpatici e accattivanti effetti grafici, è ormai acqua passata.
Ora ci vengono in aiuto tantissime librerie javascript preconfezionate ,con tante funzionalità utili e veloci per abbellire il nostro sito:c’è solo l’imbarazzo della scelta!!
Una tra tutte è la famosissima e usatissima libreria Jquery
Si tratta di un piccol file .js da inglobare nell’header della pagina web sulla quale lo si vuole usare.
Scaricabile dal sito www.jquery.com
Il suo peso è relativamente ridotto:la versione minimizzata è solo 17KB , mentre quella per sviluppatori è 117 KB (per chi non ha esgenze particolari ,consiglio la versione più leggera).
Perchè e come usare Jquery(solo alcune funzionalità)
- è crossBrowser(cioè compatibile con tutti i browser fino alle versioni più aggiornate)
permette:
–selezione di elementi dal documento html(DOM) con l’uso di una sintassi molto breve e compatibili con standard CSS3
a) $(‘#idElemento’) oppure $(‘.classElemento’)
b) concatenare il nome della proprietà dell’elemento che si vuole leggere o modificare
esempio: $(‘#idElemento’).style.width=100px; …..modifica la larghezza dell’elemento con id=idElemento
–associare funzioni all’evento dell’utente su un determinato elemento senza scriverle nel tag dell’elemento
a)le funzioni vengono eseguite quando il DOM è caricato ed accessibile completamente
b) inglobare nel’header del documento, all’interno di tag di script:

c)quando l’elemento con id=”idParagrafo ” viene cliccato, viene richiamata l’azione di slideUp sull’elemento premuto, richiamato con “(this).“
–cambiare l’animazione sull’elemento con la stessa sintassi del precedente ” .slideUp();“
a)Toggle() con un click chiude a tendina, con un altro apre a tendina
b)SlideDown() mostra l’elemento cn animazione a tendina
c)show() mostra l’elemento
d) hide() nasconde l’elemento
…..queste solo alcune delle tante soluzioni offerte da Jquery
…..offre in oltre funzioni predefinite per le chiamate Ajax e per il controllo di validazione dei dati a lato client

Per informazioni più dettagliate sulle animazioni, estensioni e documentazione, visitare la documentazione online a http://docs.jquery.com