Tag: html

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.

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…

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…

Media Queries (Cosa sono e come si usano)

Abbiamo parlato recentemente nell’articolo intitolato “Il Responsive design” della tendenza ormai diventata necessità di tener conto del tipo di dispositivo che l’utente di un sito web utilizza.

L’esplosione dei dispositivi mobili come tablets e soprattutto smartphones impone al web designer di prevedere un layout fruibile da questi dispositivi e, come abbiamo visto, non solo il layout, ma anche i contenuti possono essere in qualche modo differenti (classico l’esempio di Microsoft che è alquanto inutile che proponga il download di service pack, patch e programmi vari per computers a chi si è collegato da uno smartphone).

In quell’articolo abbiamo fatto cenno alla metodologia che oggi permette agli sviluppatori di differenziare il modo di presentare il sito web a seconda del dispositivo usato dall’utente senza dover sviluppare più volte il sito in formati differenti, cosa che rendebbe complicatissimi aggiornamenti ed ordinaria amministrazione, oltre a non mettere al riparo dai progressi della tecnologia. La metodologia è quella basata sull’utilizzo di delle ‘media queries’ nei fogli di stile CSS.

In questo articolo vogliamo quindi affrontare in dettaglio cosa sono e come si usano le media queries.

Continua a leggere…

Pensare come uno “spider” per realizzare un sito web di successo

Per raggiungere un buon successo col vostro sito web c’è bisogno di qualcosa di più che la funzionalità e l’aspetto accattivante. Si tratta di un business complicato e i webmaster sono perennemente in lotta per cercare di ottenere i migliori posizionamenti nei motori di ricerca.
Il segreto sta nel “piacere” agli spiders dei motori di ricerca e quindi è necessario conoscere in dettaglio come funziona uno spider prima di costruire un sito.

• Gli spiders leggono il testo e non possono valutare immagini, colori o grafica. Così, una pagina dal design piacevole con poco o nessun contenuto riceverà una bassa valutazione. A meno che, si includa in formato testo l’eventuale contenuto delle immagini grafiche; inoltre fate incicizzare solamente le principali pagine di contenuto e non le pagine con solo grafica; infine è bene includere le descrizioni di tutte le immagini per mezzo del tag ‘alt‘ ed usare le parole chiavi che fanno riferimento a quelle immagini.
Continua a leggere…

Come scrivere il Tag Title delle pagine Web

Quando si deve affrontare l’ottimizzazione di un sito per i motori di ricerca, la frase più importante che si dovrà scrivere è il tag title della home page. Se si scrive correttamente allora avrete fatto un grande passo avanti verso l’obbiettivo di ottenere il vostro sito ben posizionato nelle query dei motori di ricerca per le parole chiave per voi più importanti. Prima di darvi una guida passo-passo su come scrivere i tag title, definiamo quello che effettivamente sono e vediamo perché sono importanti.
Quando guardate una pagina web nel browser, la scritta sopra i comandi del browser è ciò che è stato scritto nel tag title. Nel documento html il tag title è quello compreso tra i tags <title> e </ title> all’interno della <head>.

Il tag title è importante perché “dice” al motore di ricerca ciò di cui tratta la pagina, e, nel caso della vostra home page, descrive il contenuto dell’intero sito web. Fatevi la domanda: “Quale sarebbe il miglior titolo per il mio sito web?” E’ un po’ come sintetizzare in una frase l’attività di un’azienda per comunicare con poche parole l’essenza stessa della società e la sua attività.
Abbiamo sintetizzato in 5 passi i consigli per questa fondamentale attività:

Continua a leggere…