Tag: tutorial

Il posizionamento dei blocchi con html e css

Torniamo sull’argomento del posizionamento dei blocchi <div> in una pagina html, perché è particolarmente sentito. Una volta un layout veniva disegnato facendo ricorso alle tabelle. Adesso con i css tutto è diventato estremamente più potente ed abbiamo strumenti prima assolutamente impensabili. Peccato che con le tabelle tutto fosse anche assolutamente semplice. Oggi, volete due blocchi con la stessa altezza ed allineati orizzontalmente e sotto di essi altri due con le stesse caratteristiche? Benvenuti all’inferno.

Ci è stato insegnato che i <div> sono elementi che per default si posizionano verticalmente così come i <p>, <ul> ecc. e quindi se vogliamo un immagine affiancata ad un altro blocco possiamo, per esempio, utilizzare la proprietà float: per posizionare l’immagine.

Quindi pensiamo di posizionare nella pagina un’immagine afiancata dalla sua descrizione e in una riga successiva un’altra immagine anch’essa affiancata dalla propria descrizione.

Un form contatti per il nostro sito

Tra le cose che non possono mancare in un sito web, c’è sicuramente un form che consenta ai visitatori di conttattarci via email.
Certo è sempre possibile pubblicare un indirizzo email dove possiamo essere contattati, ma l’unico risultato certo in questo caso è quello di vedere la casella email intasata da messaggi spam.
Lo scopo è quindi quello di costruire un form che consenta al visitatore di inserire un messaggio, oltre ai suoi dati di contatto, che ci verrà recapitato, senza pubblicare il nostro indirizzo email e con una routine captcha per prevenire messaggi spam da robot.

Ancora una volta non è possibile fare questo con il solo ausilio dell’HTML, e quindi faremo ricorso a PHP, includendo altresì la libreria open-source Securimage per l’inserimento del codice di controllo ‘captcha’.

Il risultato che vogliamo ottenere è quello mostrato nell’immagine che segue (il link per il download di quanto serve lo trovate alla fine dell’articolo):

Continua a leggere…

Come creare una mappa interattiva delle regioni italiane


Se in un sito web vi capita di dover far selezionare una regione italiana, potete risolvere il problema in diversi modi. Il più immediato sarà quello di usare una <select> con venti <option> con i nomi delle regioni italiane, ma un altro metodo piuttosto usato è quello di presentare una cartina dell’Italia, di quelle che vengono definite cartine mute, cioè col solo contorno dell’Italia e delle singole regioni. Al passare del mouse su una regione questa si colorerà e naturalmente attiverà un link.
Anche per questa soluzione non c’è ovviamente un metodo unico per risolvere il problema. Ce ne sono di diversa difficoltà, diversa efficacia ed anche di diverso grado di compatibilità con i vari browsers.

Qua vogliamo fornire una soluzione che abbina semplicità alla estrema compatibilità e, a parer nostro, anche di discreto impatto visivo.
Qua sotto vedete subito quello che sarà il risultato finale.

Val d'Aosta Piemonte Lombardia Trentino Veneto Friuli Liguria Emilia Toscana Marche Umbria Lazio Abruzzo Molise Campania Puglia Basilicata Calabria Sicilia Sardegna

Continua a leggere…

Inserire le news di google automaticamente in un ticker

Google News
Riprendiamo l’argomento trattato recentemente su come popolare il nostro sito automaticamente delle news relative ad una parola chiave a nostra scelta, per vedere come si possano anche presentare queste news in un ticker rotante.
Innanzitutto diciamo chee per ticker rotante intendiamo una finestrella delle dimensioni che preferiamo, all’interno della quale faremo scorrere dal basso verso l’alto l’elenco delle news.

Per il nostro scopo avremo bisogno anche di includere nella nostra pagina la libreria jquery ed inoltre un altro breve javascript.
Continua a leggere…

Inserire le news di google automaticamente in un sito

Google News
Vogliamo oggi mostrare come si può inserire nel proprio sito una pagina che riporti sempre le news aggiornate automaticamente, prelevate da google news, ovviamente relativamente ad una parola chiave di vostro interesse.
In un prossimo articolo vedremo poi come si possono inserire in ticker rotante, in una angolo della vostra pagina.
Per far questo utilizzeremo php. Per chi non conoscesse php, diciamo subito che l’unica condizione sarà avere abilitato il php dal proprio servizio di hosting. Per il resto sarà sufficiente fare un copia e incolla di quanto mostriamo qui, con un minimo di personalizzazione per quanto riguarda la parola chiave da voi scelta e poco altro.

Il trucco (si fa per dire) starà nell’ottenere le news in formato xml per poterle leggere col php.
Continua a leggere…

Come incorporare un video YouTube sul vostro sito

Abbiamo già detto in altre occasioni come i contenuti multimediali, immagini e video, stiano sempre più assumendo importanza, non soltanto per rendere più gradevole, e quindi fruibile, un sito web, ma anche ai fini del miglioramento del posizionamento nei motori di ricerca.

Per inserire un video in una pagina web si può operare in modi differenti a seconda che il video sia sul server che vi ospita o no. Vogliamo qui mostrare come includere in una vostra pagina un video su YouTube. Niente di più semplice. Lo facciamo con esempio pratico.

Accedete a Youtube e trovate il video che volete riportare sul vostro sito. Sotto al video, a destra di ‘Mi piace’,  ci sono tre voci di menu. Cliccate su ‘Condividi‘. (Vedi figura).
Continua a leggere…

Uno script per calcolare il giorno della settimana

Uno dei problemi ricorrenti scrivendo siti web è la manipolazione delle date.

Oggi abbiam pensato di riportare uno script per il calcolo del giorno della settimana. Faremo un form per l’input della data scelta e lo script riporterà il giorno della settimana corrispondente.

Ovviamente i metodi per ottenere questo sono svariati a seconda del linguaggio scelto. Qui per il nostro esempio abbiamo scelto di risolvere il problemino con quanto ci mette a disposizione Javascript.

Il tutto è stato incluso in una pagina html autonoma che può essere scaricata qui.

Continua a leggere…