var mysite = {
    'url': "http://www.ajaxweb20.net",
    'author': "Giuseppe Raso",
    'xhtmlValid': true,
    'cssValid': true
}
Home > Blog

Archive for Aprile, 2007

Javascript - oggetti letterali… cosa?

Domenica, Aprile 29th, 2007

La sintassi dell’oggetto letterale è una delle più potenti in Javascript;
essa ci permette di creare degli oggetti contenenti vari valori con una corrispondenza key:value, ovvero nomeProprietà:valoreProprietà. var Gianluca={
  ‘nomeCompleto’:"Gianluca xxx",
  ‘professione’:"avvocato",
  ‘anni’:45
}
E’ una sintassi molto usata in vari framework, proprio in virtù del fatto che permette di trasportare dei dati in un modo molto efficiente.
(Per chi volesse saperne di più può visitare questa pagina.)

Ora rispondete a queste domande:
1) Sapevate dell’esistenza dell’oggetto letterale?
2) Sapevate che si chiamava oggetto letterale?

Se non avete risposto si a tutte e due le domande non preoccupatevi; non siete i soli.

Tanto è vero che cercando "oggetto letterale javascript" su google ( almeno nel momento in cui scrivo ), le uniche pagine inerenti che  compariranno saranno la documentazione ufficiale di Firefox e la pagina del mio sito prima linkata.

Tutti gli altri risultati, o non c’entrano niente oppure parlano di JSON.

Ma come è possibile che una sintassi così utile e semplice trovi così poco spazio nei siti su Javascript italiani?
Forse viene considerata troppo complicata e perciò destinata a una stretta cerchia di elité?
Mah, forse sto divagando, ma tutto ciò mi pare alquanto strano.

PS: Ovviamente, cercando "literal object javascript" la situazione cambia parecchio: ovvio che gli americani sono più avanti, almeno in questo…

getAttribute(”class”) ed IE: connubbio impossibile?

Sabato, Aprile 28th, 2007

In IE, getAttribute("class") restituisce null: classe=document.getElementById("obj").getAttribute("class"); //null su ie Strano vero?
Al contrario funziona sia su IE6 che su IE7 se al posto di "class" scriviamo "className": classe=document.getElementById("obj").getAttribute("className"); //classe su ie ma null in firefox ed altri Il problema persiste qualora l’argomento del metodo getAttribute sia un attributo evento: evento=document.getElementById("obj").getAttribute("onclick"); //null su ie Non ci resta allora altra soluzione che usare direttamente le proprietà dell’oggetto; ciò ci assicura la maggiore compatibilità crossbrowser: classe=document.getElementById("obj").className //funziona su tutti i browser evento=document.getElementById("obj").onclick //funziona su tutti i browser

Per quanto ancora saremo in grado di reggere questa incompatibilità?

Oltre 200 tutorial su ajax, css, flash, javascript, php, mysql, rss ed xml

Martedì, Aprile 24th, 2007

Per gli appassionati delle mega liste, ecco una delle ultime stilate: oltre 200 links

In questa lista troverete dei tutorial rivolti a molti aspetti del web publishing, in particolare a quelli che si avvicinano maggiormente al web 2.0.

In realtà c’è n’è per tutti i gusti: C++, Java, Python, insomma godetevela.

Una sitemap per Google

Sabato, Aprile 21st, 2007

Per aiutare Google a indicizzare le vostra pagine potete creare una Sitemap.
Questo è un semplice file xml che permette di indicare a Google l’importanza di alcuni link, l’ultima volta che sono stati modificati e la frequenza con cui visitare queste pagine.

Vediamo subito un esempio:

  <?xml version="1.0" encoding="UTF-8"?>
  < urlset xmlns="http://www.google.com/schemas/sitemap/0.84">
   < url>
    < loc>http://www.example.com/</loc>
    < lastmod>2005-01-01</lastmod>
    < changefreq>monthly</changefreq>
    < priority>0.8</priority>
   </url>  
  </urlset> 

Ecco in breve il significato dei vari tag xml:

  • urlset - setta l’url da cui prendere le regole per interpretare il file;
  • url - ogni tag url racchiude un url e le informazioni ad esso relativo;
  • loc - l’url della pagina, completo di protocollo ( i path relativi non sono accettati ).

Alcuni tag sono opzionali ma è buona norma inserirli:

  • lastmod - data ell’ultimo aggiornamento nel formato YYYY-MM-DD;
  • changefreq - frequenza di aggiornamento dell’url, che può assumere diversi valori:always, hourly, daily, weekly, monthly, yearly, never;
  • priority - un valore tra 0.0 e 1.0 che indica l’importanza della pagina ( di default 0.5 )

Beh, creare una sitemap da soli può essere un pò seccantello, no?
Per fortuna esistono servizi gratuti che permettono di creare automaticamente delle sitemap senza installare niente sul nostro computer.
Uno dei servizi con cui mi sono trovato meglio è sitemapdoc.com: basta inserire l’url, aspettare 10 minuti e copiare il contenuto della sitemap in un file chiamato preferibilmente sitemap.xml.
Ricordiamoci di modificarlo un pò per adattarlo alle nostre esigenze prima di darlo in pasto a Google.

Ok, e ora come dico a Google di utilizzare la sitemap che ho creato?
Prima di tutto uploadate il file sitemap.xml nella root principale del sito, seguite la semplice procedura per iscrivervi ai tool  per webmaster di Google  e cliccate su  sitemap.

Dopo qualche ora o giorno compariranno tutte le informazioni relative ad essa.

Backup blog e badget

Giovedì, Aprile 19th, 2007

In questo sito troverete un pò di badget da usare nel vostro blog.
Si spazia dai badge per software, a quelli per linguaggio di programmazione; insomma, c’è n’è per tutti i gusti.

Se invece volete fare un backup automatico di un blog, senza dover installare nessun scomodo plugin, vi basta dirigervi su https://www.blogbackuponline.com

Un grazie a geekissimo per le dritte.

ExtendDOM - Funzione per resize

Mercoledì, Aprile 18th, 2007

In questi giorni stavo pensando a una funzione per fare il resize di un elemento da aggiungere nella libreria ExtendDOM.

Da un post di Napolux ho trovato la soluzione perfetta: sfruttare una funzione drag&drop, per altro già presente nel framework.
In effetti basta aguzzare l’ingegno

Dopo un pò di test, la funzione ( di 4 o 5 righe ) verrà aggiunta.

Lingua, nuovo cms in ajax.

Martedì, Aprile 17th, 2007

Dalle poche prove che ho fatto, Lingua mi ha stupito per le sue semplicità e velocità.
Per chi non lo sapesse, Lingua è un CMS PHP/MySQL per blog che utilizza dosi abbondanti di ajax.
Il bello di Lingua è che blog e pannello di controllo sono perfettamente integrati, una feature, che almeno personalmente trovo molto comoda.
Purtroppo non esiste ancora una release ( work in progress ), nel frattempo potete fare qualche prova.

PS: qualche giorno fa, come sono venuto a sapere da questo post di edit, è successo un fatto curioso: il sito è stato "hackerato" proprio per dimostrare che rendere un template editabile permette di eseguire codice php malevolo… Menomale che il soggetto non era malintenzionato!

Fun - dragon coglions

Lunedì, Aprile 16th, 2007

Tanto per cambiare ( non è che javascript sia il mio unico interesse ), ecco un video piuttosto divertente su dragon ball.

Un remake  vero e proprio

CSS - templates già pronti

Domenica, Aprile 15th, 2007

Creare la struttura css di un sito, specialmente se non si molto esperti, può essere più ostico di quanto si pensi.
Per fortuna esistono alcuni servizi gratuti che mettono a disposizione templates molto spogli e conseguentemente facilmente personalizzabili.

Tra tutti i servizi segnalo CSSeasy.

Esso si distingue per l’estrema semplicità del markup e del css.
Purtroppo contiene pochi layout, e tutti a due colonne.

Se invece volete un layout più complesso potete visitare l’italianissimo Layout Gala.

Javascript - css : tutorial definitivo per la creazione di overlay

Giovedì, Aprile 12th, 2007

Visto che questo è un tormentone trattato fino alla nausea, ho deciso di scrivere un tutorial definitivo per la creazione di overlay.
L’overlay è un livello al di sopra della pagina, che possiamo usare per sostituire gli scomodi popup.
Vediamo come crearne uno nella migliore maniera possibile; utilizzeremo html, css e javascript.

Punto 1 Markup HTML:
Il tag più semanticamente adatto per rappresentare un overlay è certamente div:
<div id="container-overlay">
   <div id="overlay">
           contenuto
   </div>
</div>
Il motivo per cui creiamo due div è per fare in modo che l’overlay ( il div interno ) possa essere centrato nella pagina indifferentemente dalla sua dimensione.
Assegniamo ad ogni div un identificatore univoco affinchè ci si possa interfacciare ad essi sia con i selettori Css che col DOM.

Punto 2 Stile Css:
Vediamo come centrare il box:
body { margin:0px; padding:0px; }

#container-overlay {
    position:absolute;
    top:0px;
    left:0px;
    display:block;
    width:100%;
    height:1%;
    text-align:center; /*per IE 5.5 o minore*/
    background:transparent;
}

#overlay {
    position:relative;
    top:50px;
    display:block;
    margin:0px auto;
    width:500px;
    height:400px;
    background:#ff0000;
}

La prima regola, applicata al body, annulla i margini e i padding applicati dai browser.
Il container overlay è un div con posizione completamente slegata dalla pagina che si estende per tutta la larghezza del body. Il text-align center serve per centrare i div all’interno di esso con IE5.5 o minore.
Per quanto riguarda l’overlay, l’unica nota da fare e sul margin; il valore auto centra automaticamente il div all’interno del container. Il valore background e top li ho messi giusto per farlo vedere.

Ora il box può essere personalizzato.

Punto 3 Javascript:
Ad esempio possiamo aggiungere dei tasti per chiudere o aprire il box al click di un link.
Questo link ovviamente va messo sull’overlay stesso: <a href="javascript:void(0);" onclick="document.getElementById('overlay').style.display='none'">Chiudi</a> Questo invece nella stessa pagina: <a href="javascript:void(0);" onclick="document.getElementById('overlay').style.display='block'">Apri</a>

Qui potete vedere l’overlay in azione.