Yepa Blog » Web Tools

CSS – un valido strumento per progettare siti web

Stefano — Thu, 14 Dec 2006 10:53:47 +0000

I Cascading Style Sheets, piú comunemente conosciuti come CSS, sono un’importante risorsa in grado di migliorare l’accessibilitá ed, in generale, la qualitá del tuo sito.

Parlare dei CSS, porta inevitabilmente ad affrontare una serie di discorsi inerenti l’HTML, suoi pregi e difetti, l’uso che di questo linguaggio si è fatto nel tempo, l’uso per il quale questo linguaggio è stato creato.

Il W3C, infatti, ha sempre sostenuto che nella progettazione di un sito web, dovessero confluire due
distinte entitá:

contenuto
presentazione

Queste due entitá dovrebbero essere gestite da due linguaggi differenti: HTML e CSS.

Al primo, inizialmente, era relegato il solo compito di gestire testi e immagini, strutturati secondo un ordine gestito dal webmaster, mentre al secondo era, ed è tutt’oggi, relegato il compito di dare a quell’insieme di caratteri, un aspetto decisamente più “user friendly”, grazie alla gestione dei colori, dei margini, e del layout in genere.

Ciò che però è successo nel tempo, è stato che i webmaster tendevano ad identificare l’HTML come unico linguaggio per la progettazione di un sito Internet, fino a portarlo a fare cose per le quali non era stato creato. Ovviamente i limiti sono molti. Ció ha portato ad inventare diversi stratagemmi, alcuni anche piuttosto fantasiosi, per cercare di avvicinare il più
possibile il risultato alle nostre aspettative. Il risultato effettivo, percepito dall’utente che naviga, è peró quello di un sito molto pesante (in quanto tutti gli elementi relativi alla presentazione vengono ripetuti in tutte le pagine) e non sempre compatibile con tutti i browser in circolazione.

Il CSS, in questo caso, ci viene in aiuto non poco. Perchè? Innanzitutto, perchè %eacute; un linguaggio definito come standard dal W3C. Se la parte grafica è gestita dai CSS, il tuo sito sará strutturalmente valido per i browser che seguono gli standard, ed avrá la stessa impaginazione per tutti i browser esistenti.

Inoltre si potrá usufruire della grande comoditá di avere un solo file dove sono contenute tutte le regole relative all’impaginazione ed alla grafica. Modificando una regola direttamente nel CSS, ad esempio la dimensione di un font, questa sará modificata su tutte le pagine che fanno riferimento a quel CSS. Per fare questo tipo di modifica bastano 20 secondi. Prova ora a pensare
alla medesima modifica su un sito di centinaia di pagine in cui ogni pagina replica le informazioni relative al layout: ore di lavoro e molte possibilitá d’errore.

Forse parlare dei CSS come una manna dal cielo per l’aumento della produttivitá puó sembrare esagerato, ma i vantaggi sono notevoli e sotto gli occhi di tutti.

La serie d’articoli che seguiranno, di cui questo è solo un’introduzione, forniranno una panoramica sull’uso dei CSS, delle classi e delle proprietá degli elementi e saranno incentrati sul concetto di separazione fra contenuto e presentazione, con un’attenzione particolare a quest’ultima.

FLV – Un nuovo modo di fare streaming audio/video

Silvio — Thu, 16 Nov 2006 11:53:38 +0000

Google, YouTube e Msn sono tre colossi informatici che hanno puntato su questo nuovo modo di integrare componenti multimediali all’interno di pagine HTML. La novità viene da casa Adobe/Macromedia, che già dalla versione 6 del suo famosissimo Flash Player ha inserito la possibilità di trasmettere file audio/video in streaming.

Cosa si nasconde dietro il successo del portale youtube.com, che negli ultimi anni ha aumentato esponenzialmente i suoi accessi? Sicuramente la combinazione fra un’idea vincente e uno strumento validissimo, che ha portato anche altre realtà importanti del web entertainment, e non solo, ad affacciarsi verso di esso. Si parla del nuovo modo di fare streaming audio/video integrabile nella maggior parte dei browser grazie al Flash Player. Ad iniziare dalla versione 6, infatti, Adobe/Macromedia ha introdotto in Flash Player il supporto video (mentre prima era presente solo quello audio) e un nuovo formato per lo streaming: FLV.

La potenza di questo formato risiede nel fatto che il file Flash rimane separato dal flusso del filmato, riuscendo così ad avere un player multimediale (simile a Windows Media Player), il quale richiama il filmato che poi viene trasmesso in streaming. In pratica ciò si traduce nella possibilità di allargare il bacino d’utenza a tutti coloro che possiedono un browser dotato di Flash Player plugin, ovvero a circa il 90% dei navigatori.

Come per le altre tipologie di streaming, anche in questo caso, esiste una distinzione fra streaming vero e proprio (il filmato non viene scaricato in locale ma risiede sul server che trasmette porzioni di filmato), e quello che viene definito “scaricamento progressivo” (si vede il filmato mentre lo stesso viene scaricato in una directory temporanea del computer dell’utente).

HTTP Streaming – trasmettere filmati da un sito

Stefano — Wed, 20 Sep 2006 20:50:40 +0000

L’HTTP Streaming è il metodo più semplice e veloce per trasmettere da subito filmati e file audio dal tuo sito.

Oltre ad essere il metodo più semplice e veloce, l’HTTP Streaming è anche il più economico, in quanto utilizza strumenti gia presenti in ogni web server e non strumenti proprietari. In questo modo mettere del contenuto multimediale sul tuo sito è facilissimo. Naturalmente si tratta di un sistema usato principlamente da siti di piccole dimensioni visto che il filmato viene mandato al navigatore così com’e', senza alcuna compressione legata alla quantità di banda disponibile.

Esistono sostanzialmente due modi per trasmettere un video tramite HTTP: appoggiandosi al player del sistema operativo dell’utente finale, oppure integrando un player all’interno della pagina.

Nel primo caso avremo un semplice link al filmato WMV da visualizzare, al resto penserà il player dell’utente.

Clicca qui per vedere il filmato.

Nel secondo caso useremo il player integrato all’interno del browser del navigatore. In questo modo il filmato si vedrà all’interno della pagina e funzionerà anche su computer sprovvisti di video player come cellulari o palmari.

Inseriremo il seguente codice direttamente sulla pagina sulla quale vogliamo che appaia il filmato:

...

Questa è una prova di filmato embedded nella pagina.

Il filmato apparirá invece come segue:

Ora puoi provare anche tu ad inserire facilmente un filmato sulla tua homepage!

Tecniche e segreti dello streaming

Stefano — Wed, 12 Jul 2006 16:12:10 +0000

Con lo sviluppo di nuove tecniche e nuovi approcci stilistici, il web publishing ha avuto un’evoluzione che ha portato all’integrazione sempre più marcata di componenti audio e video all’interno dei siti Internet. Lo streaming audio/video ed il Flash, sono tecnologie figlie di questa evoluzione.

Molti siti specialistici e manuali definiscono lo streaming audio/video come la tecnologia ideale per la diffusione di porzioni di materiale audiovisivo via internet. Si parla di streaming intendendo la fruizione in tempo reale di un file al momento del “click”. Questa caratteristica rende appunto la tecnologia diversa dal normale file sharing.

Le differenze sostanziali riguardano gli strumenti utilizzati: per effettuare il download di un filmato basta creare un semplice link sul tuo sito mentre lo streaming, come vedremo, dovrà necessariamente utilizzare tecniche più avanzate.

Anche le dimensioni dei file utilizzati dovranno essere diverse. Sarà infatti difficile mettere in streaming un intero film o un concerto di 700Mb, sia per i limiti imposti dai provider in termini di spazio, sia perché la velocità del “buffering” (processo con il quale il player esegue il file mentre lo stesso viene scaricato) difficilmente potrà stare al passo con la visualizzazione del file.

Esistono due utilizzi principali di questa tecnologia: la trasmissione asincrona di file audio/video, accennata in precedenza, e la trasmissione “broadcast”. Entrambi i tipi di trasmissione utilizzano la compressione dei formati più diffusi (Real media, Windows media video, Quicktime). Nella prima i dati compressi sono immagazzinati sul server e utilizzati dall’utente in qualsiasi momento in modo sequenziale (il filmato viene visto per intero), nel secondo tipo, il flusso di dati proviene direttamente dalla sorgente, proprio come se fosse una trasmissione televisiva “in diretta”.

I due utilizzi necessitano di strumenti differenti sia per quanto riguarda i costi che i componenti: Streaming server e HTTP streaming. Nei prossimi articoli tratteremo i due metodi in modo particolare, portando anche qualche esempio su come inserire da subito un filmato in streaming all’interno del tuo sito.

Arrivano le linee guida per i siti fruibili da apparati mobili

Giacomo — Thu, 15 Jun 2006 12:01:15 +0000

Vista la crescita esponenziale degli apparati mobili che permettono di fruire del web, il W3C sta per pubblicare le Mobile Web Best Practices (MWBP), costituite da una serie di raccomandazioni per la costruzione di siti web ottimizzati per il web mobile.

Ad un anno dalla sua fondazione la Mobile Web Initiative si avvicina alla pubblicazione dei primi documenti ufficiali. In questa serie di articoli prenderemo in esame le principali indicazioni e riflessioni elaborate dalla MWI e cercheremo di commentarle alla luce della contemporanea evoluzione del mobile web.

Presso il W3C si e’ costituito un gruppo di lavoro dedicato allo sviluppo e alla definizione delle “buone pratiche” per il Web fruibile tramite dispositivi mobili. Il gruppo ha avuto come primario obiettivo la redazione di una raccolta di raccomandazioni (la MWBP), indirizzata a tutti quei soggetti coinvolti nel processo di ideazione, realizzazione e pubblicazione di un sito. In questa prima occasione valuteremo le premesse poste al lavoro di elaborazione delle raccomandazioni, un’operazione necessaria per porre nel giusto contesto e comprendere la portata delle linee guida.

L’aderenza alle linee guida diverrà il punto di partenza fondamentale per adottare il marchio “mobileOK”, una sorta di auto-certificazione che gli autori dei siti web potranno applicare in caso di conformità (analogamente a quanto accade per l’accessibilità). I requisiti e le modalità di acquisizione di tale marchio sono ancora in via di definizione.

Il working draft che prendiamo in esame, del quale è prossima una divulgazione ufficiale, è reperibile all’indirizzo http://www.w3.org/TR/2006/WD-mobile-bp-20060113. In esso si fissano innanzitutto alcune delimitazioni alla portata delle raccomandazioni.

L’intenzione è di fare delle MWBP uno strumento utile rispetto all’attuate stato del mobile web, senza perdersi in speculazioni circa quello che sta per accadere o che potrebbe verificarsi in futuro in questo ambito. Per tale motivo, se da un lato l’universalità delle raccomandazioni potrebbe risultare impoverita, dall’altro si preferisce fornire a chi lavora su questo genere di prodotti delle indicazioni realmente e immediatamente applicabili al proprio contesto di lavoro.

htaccess – far vedere ad un navigatore del web un elenco di file

Stefano — Wed, 19 Apr 2006 19:19:21 +0000

Spesso abbiamo la necessità di far vedere l’elenco dei file contenuti in una directory in modo che un utente possa scaricarli semplicemente con un click. Per farlo basta mettere tutti i file in una directory e non inserirne nessuno con nome index.html o index.htm.

Quando un browser chiama un indirizzo di una directory, se in questa directory non è presente un file .htaccess opportunamente configurato, ci sono due possibili comportamenti da parte del server:

Index Page: il Web Server restituisce una pagina di default della directory che tipicamente si chiama index.html o index.htm.
Directory Listing: se non è presente nessuna pagina che si chiami index.html o index.htm, il webserver restituisce l’elenco dei file presenti in quella directory in una pagina generata automaticamente.

Bisogna far attenzione al fatto che mostrare l’elenco dei file contenuti in una directory può essere considerato un buco di sicurezza; soprattutto qualora questi contengano informazioni che non si vogliono rendere pubbliche. Se invece si decide volontariamente di pubblicare o condividere un insieme di file, allora questo comportamento di default del Web Server rappresenta lo strumento giusto. Se i file cambiano spesso, ecco che l’uso del Directory Indexing diventa una vera e propria necessità.

Se, ad esempio, vuoi distribuire ai tuoi agenti dei listini di prodotti che cambiano frequentemente, allora il metodo più semplice è quello di metterli in una directory priva di file di indice (index.html o index.htm), in questo modo puoi usare tutte le potenzialità del Directory Indexing.

E’ possibile disabilitare completamente questa caratteristica del server in modo da evitare che le proprie pagine siano viste accidentalmente a causa della mancanza di un file di indice.

Per evitare che il Directory Indexing entri in funzione si deve inserire nella directory un file .htaccess che deve contenere la seguente linea:

Options -Indexes

Meta Tag Robots – l’alternativa al robots.txt

Stefano — Thu, 16 Mar 2006 11:55:17 +0000

Il meta tag “Robots” è il metodo più semplice per escludere dall’indicizzazione sui motori di ricerca alcune pagine del tuo sito gestendo il comportamento degli “spider”.

Gli spider sono agenti intelligenti dei motori di ricerca che interrogano i siti per registrare le informazioni necessarie all’indicizzazione. Seguono i link e passano da una pagina all’altra del tuo sito e da un sito all’altro senza soluzione di continuità.

In passato abbiamo visto come usare il file robots.txt per gestire l’accesso degli Spider alle varie pagine e directory del sito, specificandone funzionalità e sintassi. Come visto il robots.txt è uno strumento molto potente, grazie anche alla sua completa personalizzazione da parte dell’amministratore del sito ma, data l’ampia possibilità di opzioni, non è adatto agli utenti meno esperti. Il meta tag “Robots” è più semplice ed è sufficiente per le funzioni base.

Iniziamo dalla sintassi:

Le principali operazioni sono le seguenti:

dove la direttiva index/noindex comunica allo spider che quella pagina può essere (index) o non può essere (noindex) indicizzata, mentre la direttiva follow/nofollow, indica che lo spider può o meno scendere attraverso i link presenti nella pagina.

Per semplificare ulteriormente è possibile anche utilizzare le direttive ALL e NONE le quali stabiliscono il comportamento del tag relativamente a index,follow e noindex,nofollow

equivale a:

mentre

equivale a:

Questi strumenti sono stati creati per impedire o limitare il recupero delle informazioni agli spider, quindi se nessun meta tag viene specificato o nessun file robots.txt viene trovato, gli spider svolgono la loro regolare attività indicizzando tutte le pagine del tuo sito.

Description – Il Meta Tag che si leggerà su Google

Stefano — Thu, 16 Feb 2006 12:19:29 +0000

Questo meta-tag fornisce al motore di ricerca una descrizione riassuntiva della tua pagina web.

Il Meta Tag “Description” deve essere inserito nel codice HTML con questa sintassi:

Ad esempio nel caso di un’azienda che venda computer, il meta-tag “description” potrebbe essere il seguente:

Quando scrivi il meta-tag description ricordati sempre del target a cui ti rivolgi, scegli i termini che più si avvicinano alle sue esigenze e cerca di non essere mai troppo generico. Ricordati che molti motori di ricerca riprongono la tua “description” esattamente come l’hai scritta, posizionandola subito dopo il titolo della pagina (fai una prova con Google per vedere un esempio).

E’ molto importante scegliere frasi d’impatto brevi e coinvolgenti, che aiutino il navigatore a capire immediatamente i contenuti della tua pagina web e che lo incuriosiscano spingendolo a “cliccare”.

Keywords: una delle più importanti famiglie di meta tag

Stefano — Thu, 15 Dec 2005 12:51:45 +0000

Un fondamentale aiuto per la scalata ai vertici dei motori di ricerca è fornito dal meta tag “keywords”, le parole chiave che illustrano il contenuto di ogni pagina del tuo sito.

Qui affrontiamo gli aspetti tecnici relativi all’utilizzo dei Meta Tag “Keywords”. Per quanto riguarda la scelta delle parole e la loro efficacia nel portare un sito in prima pagina su Google o Yahoo consigliamo di leggere gli articoli del Guru dei Motori di ricerca nella sezione Web Marketing.

Iniziamo con la sintassi da seguire, per utilizzare correttamente questi meta tags:

Come gli altri meta tag di tipo NAME, non si usa per comunicare informazioni di carattere tecnico dal browser al server, bensì per dare informazioni addizionali utili alla corretta fruizione del sito.

L’attributo CONTENT serve a specificare tutte le parole chiave che hanno a che fare con la pagina e che in qualche modo ne rappresentano il contenuto. Ogni parola o serie di parole contigue dovrà essere separata da una virgola.

Questo tag, come tutti i meta tag che abbiamo analizzato finora e che analizzeremo in seguito, deve essere compreso fra i tag:

Ad esempio:



Il mio sito



..
..
..

Focalizziamo per un momento sul funzionamento di un motore di ricerca. Per trovare un sito si specificano delle parole chiave che verranno usate come criteri di ricerca. Il motore esegue la ricerca confrontando le parole chiave con quelle presenti nel suo database relative alla pagina. E’ proprio su questo che sono utilissime le “Keywords” specificate nella prima parte della pagina html con il meta tag. Sarà l’algoritmo del motore di ricerca a definire quanto importanti siano queste parole per apparire ai primi posti.

Informazioni sul contenuto di una pagina con i Meta Tag

Stefano — Thu, 17 Nov 2005 12:23:40 +0000

Con i Meta Tags del tipo “Content”, puoi specificare le caratteristiche degli elementi che l’utente troverà all’interno della pagina web. Uno strumento in più per migliorare la classificazione da parte dei maggiori motori di ricerca e la navigabilità del tuo sito.

I meta tag, contenuti nell’header di un documento html, permettono di dare informazioni al server e successivamente al browser riguardanti il modo di trattare il documento nel presentarlo all’utente.

In particolare, i meta tag della serie “Content”, permettono di forzare il comportamento dei browser affinché il sito sia visualizzato nel modo in cui l’hai progettato.

I più importanti meta tags del tipo “Content” sono:

Content-Type

Es.

Con questo tag, puoi specificare il set di caratteri utilizzato nella pagina. E’ importante specificare questa caratteristica perché, nel caso in cui volessi inserire dei caratteri diversi dallo standard ISO-8859-1 sul tuo sito, il browser sarebbe in grado di aggiornare le sue impostazioni prima di caricare il contenuto della pagina, permettendo una corretta visualizzazione di tutti i caratteri.

Content-Script-Type

Es.

Poiché HTML non si appoggia ad un linguaggio di scripting, se vuoi inserire delle porzioni di codice all’interno del documento HTML dovrai utilizzare i linguaggi comunemente chiamati “Embedded” specificando quale sia l’interprete da considerare come predefinito.

Nell’esempio abbiamo impostato javascript come interprete predefinito, ma è possibile utilizzare anche altri linguaggi come vbscript o tcl, i quali verranno dichiarati in questo modo:

Di solito omettere questo meta tag non compromette la funzionalità degli script all’interno della pagina, ma rende il documento non valido all’analisi degli standard del W3C.

Content-Language

Es.

Con questo tag, è possibile indicare la lingua del documento HTML. Inserirlo può aiutare i motori di ricerca nella catalogazione dei siti, facilitandone così il ritrovamento da parte degli utenti.

Potrai trovare la descrizione degli altri META TAG della famiglia content sui prossimi articoli.

Refresh Tag – ricaricare automanticamente una pagina o inviare utenti ad altri

Stefano — Thu, 16 Jun 2005 10:53:18 +0000

Gestire la cache con i meta tags

Stefano — Wed, 23 Mar 2005 15:01:46 +0000

I tag “expires” e “pragma” permettono di gestire la cache del browser dei visitatori del tuo sito. La mancanza di controllo sul funzionamento della cache può impedire ai navigatori di vedere gli ultimi aggiornamenti del tuo sito.

Per alcuni siti è di fondamentale importanza che i parametri di controllo della cache non siano gestiti dal browser, ma siano definiti direttamente dalla pagina che si sta visualizzando. Un esempio è dato dai documenti per i quali si vuole fissare il tempo di permanenza nella cache. Un’altra esigenza molto sentita è quella della privacy del navigatore il quale può non desiderare che il documento che sta visitando sia visionato da chiunque acceda al suo disco.

Un’altro esempio, può essere rappresentato dalle pagine aggiornate più di una volta al giorno (portali, quotidiani on-line, ecc). In questo caso addirittura, non si vuole nessuna memorizzazione nella cache per evitare la visualizzazione di pagine obsolete.

Questi problemi sono gestibili facilmente dai meta tags:

Il tag “expires”, indica l’istante fino al quale il browser userà la versione della pagina in cache. La sintassi è la seguente:
La data è modificabile a piacere ma sempre nella forma specificata. Se si inserisce una data al passato oppure uno ’0′, la pagina verrà scaricata ogni volta, aggiornando il contenuto della cache ad ogni accesso.
Il tag Pragma, disabilita invece la memorizzazione della pagina. La sintassi è la seguente:
In questo caso la pagina non verrà mai memorizzata nella cache del browser.

Meta description per presentare il tuo sito sui motori di ricerca

Stefano — Thu, 20 Jan 2005 15:26:46 +0000

Un tag utile per descrivere il contenuto di una pagina html, utilizzato dai motori di ricerca sia per fornire ai navigatori la descrizione del tuo sito, che per trovare le corrispondenze con le parole chiave ricercate.

Il meta tag “description” è un breve testo con il quale è descritto il contenuto del documento. E’ molto importante soprattutto per quelle pagine che contengono poco testo come frameset o le pagine in Flash. In caso di mancanza (o carenza) di testo, è proprio nei meta tag che i motori di ricerca troveranno le corrispondenze con le parole chiave richieste.

Dal testo contenuto nella “description” molti motori di ricerca ricavano le informazioni che appariranno nelle pagine di elenco. In pratica le poche righe sotto il titolo di una pagina web che si leggono su alcuni motori di ricerca sono prese dai meta description.

La sintassi per inserire il tag all’interno della pagina è la seguente:

Ovviamente il tag deve apparire fra i tag di intestazione della pagina

Nome e cognome di un sito: I Meta Tag

Silvio — Thu, 16 Dec 2004 10:43:06 +0000

I Meta Tag sono informazioni presenti all’interno di una pagina web che non saranno visualizzate da chi vedrà la pagina, ma che saranno essenziali per permettere ai motori di ricerca di indicizzare correttamente un sito.

I Meta-Tag servono ad integrare il contenuto di un documento HTML con informazioni aggiuntive che non verranno visualizzate da chi vede la pagina. Gli elementi META vengono inseriti sotto forma di tag HTML all’interno dell’intestazione della pagina. Fra queste informazioni risaltano, per importanza e frequenza d’uso, quelle relative all’indicizzazione dei motori di ricerca. Nel seguito saranno esplorate tutte le potenzialità di questo strumento.

Innanzitutto gli elementi META vanno inseriti nel documento HTML tra i tag e , indifferentemente prima o dopo il tag . I Meta-tag sono di due tipi: HTTP-EQUIV e NAME. Gli attributi di tipo HTTP-EQUIV controllano l’azione del browser e possono essere usati per raffinare le informazioni fornite durante la comunicazione con il Server. Quando un browser carica una pagina con all’interno un Meta-tag di tipo HTTP-EQUIV, ne prende le informazioni e le usa andando a sostituire le relative impostazioni di default, come ad esempio la lingua, lo stile della pagina (css, html, ecc..), la gestione della cache, ecc. Gli attributi NAME, invece, non raccolgono informazioni importanti o influenti per il browser, ma sono comunque molto utili per il documento HTML, in quanto arricchiscono la pagina con informazioni quali la descrizione e le parole chiave, che risultano fondamentali per ottenere una buona posizione nei motori di ricerca. La sintassi per inserire uno dei due, oppure entrambi, i tipi di meta-tag è la seguente: <pre> <META HTTP-EQUIV="nome" CONTENT="contenuto"> <META NAME="nome" CONTENT="contenuto"> </pre> Il contenuto determina il valore da assegnare al campo definito nel nome che lo precede. Nei prossimi articoli analizzeremo nel dettaglio i diversi campi che possono comparire all’interno dei due tipi di Meta Tag. </article> <article> <h1>Robots.txt – dire ai motori di ricerca come indicizzare il tuo sito</h1> Silvio — Thu, 18 Nov 2004 12:22:00 +0000 I motori di ricerca, per l’indicizzazione dei siti Web, fanno uso di un sistema denominato “The Robots Exclusion Standard” per capire quali parti del tuo sito visitare ed indicizzare. I moderni motori di ricerca utilizzano degli agenti intelligenti, i cosiddetti “spider”, in grado di recuperare informazioni sui siti disponibili in rete ed effettuarne un’indicizzazione. Gli spider ricercano come primo file all’interno di un sito Web, il file “robots.txt”. Si tratta di un semplice file di testo, organizzato in righe: la prima riga specifica gli spider “ammessi” a visitare il sito, mentre le righe successive istruiscono lo spider sui file da non visitare. Per scrivere il file robots.txt è importante non fare uso di editor HTML WYSIWYG o altro, ma di un semplice editor di testo come “Notepad” (Blocco Note) per sistemi Microsoft Windows o “vi” per sistemi Unix. Il formato seguito all’interno del file è il seguente: <pre><Field> ":" <value></pre> Vediamo subito degli esempi. Inserendo come prima linea nel file: <pre>User-agent: googlebot</pre> permettiamo allo spider di google (http://www.google.com) di navigare sul nostro sito. Se volessimo accettare tutti gli spider, basterebbe un: <pre>User-agent: *</pre> La rimanente parte del file “robots.txt” è costituito da direttive di tipo “Disallow”: inserendo ad esempio <pre>Disallow: email.htm</pre> impediamo allo spider di accedere al file email.htm, mentre con un <pre>Disallow: /cgi-bin/</pre> impediamo la navigazione della directory /cgi-bin/. Vediamo alcuni esempi “classici” del file, più da vicino. Nel seguente modo permettiamo a tutti gli spider di accedere a tutti i file del sito: <pre>User-agent: * Disallow:</pre> Questo è invece quello che dobbiamo scrivere per impedire l’accesso a qualsiasi spider: <pre>User-agent: * Disallow: / </pre> Così impediamo a tutti gli spider la lettura delle directory /cgi-bin/ e /images/: <pre>User-agent: * Disallow: /cgi-bin/ Disallow: /images/ </pre> Se volessimo tener lontano solo lo spider di google, basterebbe: <pre>User-agent: googlebot Disallow: /</pre> Attenzione: lasciando in bianco il campo “Disallow: “, lo spider avrà accesso a tutti i file del sito! Per tanto ricordiamoci di scrivere il file “robots.txt” con molta cura…. Buona Scrittura! </article> <article> <h1>htaccess – Redirezione delle pagine Web</h1> Stefano — Fri, 25 Jun 2004 15:40:28 +0000 </article> <article> <h1>htaccess – Proteggere il proprio spazio Web</h1> Stefano — Mon, 22 Mar 2004 11:18:19 +0000 I Server della Yepa permettono la protezione delle directory senza l’uso di particolari moduli software o script CGI: basta inserire due semplicissimi file di testo. Grazie al sistema di autenticazione supportato dal Web Server Apache e dal protocollo HTTP, è sufficiente inserire nella directory del tuo spazio Web da proteggere due file: il file “.htaccess” ed il file “.htpasswd”. Se configurati a dovere, puntando il tuo Browser (Internet Explorer, Netscape o altri) sulla directory protetta, si aprirà una finestra di pop-up per effettuare l’autenticazione (inserire nome utente e password). Con un semplice editor di testo prova a generare un file dal seguente contenuto: <pre> AuthName "Area Protetta" AuthType Basic AuthUserFile /home/www/tuodomino/.htpasswd require valid-user </pre> e salvalo come “.htaccess”. Ovviamente alcuni dei campi presenti andranno modificati. In particolare puoi sostituire “Area Protetta” del campo AuthName, con un testo che sará visualizzato nella finestra di pop-up. Facendo molta attenzione, puoi sostituire il campo AuthUserFile con il PATH assoluto del tuo file “.htpasswd”: tale file conterrà login e password (codificata) per l’accesso alla directory. E’ indispensabile scrivere correttamente il PATH, altrimenti la directory sarà leggibile da chiunque. A questo punto puoi costruire il file “.htpasswd”. All’interno di quest’ultimo, potrai specificare uno o più utenti autorizzati ad accedere allo spazio, semplicemente indicando username e password. Per problemi relativi alla sicurezza, essendo comunque il file “.htpasswd” in “chiaro”, è necessario codificare la password tramite l’API crypt() messa a disposizione dai sistemi Unix. Yepa mette a disposizione un intuitivo generatore di password raggiungibile all’URL: http://www.yepa.com/crypter/password.html . Supponi di aver scelto come password “pippo”. Inserendo tale stringa nella Form lo script ti restituirà la password cifrata, ad esempio: KBdFXBw9L2szY A questo punto basterà inserire nel file “.htpasswd” la seguente linea: <pre> nomeutente:KBdFXBw9L2szY </pre> dove “nomeutente” è lo userid (che comunque rimane in “chiaro”) scelto. Per concludere dovrai semplicemente trasferire i file generati nella directory da proteggere e provare ad entrare con il tuo Browser (Internet Explorer, Netscape o altri) su quest’ultima per effettuare tutti i Test necessari. </article> <article> <h1>I file .htaccess (seconda parte)</h1> Stefano — Wed, 25 Feb 2004 16:29:34 +0000 I file .htaccess permettono di definire quale sia la pagina di default di una directory e, in mancanza di essa, di evitare che vangano visualizzati i nomi di tutti i files contenuti della directory. Si è visto nella prima parte come sia possibile cambiare tramite file .htaccess il comportamento del server web in caso di errori o situazioni particolari. Vediamo come evitare che chiunque legga i nomi dei file contenuti nelle directory e come indicare il nome della pagina che sará caricata automaticamente quando viene chiamata una directory. Una funzionalità potenzialmente pericolosa, attiva di default sulla maggior parte dei Web Server, è il cosiddetto “Directory Listing” che funziona così: quando si richiede dal browser una directory in cui non sia presente una homepage, appare il contenuto di tutta la directory. Naturalmente questa funzionalità può rivelarsi un arma a doppio taglio visto che alcuni programmatori poco accorti inseriscono password o altri dati privati in file che potrebbero tranquillamente essere letti via web da chiunque. Per disabilitare il listing basta inserire nel solito file .htaccess la seguente direttiva: <pre>Options -Indexes</pre> Un altra direttiva importante è <pre>DirectoryIndex <pre>. Questa ci permette di specificare il file che viene cercato dal browser come homepage (di default index.html). <pre>DirectoryIndex pagina.html</pre> E' possibile specificare più di un file: <pre>DirectoryIndex pagina.html pagina2.htm homepage.cgi</pre> in tal caso se non è presente il primo file si passera a visualizzare il secondo e così via. Un' ultima nota: Come accennato prima molti programmatori distratti inseriscono dati privati in file che possono essere visualizzati dal browser o semplicemente scaricati. Per evitare che siano visibili è sufficiente rinominarli in qualcosa che inizi con .ht (mi raccomando il punto davanti) in questo caso il server impedirà automaticamente l'accesso a questi file. </article> <article> <h1>Il Contatore: attivane uno perfetto per il tuo sito</h1> Silvio — Thu, 22 Jan 2004 16:24:42 +0000 Cos’è un contatore di accessi? Probabilmente avrai incontrato siti internet che contengono sulla homepage un’immagine con dei numeri che magicamente si incrementano ad ogni accesso. Cosa sono questi contatori? Come vengono generati? Dove posso trovarli? Queste sono le domande più comuni. Il contatore di accessi, non è altro che uno script richiamato nella homepage o in qualsiasi altra pagina di cui si vogliono analizzare le visite, che genera ad ogni chiamata un’immagine raffigurante un numero. Questo numero viene inserito in un file che viene incrementato ogni qualvolta si accede a quella determinata pagina. Il contatore è un sistema immediato e accattivante per dare una misura del successo di un sito. Yepa viene in contro ai webmaster fornendo gratuitamente questo servizio e mettendo a disposizione all’indirizzo <a href="http://www.yepa.com/esempio.html">http://www.yepa.com/esempio.html</a> una vasta gamma di contatori facilmente integrabili con la propria homepage. La pagina di esempio spiega in modo dettagliato come inserire il contatore, ma per qualsiasi domanda, problema o richiesta d’aiuto puoi rivolgerti al supporto tecnico (supporto@yepa.com) </article> <article> <h1>Filtro antispam intelligente personalizzato e gratis</h1> Silvio — Thu, 20 Nov 2003 17:37:31 +0000 Basta un click del mouse per indicare a Mozilla che un messaggio di posta elettronica è spam. Mozilla utilizza un sistema intelligente di apprendimento supervisionato per individuare e filtrare i messaggi molesti per te (e solo per te) sulla base delle tue indicazioni precedenti. La lotta allo Spam ha avuto finora un limite molto importante: il rischio di filtrare una mail utile all’utente. Spesso per chi lavora con la mail perdere un messaggio ha conseguenze gravi. Per non correre questo pericolo, i filtri tradizionali, che intercettano la mail dal lato del Server, devono lasciare passare moltissimi messaggi che in realtà sono di Spam. Mozilla ha trovato la soluzione migliore. Un filtro intelligente personalizzato e capace di “Apprendere”. Il meccanismo è semplice: quando si riceve un messaggio Spam si marca come “Junk” (Immondizia) con un click del mouse. Il Programma automaticamente lo mette nella directory Junk ed impara che messaggi simili a quello sono di Spam. Le prime volte bisogna andare a vedere nella directory Junk se alcuni messaggi marcati come “Spam” sono in realtà buoni. In questo caso sempre con un click del mouse si marca come “Not Junk” ed il sistema impara a riconoscere i messaggi buoni. Dopo pochi giorni si noterà che Mozilla ha imparato a riconoscere perfettamente tutti i messaggi buoni ed a filtrare il 99% di quelli di Spam. Una volta scaricato il programma dal sito www.mozilla.org i filtri anti Spam si configurano dal menu: “Tools”, sottomenu: “Junk Mail Controls” Bisogna attivare: <ul> <li>“Enabel Junk mail controls”: per attivare i filtri antijunk. <li>“Do not mark messages as junk mail if sender is in my address book”: per fare in modo che in ogni caso i messaggi presenti sulla nostra rubrica di mail non saranno marcati come Junk. <li>“Move incoming messages determined to be junk to Junk Folder”: per fare in modo che il programma metta i messaggi di Junk direttamente nella cartella Junk <li>“When I manually mark messages as Junk move them to the Junk folder”: per fare in modo che i messaggi che manualmente indico come Junk siano spostati nella cartella Junk. </ul> Infine si clicca su OK e si cominciano ad usare questi filtri antispam. A questo punto si può tranquillamente cominciare ad educare il programma e vederlo rapidamente migliorare diventando bravissimo ad eliminare le mail di spam. </article> <article> <h1>.htaccess: personalizzare le pagine di errore del tuo sito</h1> Stefano — Thu, 19 Jun 2003 10:49:22 +0000 Se il server web su cui risiede il tuo sito è una macchina condivisa ha certamente una configurazione poco personalizzata. Non ti piacerebbe costruire personalmente la tua pagina di errore in italiano e farla apparire al posto della famigerata schermata “404 File not found”? Questa pagina viene automaticamente generata quando un file richiesto non è presente sul server. Per modificare il comportamento standard del server web si utilizzano dei normali file di testo con nome “.htaccess” da inserire nelle directory del proprio spazio web. Vediamo ora in pratica come utilizzarne uno per definire una nostra pagina di errore… <ul> <li>Creiamo con il nostro editor di testo preferito un file chiamato “.htaccess” e al suo interno scriviamo: <pre>ErrorDocument 404 /errore.html</pre> <li>Salviamo, e mettiamolo nella directory principale del nostro spazio web. <li>Creiamo una pagina web dal nome errore.html e uploadiamo in ftp anch’essa <li>Ora, quando faremo dal nostro browser una richiesta ad una pagina non esistente, apparirà la pagina “errore.html” </ul> Naturalmente è possibile definire una pagina web per ogni tipo di errore, la sintassi di .htaccess come avrete capito e’: <pre>ErrorDocument codice_errore pagina_da_visualizzare</pre> Quindi se volessimo visualizzare la pagina pippo.html ogni qual volta si verifica un errore di codice 500 scriveremo nel nostro file .htaccess: <pre>ErrorDocument 500 /pippo.html</pre> Per indicare la pagina si può usare il percorso relativo, ed esempio: /pippo.html, /pippo/pluto.html oppure l’url completa: http://pippo.com/errore.html, http://yepa.com/error.html In questa tabella potete consultare i vari codici del protocollo HTTP: <table> <tr> <th>Codice <th>Cosa significa <tr> <td>100 <td>Continua <tr> <td>101 <td>Switch di protocollo <tr> <td>200 <td>OK <tr> <td>201 <td>Creato <tr> <td>202 <td>Accettato <tr> <td>203 <td>Informazioni non-authoritative <tr> <td>204 <td>Nessun contenuto <tr> <td>205 <td>Reset del contenuto <tr> <td>206 <td>Contenuto parziale <tr> <td>300 <td>Scelte multiple <tr> <td>301 <td>Spostato in modo permanente <tr> <td>302 <td>Spostato temporaneamente <tr> <td>303 <td>Vedere altro <tr> <td>304 <td>Non modificato <tr> <td>305 <td>Utilizzare proxy <tr> <td>400 <td>Richiesta errata <tr> <td>401 <td>Non autorizzato <tr> <td>402 <td>Pagamento richiesto <tr> <td>403 <td>Vietato <tr> <td>404 <td>Non trovato <tr> <td>405 <td>Metodo non permesso <tr> <td>406 <td>Non accettabile <tr> <td>407 <td>Richiesta di autenticazione del proxy <tr> <td>408 <td>Timeout della richiesta <tr> <td>409 <td>Conflitto <tr> <td>410 <td>“Gone” <tr> <td>411 <td>Lunghezza richiesta <tr> <td>412 <td>Prerequisito fallito <tr> <td>413 <td>Entità della richiesta troppo grande <tr> <td>414 <td>URL della richiesta troppo lunga <tr> <td>415 <td>Tipo di media non supportato <tr> <td>500 <td>Errore interno del server <tr> <td>501 <td>Non implementato <tr> <td>502 <td>Gateway errato <tr> <td>503 <td>Servizio non disponibile <tr> <td>504 <td>Timeout del gateway <tr> <td>505 <td>Versione HTTP non supportata </table> Ovviamente la pagina di errore creata conterrà un link alla homepage del sito e consentirà di non perdere gli utenti che hanno sbagliato a digitare la URL del sito. L’utilizzo di pagine di errore personalizzate ha un effetto benefico anche per il posizionamento ai primi posti sui motori di ricerca. </article> <article> <h1>Standard W3C: il tuo sito compatibile con tutti i browser</h1> Stefano — Fri, 18 Apr 2003 09:52:13 +0000 Seguire gli standard del W3C per essere competitivi. Una parte dei siti presenti su Internet soffre problemi d’incompatibilità con i diversi browser esistenti. Persino versioni diverse dello stesso browser possono causare errori. L’errore più comune è pensare che il problema sia sempre del browser. Qualche volta è proprio così ma nella maggior parte dei casi la causa è da imputarsi o alla scarsa qualità del tool utilizzato (non è molto professionale utilizzare un word processor per fare un sito web) o alla poca attenzione che ha riservato il webmaster agli standard. La forza di Internet nasce proprio da standard ben definiti e liberamente consultabili da tutti. Non seguire questi standard equivale a creare prodotti non adatti alla filosofia della rete. Il W3C (World Wide Web Consortium) è l’ente che si occupa di definire gli standard per il Web. Ogni buon webmaster dovrebbe passare per questo sito (<a href="http://w3c.org">http://w3c.org</a>) e controllare se il proprio lavoro rispetta le varie specifiche, dall’HTML ai CSS fino ai contenuti multimediali. Per velocizzare il test è disponibile un’interfaccia web alla seguente URL: <a href="http://validator.w3.org">http://validator.w3.org</a> . Basta inserire l’indirizzo della propria pagina web per effettuare diversi test… Non bisogna preoccuparsi; è normale che escano fuori un po’ di errori. Il test è poco elastico. Ci si deve iniziare a preoccupare se gli errori iniziano a superare la dozzina per pagina… Una volta effettuata la verifica e le relative correzioni, non resta altro da fare che togliere le antipatiche e antiestetiche icone in fondo alle pagine con la scritta “sito ottimizzato per il browser xxx”. </article> <article> <h1>Introduzione alle classi CSS</h1> Roberto — Tue, 18 Mar 2003 16:49:36 +0000 Diamo un tocco di classe alle nostre pagine web con i CSS (Seconda parte). Vediamo un po’ più in dettaglio come i CSS possono aiutarci ad abbellire le nostre pagine web. Per le prove possiamo usare il file della parte precedente, style.css e aggiungere le nuove regole. Una classe CSS è un gruppo di regole che potremo applicare ad un oggetto della nostra pagina, ad esempio lo sfondo di una tabella, il pulsante di una form, lo sfondo dell’intera pagina… Questo ci permetterà di dare lo stesso ‘layout’ a tutta la nostra pagina web senza fatica. Per creare una classe aggiungeremo una linea al nostro file di testo in questo modo: <pre>.nuovaclasse {color: blue}</pre> Abbiamo appena creato la classe ‘nuovaclasse’ ed abbiamo deciso che qualsiasi elemento appartenente a questa classe usera’ il colore blu per il testo al suo interno. Aggiungiamo un pulsante con testo blu alla nostra form: <pre><INPUT type='button' value='Pulsante con CSS' class='nuovaclasse'></pre> <INPUT type='button' value='Pulsante con CSS' class='nuovaclasse'> Associamo ad un testo il colore blu: <pre><div class='nuovaclasse'>Ciao, prova testo in blu</div> oppure usando il TAG <pre>Ciao, prova testo in blu Ciao, prova testo in blu Vediamo ora come applicare il concetto di classe al foglio di stile della scorsa lezione (<a href="http://yepa.com/yps/themes/Yepa/style/style.css">http://yepa.com/yps/themes/Yepa/style/style.css</a>): L'originale: <pre> a {text-decoration: none} a:hover {color: #ff0000 ; text-decoration: none} </pre> ...e la versione associata a una classe: <pre> a.nuovaclasse {text-decoration: none} a:hover.nuovaclasse {color: #ff0000 ; text-decoration: none} </pre> in questo modo abbiamo associato alla classe 'nuovaclasse' il cambiamento del colore dei link al passaggio del mouse... </article> <article> <h1>Un tocco di classe alle pagine web con i CSS</h1> Roberto — Thu, 20 Feb 2003 12:00:21 +0000 I CSS (Cascading Style Sheets – Fogli di stile a cascata) sono dei semplici file di testo che “spiegano” al browser come mostrare ai visitatori testi, immagini e pulsanti di un intero sito con uno stile grafico uniforme e ben definito. Per comprendere al meglio l’utilizzo dei CSS e la loro semplicità, conviene partire da esempi pratici. Su questo sito (yepa.com se non te ne sei accorto ;=P) puoi notare che passando su un <a href="http://yepa.com">link</a> con il mouse, questo cambia colore da blu a rosso. Questo effetto è ottenuto con due semplici linee in un file di testo (puoi scaricarlo da qui: <a href="http://yepa.com/yps/themes/Yepa/style/style.css">http://yepa.com/yps/themes/Yepa/style/style.css</a>). Vediamone il contenuto: <pre> a {text-decoration: none} a:hover {color: #ff0000 ; text-decoration: none} </pre> nella prima linea dico che il tag <a> (quello per fare i link) non deve avere nessuna decorazione (text-decoration: none) mentre nella seconda linea dichiaro che se si va sopra (hover) il tag <a> (quello per i link) con il mouse, il colore deve diventare rosso (color: #ff0000) e la decorazione del testo deve rimanere nulla (text-decoration: none). Semplice vero? Ok, ho preparato questo file di testo ma ora come dico al browser che deve utilizzare il nuovo stile nell’interpretare la pagina? Niente di più facile, esiste un tag HTML apposito da inserire tra gli <head></head> della pagina in questione. Il tag è: <link REL=”StyleSheet” HREF=”themes/Yepa/style/style.css” TYPE=”text/css”> Naturalmente dopo HREF ci va il percorso del vostro file CSS. Vediamo la lista di alcuni degli attributi CSS utilizzati più di frequente: <ul> <li>color: specifica il colore da usare <li>text-decoration: serve per decorazioni del testo, come marcatura, sottolineatura o corsivo <li>background: definisce il colore dello sfondo es.: {background: red} -> setta il colore di sfondo, di un testo, un’immagine o tutta la pagina come rosso <li>font: definisce il tipo di carattere (font) da utilizzare es.: {font: Arial} -> setta il font Arial Con questi quattro attributi già puoi rivitalizzare un po’ le tue pagine… </article> <article> <h1>Come inserire un favicon accanto alla barra degli indirizzi del nostro sito</h1> Stefano — Tue, 14 Jan 2003 18:33:40 +0000 Il favicon è una piccola immagine, spesso un logo, presente sulla barra dell’indirizzo alla sinistra della URL. Quante volte, navigando su Internet, ci siamo imbattuti in siti che presentavano “un’immaginina”, spesso un logo, sulla barra dell’indirizzo alla sinistra dell’http? Quante volte ci siamo chiesti come creare un effetto del genere? <center></center> In effetti e’ molto semplice creare un “favicon” (così si chiama “l’immaginina”). Per fare in modo che anche il nostro sito ne abbia una, dobbiamo inserire un tag all’interno della pagina html in cui vogliamo che appaia la nostra favicon. Il Tag in questione e’ il seguente: <pre> <html> <head> <link REL="icon" HREF="nome_immagine.gif" TYPE="image/gif"> </head> . . . </html> </pre> Niente di piu semplice! Ovviamente l’HREF dovra’ contenere il percorso dell’immagine all’interno del dominio ed il campo TYPE conterra’ il tipo dell’immagine stessa che puo’ essere gif, jpeg, png, bmp ecc. </article> </main></body></html>