My Webdesigner: 2008

Nuova funzionalità per Gmail, il servizio webmail di Google. Se siete stanchi della solita grafica, nella sezione impostazioni è stata aggiunta la scheda Temi, tramite la quale potete personalizzare l'aspetto grafico dell'interfaccia di Gmail.

Purtroppo questa simpatica funzionalità apparentemente non è stata abilitata a tutti gli account. Sul mio account, per esempio, non è stata abilitata. Tuttavia è bastato, sempre da impostazioni, cambiare la lingua in inglese e poi risettarla in italiano. Magicamente è apparsa anche a me la scheda Temi.

Tutti sanno che su piattaforma Blogger è impossibile uploadare qualsiasi tipo di file (a meno che non siano immagini da includere in un post). E molti di quelli che masticano qualcosa di SEO e ottimizzazioni varie per motori di ricerca conoscono l'importanza delle sitemaps, vere e proprie mappe dove sono contenuti i link del nostro sito.
In questo articolo del blog computer-acquisti.com viene spiegato molto chiaramente come realizzare una sitemap per blog su piattaforma blogger da far digerire a Google, che dei motori di ricerca, inutile dirlo, è quello che a noi interessa di più.
Vero?

Ho scaricato e installato Google Chrome nel mio PC Aziandale, e visto che dopo 10 minuti di utilizzo giù mi piace un casino, penso proprio che lo installerò nel mio computer di casa. Proverò a installarlo anche nell'eeepc 701, anche perchè firefox 3, su quella macchina, funziona maluccio.

Che dire: il browser è veloce, minimalista e gestisce a meraviglia le schede. Le applicazioni 2.0 di google possono essere gestite come applicazioni a se stanti (io ho già messo l'icona di gmail nel desktop, si avvia istantaneamente e non ho necessità di aprire prima il browser). I preferiti funzionano molto bene, più o meno come in firefox tre.

Eccetera.

Vorrei fare a questo punto una considerazione non tecnica: ogni tanto salta fuori qualcuno che paragona Big G al Grande Fratello Orwelliano, e secondo questi Chorme sarebbe un'ulteriore arma a disposizione di Google per farsi i fatti nostri.

Io un'idea me la sono fatta. Google è un'enorme macchina costruita per fare soldi, e per far questo ha bisogno di dati statistici. Badate bene: STATISTICI, quindi aventi a che fare con NUMERI. Credo che a google non interessi il singolo, l'UNITA'. E se anche gli interessa, il suo scopo è quello di proporgli qualcosa che questo può comprare da qualcun altro che si è rivolto a Google per far soldi, a sua volta. Un puro e semplice sistema capitalistico globale.

E per fare tutto questo Google sforna applicazioni gratuite, che funzionano dannatamente bene e che arrivano per prime. Tutti gli altri, Microsoft in primis, ad inseguire.

Se dovessi scegliere chi tra i due, Microsoft e Google, sia il diavolo, bè.... mi dispiace per Bill.. che poi alla fine anche lui non è così cattivo.

Spero di non sbagliarmi...

Per chi avesse necessità di riprodurre nel proprio sito o nel proprio blog dei video in formato FLV, segnaliamo JW FLV MEDIA PLAYER 3.16, un pratico player Flash disponibile per il download a questo indirizzo.
L'inserimento e la modifica dello script in funzione delle vostre pagine web è abbastanza semplice e intuitivo. Nei prossimi giorni pubblicherò una serie di semplici tutorial dove illustrerò le funzionalità del palyer e le personalizzazioni che è possibile apportarvi.

Consigliate dal mio amico americano Pete, segnalo oggi due utility che con il webdesign magari c'entrano poco, ma che una volta installate nel computer rendono la vita più semplice a chi (come il sottoscritto) tiene svariati file e programmi aperti durante il lavoro.
Il primo è un'imitazione free, stabile e veloce dello switch grafico delle finestre di Windows Vista. Si tratta di WinFlip (download disponibile qui). Il programma non necessita di installazione, è decisamente veloce e può essere configurato in modo tale che basta cliccare con il mouse su un lato a scelta dello schermo per attivare istantaneamente lo switching delle finestre.
L'altro programma è eBoostr (disponibile qui), equivalente al ready boost di Windows Vista. Nella versione free può essere utilizzato per 4 ore consecutive, dopodiché è necessario riavviare il sistema per poter utilizzare il programma

Il sito HTML.it pubblica qui un interessante guida all'implementazione e all'utilizzo di Google Adsense, il sistema affiliazione publicitaria on line più utilizzato al mondo. E anche il più redditizio, aggiungiamo noi.
La guida è composta al momento da una cinquantina di lezioni, che vanno dalla semplice registrazione al servizio sino alla personalizzazione avanzata degli annunci. Pertanto è consigliato sia agli utenti alle prime armi, sia a quelli più o meno smaliziati, ai quali magari è sfuggita questa o quella caratteristica (come il servizio Video Unit, collegato ai video di Youtube).

Che Youtube sia diventato uno dei principali fenomeni culturali di questa prima decade del ventunesimo secolo lo sanno ormai anche le pietre... Lo sanno anche quelli che del non utilizzo di internet ne fanno segno di distinzione elitaria... Lo sanno soprattutto i telegiornali, Studio Aperto di Italia 1 in primis, che non mancano confezionare servizi su questo o quel video comparso sul più importante sito di video amatoriali (e non) in the world...
E lo sappiamo anche noi, ovviamente, altrimenti non staremo qui a parlarne. Per ora ci limitiamo a segnalare questo interessante articolo del portale HTML.it, dove vengono illustrati i vari modi per scaricare un video da Youtube sul proprio computer e salvarlo in forma di file. Uno dei principali pregi/difetti del re del video streaming consiste nel fatto che, appunto, i video vengono visti in streaming, e non come semplice file manipolabile a proprio piacimento.
Leggetevi pertanto l'articolo consigliato, più avanti riprenderemo l'argomento...

Segnalo questo post di Geekissimo dove vengono pubblicati i migliori 80 siti che pubblicano immagini liberamente utilizzabili. Anche se si parla, come detto, di "immagini liberamente utilizzabili" il consiglio è comunque di verificare la licenza allegata a ogni singola immagine, onde prevenire possibili causa per violazione del copyright.

Se siete un affiliato eDintorni e non sapere come inserire il codice per il Contextual ADV all'interno di un blog creato tramite la piattaforma Blogger di Google, eccovi di seguito la procedura che dovrete seguire passo passo.

Anzitutto entrate in gestione layout del vostro Blog, andate su Modifica HTML e, come illustrato altre volte (vedi qui al punto 2), create una copia di sicurezza del vostro template. NON selezionate la casella di controllo Espandi i modelli widget.

Aprite una seconda scheda del browser, aprite il sito http://blogcrowds.com/resources/parse_html.php (vedi questo post per maggiori dettagli) e incollate all'interno del form il vostro codice eDintorni (quello di esempio sotto riportato ovviamente non funzionerebbe):

<script type="text/javascript" language="JavaScript" src="http://adv08.edintorni.net/affiliati/content/XXXXX/?ct=IT&q=ACMS_CRAWLER&a=XXXX&s=XXXXXX&b=XXXXXX&t=9E5205&d=993333&u=FF3333&nl=10&lh=0"></script>

Cliccate sul pulsante PARSE e copiate il codice "tradotto" in XML per la piattaforma Blogger.

Ora tornate nell'area Modifica HTML, posizionatevi in fondo al listato immediatamente prima del tag </body> e incollate il codice poc'anzi ottenuto tramite Blogcrowds.

In questo modo il crowler di eDintorni intercetta tutte le parole presenti nel blog, titoli compresi. Per limitare la ricerca alle sole parole contenute all'interno dei post, oltre a impostare il codice hl posto alla fine della stringa su 0 (zero), dovrete inserire i seguenti codici:

- Subito prima del tag <div id='main-wrapper'> inserite il codice 

- Spostatevi qualche linea sotto e immediatamente sotto il primo </b:section> che trovate dovrete incollare il codice 

Ora salvate tutto e, se non avete commesso errori, dopo qualche minuto il crowler di eDintorni inizierà a funzionare.

Continua il saccheggio del sito Blogger Hacks con un utile tutorial riguardante l'inserimento delle Favicon dei Social Bookmarks nei post di Blogger. Lo script è SEO Friendly e come consuetudine arricchito dagli screenshot dei vari passaggi.
Iniziamo.

Aprite il vostro Blog e spostavi nelle scheda Layout (1), Modifica HTML (2), e per sicurezza scaricate l'intero modello sul vostro computer cliccando su Scarica modello completo (3). A questo punto barrate la casella Espandi i modelli widget (4). Ora cercate la linea di codice <div class='post-footer'>, magari aiutandovi con la combinazione di tasti CTRL + F che attiva la funzione di ricerca del browser, e immediatamente dopo questa riga incollare il seguente codice:

<div style='float:center;'><BR/>

<small>VOTA questo articolo</small><BR/>

<a expr:href='"http://oknotizie.com/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='vota su OKNotizie' border='0' src='http://farm3.static.flickr.com/2065/2077963657_e0a82b68bb_o.gif'/></a>

<a expr:href='"http://segnalo.com/post.html.php?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='salva su Segnalo' border='0' src='http://farm3.static.flickr.com/2324/2077963703_a1a884727d_o.png'/></a>

<a expr:href='"http://www.diggita.it/submit.php?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='vota su Diggita' border='0' src='http://farm3.static.flickr.com/2037/2078753406_897e276d88_o.gif'/></a>

<a expr:href='"http://www.meemi.com/static/share/?u=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank'><img alt='Condividi su Meemi' border='0' height='16' src='http://www.meemi.com/static/images/share.png' width='16'/></a>

<a expr:href='"http://www.technotizie.it/posta_ok?action=f2&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='segnala su Technotizie' border='0' src='http://farm3.static.flickr.com/2004/2078753616_be0dea9923_o.png'/></a>

<a expr:href='"http://www.wikio.it/vote?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='vota su Wikio' border='0' src='http://farm3.static.flickr.com/2080/2077963835_717bd108a0_o.gif'/></a>

<a expr:href='"http://fai.informazione.it/submit.aspx?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='vota su Fai Informazione' border='0' src='http://farm3.static.flickr.com/2383/2077963617_4100f86fc7_o.gif'/></a>

<a expr:href='"http://www.seotribu.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='vota su SEOTribu' border='0' src='http://farm3.static.flickr.com/2342/2078008873_b5f56bff01_o.gif'/></a>

<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Add To Del.icio.us' border='0' src='http://farm3.static.flickr.com/2219/2077963495_259324f8de_o.png'/></a>

<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Digg This' border='0' src='http://farm3.static.flickr.com/2141/2077963537_9a2520382a_o.png'/></a> <a expr:href='"http://www.technorati.com/faves?add=" + data:post.url' rel='nofollow' target='_blank'><img alt='Fav This With Technorati' border='0' src='http://farm3.static.flickr.com/2352/2078753568_534e49b1d1_o.png'/></a> <a expr:href='"http://www.pligg.it/submit.php?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt=' Pligg.it Invia' border='0' src='http://farm3.static.flickr.com/2342/2078008873_b5f56bff01_o.gif'/></a> <a expr:href='"http://www.digo.it/submit.php?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Figo: lo DIGO!' border='0' src='http://www.digo.it/image/logo-small.gif'/></a> <a expr:href='"http://www.sugiu.it/submit.php?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt=' SuGiu.it Invia' border='0' src='http://farm3.static.flickr.com/2381/2365927596_2ae1638033_o.gif'/></a>
</div>

Controllate l'anteprima cliccando nell'apposito pulsante (5), e se il risultato è di vostro gradimento, cliccate su salva modello (7)

Grazie alla segnalazione dell'utente m1979 del forum di GiorgioTave.it ho finalmente risolto un problema che mi assillava da qualche tempo: inserire codici html, java o quant'altro all'interno dei post di My Webdesigner senza che gli stessi mi vengano stavolti dal motore di rendering di blogger.
Un esempio è il post precedente relativo al Label Cloud.
Per risolvere il problema è stato sufficiente nella pagina di questo sito incollare il codice nel box a sinistra, cliccare sul pulsante Parse, copiare il risultato e incollarlo all'interno del post del vostro blog su Blogger nell'area Modifica HTML (immagine a sinistra).
Il risultato è garantito.

In questo post del sito Blogger Hacks viene spiegato come implementare Label Cloud in stile wordpress per gestire le etichette di Blogger. Si tratta di un sistema molto più pratico ed elegante del semplice widget "Etichette" di Blogger, che si limita a mostrare tutti i tags utilizzati nel blog con il numero di ricorrenze tra parentesi.
Nello script segnalato da Blogger Hacks, invece, si può decidere il numero minimo di ricorrenze necessario per far si che un tags appaia nella Label Cloud. Più un tags è utilizzato all'interno del blog, più il font utilizzato diventa grande, ed anche in questo caso la dimensione minima e massima del font può essere personalizzata. Date uno sguardo a sinistra per vederne il risultato.

Riportiamo di seguito le istruzioni per l'implementazione dello script corredate da alcuni screen shot.

La prima cosa da fare è, ovviamente, includere il widget Etichette nel vostro blog. Per farlo dovete andare sulla sezione di gesione del layout del blog e cliccare su Ad a Page Element.

Posizionarsi su etichette, cliccare aggiungi a blog e nella finestra successiva selezionare il tipo di ordinamento: in ordine alfabetico o di frequenza. Per un risultato finale graficamente migliore consiglio di ordinare le etichette in ordine alfabetico.

Spostatevi nella sezione modifica HTML della scheda layout e lasciate deselezionata la casella di controllo espandi widget. Tramite la funzione trova testo del browser cercate il codice ]]></b:skin>
ed immediatamente prima inserite il seguente codice:

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{ }
#labelCloud .label-cloud { }
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

Ora posizionatevi immediatamente dopo il codice ]]></b:skin> e inserite il seguente listato

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

Il passo successivo consiste nell'andare a cercare il seguente codice:

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Attenzione: il alcuni blog può essere leggermente diverso, ad esempio il termine Labels può essere sostituito da Tags, pertanto vi sconsigliamo di cercare l'intera stringa con il comando CRTL + F del browser.

Al posto del codice indicato inserire il seguente

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>e
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

A questo punto è sufficiente cliccare su anteprima per verificare il risultato e successivamente su salva per consolidare le modifiche

Un aspetto decisamente interessante di questo script è la facilità di personalizzazione. Per fare ciò è sufficiente modificare i seguenti parametri:

var claudMin=1 indica che è sufficiente che un tag sia citato una sola volta all'interno del nostro blog per far si che compaia all'interno del Label Cloud. Ovviamente aumentando questo numero si applica una selezione al livello di tags visualizzabili.
var maxFontSize = 20 indica la dimensione massima del font relativo al tag presente più volte
var minFontSize = 10 indica invece la dimensione minima del font relativo al tag presente meno volte
var maxColor = [0,0,255] indica il colore del font relativo al tag presente più volte in formato RGB
var minColor = [0,0,0] indica il colore del font relativo al tag presente meno volte
var lcShowCount = false indica che non deve comparire il numero relativo alla quantità di volte in cui un tag è presente nel blog. Se invece vogliamo far comparire il numerino di fianco ad ogni tag dovremo sostituire il valore false con true

Consigliamo di rendere questi parametri omogenei allo stile del proprio blog

Incuriositi da alcune caratteristiche presenti in un blog su piattaforma blogger.com, solitamente non implementabili tramite il servizio di blogging gratuito di Google, abbiamo chiesto all'autore dove avesse scovato i codici utilizzati per tali migliorie. La risposta è stata pressoché immediata: si tratta del sito Blogger Hacks, che come recita il sottotitolo contiene "hacks per blogger, seo - compatibili, semplici, chiari, per migliorare i nostri blog".
Tra quelli più interessanti segnaliamo lo script per trasformare il widget "etichette" di blogger in un Label Cloud stile Wordpress e quello per inserire le favicon più importanti all'interno di ogni post.
Entrambi gli script saranno oggetto dei prossimi post

Gli angoli smussati nelle pagine web vengono ormai utilizzati da gran parte dei web master. La resa grafica ottenuta arrotondando quadrati e rettangoli è spesso gradevole e rendono un sito internet un po' meno amatoriale senza un eccessivo ricorso alla grafica.

Purtroppo HTML e CSS, stratagemmi contorti a parte, non gestiscono nativamente questo tipo di implementazione.

Lo script che trovate nel sito Tonino Web Site consente di aggiungere angoli smussati con poche righe di codice, senza appesantire le pagine e con risultati grafici decisamente buoni.

Stiamo sperimentando lo script in pagine complesse su un sito del nostro network e al momento l'unico problema rilevato è con i div ad altezza variabile su FireFox 2. Nessun problema invece con Explorer 7

Segnalato su questo articolo pubblicato da HTML.it, lo script PHP MagpieRSS permette di importare sulle pagine del proprio sito Feed RSS provenienti da fonti esterne.

Lo script è decisamente facile da configurare e non richiedere conoscenze approfondite di PHP. Nell'articolo di Luca Melloni vengono inoltre spiegate passo passo le procedure per l'implementazione del codice nelle priprie pagine PHP.

Decisamente utile è la configurazione di una cartella di cache, che permette di accedere ai Feed su altri siti senza sovraccaricare troppo il proprio.

Consigliamo di approfondire il tema tramite la lettura dell'articolo originale.

Segnaliamo questo interessante articolo pubblicato dal sito HTML.it, la bibbia dei webdesigner.
In molti conoscono phpBB, il noto gestore di forum freeware realizzato in PHP.
Per chi utilizza questo linguaggio di programmazione per la realizzazione delle propri siti internet, l'installazione della versione 3.0 di phpBB non dovrebbe essere troppo difficile. Tuttavia potrebbe essere d'aiuto consultare una guida che mostri passo passo i passaggi salineti per l'implementazione dello script nel sito.
L'articolo segnalato è, come da tradizione di HTML.it, decisamente completo e ben realizzato, pertanto consigliamo a tutti gli utenti, esperti o meno, di provare a darci uno sguardo, se non altro per valutare le implementazioni della versione 3.0 di phpBB rispetto alla 2.0

La situazione è questa: siete soddisfatti dei guadagni che Google Adsense inizia a versarvi mensilmente, iniziate a prendere in considerazione l'acquisto di un'auto nuova, o l'acquisto del televisore al plasma e, patatrack, improvvisamente i guadagni giornalieri crollano del 50%. Poi del 70%. Infine toccate la terribile soglia di 1 centesimo di dollaro per click.

Siete incappati nel circuito perverso dello Smart Pricing.

Ci riserviamo di tornare sull'argomento in futuro, intanto possiamo proporvi qualche risorsa disponibile in rete: un post abbastanza interessante sul forum di Giorgio Tave, un interessante articolo di Robin Good, e alcune deduzioni scientifiche del Tagliaerbe.

Segnaliamo a questo indirizzo un interessantissimo Javascript che consente la costruzione di uno slide show con dissolvenza tra le immagini funzionante con i principali browser. Noi l'abbiamo testato su Firefox 2, Internet Explorer 6 e 7 e Safari. Secondo l'autore non dovrebbero esserci problemi neanche con Opera 8.

L'implementazione nelle pagine è facile e intuitiva, basta leggere le poche istruzioni in inglese, sufficientemente chiare anche per chi non è particolarmente ferrato con l'idioma.

Fate soltanto attenzione al fatto che l'esempio riportato è relativo a due slide show affiancati e non a uno soltanto.

Tanto per segnalare qualcosa di utile, Mytom consiglia agli utenti alle prime armi di andarsi a vedere il sito www.fckeditor.com . Gli utenti più esperti (ma anche quelli mediamente esperti) sicuramente conosceranno questo sito. FCKEditor è editor di testo da integrare nel vostro sito internet. Costruito in Java, ma compatibile con ASP, PHP, Perl, Pytom, eccetera, permette di integrare un editor stile word nelle vostre pagine di amministrazione, nel vostro blog. Tale strumento è indispensabile per chi, come Mytom, ha nel proprio sito una sezione di news e tutorial.
Senza perdere tempo nella scrittura manuale dei codici html, FCKEditor permette di scrivere e formattare un testo in modo del tutto naturale, senza necessità di scrivere a mano i tag html.
Permette inoltre di integrare tabelle e immagini, link e quant'altro.
Sarebbe possibile configurare un correttore ortografico, ma la cosa è abbastanza difficile e non sempre funziona (Mytom ha provato con scarsi risultati). Molto più semplice scaricarsi la toolbar di Google (magari tramite la pubblicità che trovate su Mytom, laddove si invita a scaricare FireFox con Google Toolbar o Google Pack) e utilizzare il correttore ortografico integrato.

Come preannunciato nella precedente news, illustrerò di seguito il sistema utilizzato da Mytom per la creazione della pagina contatti. In realtà sarebbe sufficiente fornire il link al sito dal quale è stato scaricato lo script (che è questo), anche perché il file zip contiene un file leggimi.txt in italiano e lo script è veramente semplicissimo da integrare.
Tuttavia rispetto alla procedura descritta, ci sarebbe da effettuare una correzione: nel file form.dat, quello che contiene il form da includere nella pagina che creerete ad hoc (tramite un semplice <include ("form.dat")>) dovrete aggiungere la riga <form method="post" action="send.php">, e chiudere il tag alla fine della tabella con </form>. In alternativa, potere evitare di modificare il file form.dat e inserire le righe di codice suddette immediatamente prima e dopo l'include.

La sezione link partner nella home page di Mytom aveva bisogno di un deciso restyling, visto che era organizzata in un insieme di link confuso e senza nessuna formattazione.
Per ovviare a tale lacuna, Mytom ha deciso di rimettere tutto apposto ricorrendo ai CSS, d' altra parte tutto il sito è costruito con Cascade Syle Sheet.
Il primo passo è stato richiudere i link in un nuovo contenitore (i valori, d'ora in avanti, sono indicativi):

#link_partner {height: 120px}

Abbiamo dato così un' altezza fissa al contenitore. Successivamente abbiamo impostato un formato al tag "a" da inserire allinterno del contenitore.

#link_partner a {float: left; width: 290px; display: block; text-decoration:none; color: #396594; font-size: 12px; text-align: center;}

Dei valori sopra indicati è bene soffermasi sui seguenti:

- float: left; fa in modo che ogni link si disponga alla destra di quello precedente (left vuol dire che è mobile a sinistra)
- display: block; indica che il link deve avere la larghezza fissa dichiarata con width e deve comparire per intero come, appunto, un blocco.
- text-decoration: none; infine non fa comparire la linea sotto il link

Il risultato lo potete vedere voi stessi in home page, e tutto questo senza ricorrere alla solita tabella fatta di righe, colonne, allineamenti, dimensioni fisse ecc. ecc.

Nella prima versione di Mytom non erano previsti gli sfondi VGA, pertanto una volta deciso di offrire questo servizio si è dovuti ricorrere ad una modifica del codice php e del database.
In pratica è stato aggiunto il campo "sfondo640" alla tabella "sfondi" nel database, lo si è aggiunto nella query di selezione dei dati nelle varie pagine del sito che accedono al database - qualcosa del tipo $query_rsSfondi = "SELECT sfondoID, sfondoThumb, sfondoTitolo, sfondo640....... FROM tblsfondi"; - ed infine, laddove fosse presente uno sfondo con risoluzione VGA, si è inserito il seguente codice:

if ($row_rsSfondo ['sfondo640'] != ''){ echo 'VGA';}

Dove ['sfondo640'] != '' sta a indicare letteralmente: "se il campo sfondo640 è diverso da [!=] niente [''] scrivi a video VGA"

Questo non è un articolo tecnico. I metodi di lavoro alternativi evidenziati nel titolo si riferiscono all'interazione cliente/web master che portano alla realizzazione di un sito.
L'esperienza che Mytom ha maturato nella creazione di siti web gli consente di indicare, tra i tanti, due principali metodi di lavoro, alternativi l'uno rispetto all'altro, che devono essere esposti al cliente prima di iniziare qualsiasi tipo di progetto.

Metodo n. 1: Carta bianca al Web master
Questo è il metodo di lavoro preferito da Mytom e, al contempo, il più economico per il cliente. In sostanza, Mytom chiede al cliente quali sono le sue esigenze, le sue preferenze in fatto di grafica e contenuti, la data approssimativa di pubblicazione del sito e qualche altro dettaglio secondario. Ottenute le risposte, Mytom crea una bozza - solitamente solo grafica, utilizzando Fireworks - e la mostra al cliente, al quale consente di intervenire e suggerire tutte le modifiche che vuole (d'altra parte è lui che paga). Dopodiché inizia la realizzazione delle pagine web, e una volta completate, consegna il sito chiavi in mano al cliente, che può suggerire ancora qualche modifica, ma al quale non è consentito di stravolgere il tutto senza ulteriore esborso monetario.

Metodo n. 2: Interazione continua con il cliente
Questo metodo è decisamente più costoso. Per il cliente, che dovrà pagare cifre più alte. Per Mytom, che dovrà impiegare più tempo, dovrà dormire meno la notte, dovrà sacrificare domeniche e festività, e dovrà spendere cifre considerevoli in medicinali per il fegato, la bile e lo stomaco.
Solitamente Mytom non propone questo metodo di lavoro al cliente, ma è il cliente che lo richiede. Inizia anche questo con una presentazione grafica del sito, che normalmente viene approvata dopo 10/12 rivisitazioni. Dopodiché prosegue con la realizzazione del sito pagina per pagina, sotto il controllo diretto del cliente che normalmente ti fa realizzare l'80% del lavoro, salvo poi farti tornare indietro per rifare tutto da capo. Questo ciclo può ripetersi un numero indefinito di volte, soprattutto se il cliente non ha pagato un acconto (in questo caso o è un amico di Mytom, e non è detto che rimanga tale a lavoro ultimato, o Mytom era ubriaco quando ha accettato di iniziare a lavorare senza vedere soldi).
Alla fine, trascorso un periodo triplo o quadruplo rispetto al primo metodo, sopraffatti dalla stanchezza ci si accorda e il sito viene pubblicato.

Ovviamente può capitare che l'interazione tra cliente e web master porti a risultati migliori in tempi ragionevoli e senza particolari problemi (soprattutto alla cistifellea), ma, per esperienza diretta di Mytom, si tratta di casi più unici che rari.

Inserire in un sito una procedura utilizzabile per determinare quante volte i visitatori cliccano determinati link può offrire numerosi vantaggi. Per esempio si possono compilare statistiche a uso degli utenti o degli amministratori, o più semplicemente si possono determinare quali sono le risorse del sito più scaricate o più consultate.
Se non si è particolarmente ferrati in programmazione, database quant'altro, si può ricorrere alle innumerevoli risorse gratuite presenti in rete.
Nel sito html.it, nella sezione PHP/Script è presente la sezione Contatori di Click. Gli script presente al momento sono 31. Prendiamo in esame CS Outclick Tracker, che necessità di PHP e Mysql ma, allo stesso tempo, è semplicissimo da installare.
Allora: si scarica il file zippato e lo si scompatta da qualche parte sul computer. Si prende la directory Cstrack e la si posiziona nell'area del sito più appropriata (per esempio la cartella admin, se ne avete una).
Fatto questo si apre la directory, si seleziona il file shared.inc.php e si attribuiscono i valori alle variabili indicate, che sono:

- $admin_pass dove inserire la password per l'area di amministrazione
- $track_url dove inserire l'url della directory cstrack, per esempio http://www.tuosito.it/admin/cstrack
- $site_name non c'è bisogno di spiegazioni, spero

E infine i dati relativi al database:

- $dbhost indirizzo internet del server (IP o URL)
- $dbuser lo user name con quale accedere al database
- $dbpasswd password del database
- $dbname il nome del vostro database.

Il passo successivo consiste nel creare le due tabelle del database che conterranno i dati. Questa procedura è completamente automatizzata. Basta andare nella pagina http://www.tuosito.it/admin/cstrack/install/install.php ed inserire la password. Un messaggio a video vi avvertirà della creazione delle tabelle.
Infine dovrete inserire http://www.tuosito.it/admin/cstrack/out.php? su tutti i link che vorrete tenere sotto controllo. Per esempio se volete monitorare il link

www.tuosito.it/immagini.php

dovrete costruire il tag "a" in questo modo:

a href="http://www.tuosito.it/admin/cstrack/out.php?
http://www.tuosito.it/immagini.php"

Da questo momento in poi tutti i click sul link che porta a immagini.php alimenteranno il database. Per poter consultare i dati generati dovrete andare su www.tuosito.it/admin/cstrack/admin.php e inserire la password, se non siate già loggati.
A questo punto, tramite due menù a tendina, potrete visualizzare le statistiche giorno per giorno o cancellare quelle obsolete.
Infine, con qualche semplice adattamento potrete utilizzare i dati generati per creare ad esempio, una pagina dinamica che contiene una classifica dei download, o dei link più visitati.
Ma questo sarà oggetto di un prossimo tutorial.

Il tema F 117 Nighthawk, nella sezione Temi per pocket pc, è stato costruito eseguendo il fotomontaggio di una foto dell'aereo su sfondo completamente azzurro e la foto di un cielo tappezzato da nuvole bianche.
Per eliminare l'anonimo cielo azzurro della foto originale - recuperata tramite il servizio immagini di google - è stato utilizzato lo strumento bacchetta magica di Fireworks impostato su valore di tolleranza 50, lasciando l'impostazione bordo su antialiasing.
In tal modo è stato selezionato il cielo e tramite modifica/taglia si è proceduto alla rimozione.
Si è poi passati alla ricerca di un cielo con nuvole, lo si è copiato direttamente dal browser - tasto destro del mouse/copia - e lo si è incollato sull'area di lavoro di Fireworks.
Per portare il cielo sullo sfondo si è agito sul pannello livelli, ma lo stesso effetto sarebbe stato possibile premendo il tasto destro del mouse e cliccando su disponi/porta dietro.
Si è ridefinito il tutto e l'immagine è pronta per essere utilizzata come sfondo del tema.

Girovagando in rete mi sono imbattuto in cached.it. Il servizio gratuito offerto da questo sito consiste nel fornire una serie di statistiche relative alla frequentazione e al posizionamento del proprio sito nei motori di ricerca. E' sufficiente inserire l'url del sito e le statistiche vengono fuori in un batter d'occhio. Il sito è graficamente semplicissimo ma molto ben fatto, pertanto lo consigliamo a tutti quelli interessati a questo tipo di cose.

Inutile sottolineare che i risultati relativi a Mytom sono stati quantomeno sconfortanti...

Come molti altri programmi di grafica, Fireworks consente di salvare una serie di comandi ripetitivi, in modo da velocizzare operazioni che altrimenti impiegherebbero troppo tempo per poter essere portate a termine.
Un esempio concreto: Mytom crea sfondi per telefoni cellulari alle risoluzioni 240 x 320, 176 x 220, 128 x 160 (per ora...), ed infine una miniatura a 102 x 128. Ovviamente il primo sfondo a 240 x 320 sarÃ la matrice per tutti gli altri.
Il primo passo cosistere nell'aprire il pannello cronologia da menÃ¹ finestra. DopodichÃ¨ si iniziano le operazioni di ridimensionamento (menÃ¹ elabora/area di lavoro/dimensioni immagine), si imposta il tipo e la qualitÃ del file che verrÃ creato (menu finestra/ottimizza) e si effettua l'esportazione (menÃ¹ file/esportazione). Tale operazione andrÃ ripetuta per gli sfondi a risoluzione men mano inferiore.
Una volta creati tutti i file bisogna posizionarsi sulla scheda cronologia, si selezionano tutte le righe inerenti le operazioni effettuate, si clicca sul pulsante salva e si da un nome alla cronologia di comandi selezionata.
A questo punto nel menÃ¹ comandi, in fondo alla lista, troverete il nome del comando appena creato. SarÃ sufficiente cliccare li soltanto una volta per effettuare tutte le operazioni comprese nella cronologia che abbiamo salvato (nel nostro esempio bisognerÃ soltanto immettere manualmernte il nome del file).
Ovviamente bisogna stare attenti a salvare l'esatta sequenza dei comandi, anche perchÃ¨ si corre il rischio di rovinare immagini sulle quali magari stavamo lavorando da ore.

L'evasione fiscale in italia, non importa che la si guardi da destra o da sinistra, generà un'infinità problemi e un marea di discussioni. Segnalo a questo proposito un interessante scambio di opinioni sul forum di HTML.it riguardante il trattamento fiscale al quale sottoporre i propri guadagni generati tramite Google Adsense.
In partiolare il post esamina la posizione di chi non ha una partita IVA e utilizza il servizio di Google per "arrotondare lo stipendio".
Per chi fosse interessato, cliccare qui.

Per creare la sezione news, Mytom ha semplicemente creato tre paginette in php e le ha collegate ad una nuova tabella del database. Per fare ciò Mytom ha utilizzato più meno le stesse procedure impostate per le sezioni Temi, Sfondi e Midi.
Il problema è sorto appena Mytom ha deciso di inserire un anteprima nelle news nella home page, anteprima che deve contenere i primi 100 caratteri del testo della news. Per venire a capo del problema, come prima cosa è stata posta la questione sul forum di HTML.it, che alle 10.30 del mattino non è proprio affollatissimo...
Aspettando la risposta, Mytom decide fare una ricerca su Google, con la stringa: php selezione primi caratteri stringa.
In un anonimo sito è stata trovata la seguente formula:

echo $sub = substr ($row_rsNews['TestoNews'] ,0 ,100) . '...';

dove 'TestoNews' è il campo del database da sottoporre a selezione; '0' indica che i primi 100 caratteri vanno conteggiati dall'inizio e '100' sono, appunto, i 100 caratteri.

Mezz'ora dopo aver risolto la cosa è arrivato il contributo di un utente di HTML.it, comunque gentilissimo e nella sostanza identico alla soluzione trovata da Mytom

venerdì 21 novembre 2008

lunedì 20 ottobre 2008

mercoledì 3 settembre 2008

venerdì 20 giugno 2008

venerdì 30 maggio 2008

mercoledì 21 maggio 2008

sabato 17 maggio 2008

lunedì 12 maggio 2008

domenica 27 aprile 2008

mercoledì 23 aprile 2008

venerdì 18 aprile 2008

sabato 12 aprile 2008

mercoledì 9 aprile 2008

lunedì 7 aprile 2008

Archivio blog

Label Cloud

Siti Amici

Elenco blog personale

Lettori fissi