Blog di Delta Marketing su siti internet e comunicazione
Posts tagged HTML
MooTools per aggiungere interattività con Ajax
Nov 20th
MooTools è un framework di sviluppo basato si Javascript e quindi Object oriented che permetterà di aumentare le funzionalità e soprattutto l’interattività delle pagine internet.
Abbiamo iniziato a saggiare tale tecnologia e ad implementarla all’interno di due nostri siti. Sull’homepage di www.laplayalagodimonate.it è stata implemtentata una galleria fotografica che fa scorrere automaticamente e interfalli predefiniti alcune fotografie senza sover utilizzare Flash, l’altro esempio, molto più interessante lo potete vedere all’interno del sito www.deltamarket.com nella pagina di richiesta preventivo, visibile da questo link. In questo caso MooTools è utilizzato per effettuare un controllo sui dati inseriti all’interno del form di richiesta informazioni e permette il controllo dei dati inseriti e la visualizzazione di messaggi ad essi legati, richiedendo ad esempio la compilazione del campo e-mail con un indirizzo valido.
L’implementazione di MooTools all’interno di siti, partendo da codice disponibile in rete pare molto semplice e permette di raggiungere un buon grado di personalizzazione delle funzionalità. Nei prossimi post cercherò di inserire altri esempi che andremo sicuramente ad utilizzare al fine di meglio comprendere ed imparare l’utilizzo di Mootools. Nel frattempo qui potrete trovare alcuni esempi tra i quali abbiamo pescato il codice utilizzato nelle nostre pagine sopra riportate.
http://speckyboy.com/2008/04/09/41-of-the-best-mootools-ajax-example-downloads/
Quadratini al posto di caratteri accentati
Nov 20th
E’ capitato recentemente e ci ho sbattuto un pò la testa, i caratteri accentati, correttamente presenti all’interno del database, venivano sostituiti nella fase di visualizzazione della pagina che li leggeva con dei quadratini!!!
Paura!! Che dare? Ho cercato un pò in rete ed ecco trovata la soluzione: è bastato inserire nella parte HEAD della pagina la definizione corretta “charset=iso-8859-1″ al posto di “charset=UTF-8″.
In particolare questa istruzione fornisce al browser il set di caratteri da utilizzare per interpretare i contenuti della pagina, Infatti il charset utilizzato per la corretta formattazione di documenti in italiano è ISO-8859-1 (Latin 1) che rappresenta il set di caratteri tipico dell’europa occidentale, tale charset contiene le lettere dell’alfabeto, i numeri, la punteggiatura e vari simboli tipici della nostra lingua e delle altre lingue dell’europa occidentale.
Se volete approfondire l’argomento
Scrivere il pedice e l’apice
Nov 20th
La necessità di scrivere una semplice formula matematica comprendente esponenti numerici o chimica pedici rappresenta spesso un problema per gli sviluppatori web, che aggirano il problema tramite l’uso di immagini rappresentanti l’intera formula, ottenendo di conseguenza ottenendo risultati di scarsa qualità difficilmente leggibili, ingrandibili o copiabili.
HTML ci mette a disposizione gli elementi sub e sup che racchiudono rispettivamente il pedice e l’apice.
potremo così scrivere: E = mc2 oppure H2O rispettivamente come E = mc<sup>2</sup> e H<sub>2</sub>O
Formattazione dei testi tramite interfacce web
Nov 20th
Grazie all’utilizzo di FCKEditor e all’integrazione dello stesso con le nostre interfacce web siamo ora in grado di offrire interfacce di aggiornamento on-line particolarmente intuitive e che permettono l’inserimento di testi formattati senza dover utilizzare codice HTML per impostare; colori e dimensioni dei testi, elenchi puntati, link, ecc.
Il nuovo sistema, tramite un semplice menù di controllo identico a quello utilizzato da Word, permette la gestione della formattazione rendendoti libero di personalizzare con semplicità i tuoi contenuti.
Differenze tra i tag div e span
Nov 20th
Quali sono le differenze tra i tag e
e è buona abitudine utilizzare regolarmente queti tag nell’HTML?
I tag div e span sono stati recentemente aggiunti all’HTML e sono molto utili per la formattazione delle pagine utilizzando i CSS. Spesso vengono utilizzati allo stesso modo ma hanno scopi differenti.
Il tag div definisce a divisione o una sezione di un documento. Questo tag offre inoltre la possibilità di definire lo stile di intere sezioni di un documento HTML. Per esempio, potete definire una sezione di una vostra pagina e dare a quella sezione uno stile differente rispetto ai testi circostanti.
Il tag div vi offre inoltre la possibilità di nominare intere sezioni di un docmento in modo da poterlo formattare con un CSS.
Se state costruento pagine web, è una buona idea prendere l’abitudine di usare il tag div in modo da poter utilizzare gli attributi ‘id’ e ‘name’ per nominare le varie sezioni in modo da avere pagine web ben formate.
Il tag
span ha proprietà molto simili poichè influenza lo stile del testo in esso contenuto, ma sebbene gli elementi contenuti nel tag possono essere allineati, o formattati con scpecifici attributi di stile, non potete creare sezioni separate nel documento come è possibile fare con il tag div.
span ha proprietà molto simili poichè influenza lo stile del testo in esso contenuto, ma sebbene gli elementi contenuti nel tag possono essere allineati, o formattati con scpecifici attributi di stile, non potete creare sezioni separate nel documento come è possibile fare con il tag div.
Il tag div agisce come un separatore di paragrafo, poichè definisce una divizione logica nel documento. Il tag span semplicemente comunica al browser di applicare uno stile a regole a un determinato elemento.
Il title delle pagine e il posizionamento
Nov 20th
Tra tutti i tag HTML, il Tag <TITLE> è senza dubbio il più importante. Per il Motore di Ricerca, il Tag <TITLE> rappresenta il titolo che avete scelto di dare alla vostra pagina web. È importante che esso offra una breve descrizione, attraverso l’uso di parole chiave ben selezionate, dei contenuti che l’utente troverà all’ interno della pagina. PEr questo motivo il Tag <TITLE> ha un ruolo fondamentale nel processo di posizionamento del sito e per questa ragione, deve piacere al Motore di Ricerca.
Un Tag <TITLE> scritto interamente con un carattere maiuscolo sarà, con buona probabilità, ignorato dall’utente.
È utile utilizzare il titolo del sito o il proprio brand in ogni title tag: potete inserirlo all’ inizio del title o alla fine, dopo le parole chiave che identificano la singola pagina. In questo modo, renderete più immediato il processo di memorizzazione del brand da parte dell’ utente e lo invoglierete a ritornare sul sito.
Sappiamo bene che gli utenti della rete utilizzano chiavi di ricerca differenti, anche quando sono alla ricerca della stessa informazione. È utile tenerlo presente quando si costruisce il Title Tag della pagina: usare più parole chiave che si combinano tra di loro è il modo più efficace per posizionarsi in testa ai risultati dei motori di ricerca per un numero elevato di query.
La scelta delle keywords da inserire all’ interno del Title Tag deve tener conto anche dell’ ordine di apparizione delle keywords: la prima keyword del title è la più importante, dunque bisogna sceglierla con cura.
Anche l’ ordine delle singole parole che formano la keyword è importante.
Provate a cercare su Google “hotel Rimini” e “Rimini hotel”: queste due keywords, se pure speculari, producono pagine differenti di risultati.
Per evitare di incorrere nella duplicazione dei contenuti, penalizzata dai Motori di Ricerca, è utile dotare ogni pagina del sito di un Tag <TITLE> e di una descrizione rispondenti al contenuto della pagina stessa.
Quando si procede alla creazione di un Tag <TITLE> e della sua relativa description, bisogna ricordarsi di rispondere ad alcuni importanti requisiti:
- offrire soluzioni a problemi
- garantire rapidità di risoluzione dei problemi
- richiedere costi contenuti
- offrire all’utente accattivanti ragioni d’interesse
Scelta del font per il sito
Nov 20th
Ritengo sia di fondamentale importanza per un’azienda la scelta del carattere da utilizzare per il proprio sito, in quanto questo è uno dei più importanti strumenti tramite i quali comunicare con il proprio target un’ identità definita e coerente.
Aggirati i problemi tecnici di compatibilità dell’uso dei vari font su sistemi differenti, ritengo che garantire la massima leggibilità a video ed in stampa sia l’obbiettivo principale da perseguire; ma questa semplice regola non è sempre realizzazione in quanto spesso si deve rimanere legati ad un’immagine aziendale fortemente definita e quindi bisognerà decidere di usare un font differente da quello istituzionale oppure correggere l’immagine aziendale in moto tale da poter utilizzare un font che possa essere facilmente utilizzato
anche a video.
Come tutti ben sapete per facilitare la lettura a video si tende a utilizzare i caratteri a “bastoni” quali ad esempio l’Arial, il Verdana e il Tahoma per i titoli ed i brevi testi mentre molti preferiscono l’uso di caratteri con le “grazie” (quelle appendici presenti cui caratteri tipo Times New Roman) per i paragrafi di testo più lunghi in quanto la loro forma tondeggiante permette una lettura più agevole. Premesso che non sono di questa idea e che personalmente non utilizzo nei miei progetti i caratteri di quest’ultimo tipo, ritengo che la scelta del font debba essere di volta in volta valiata sulla base del messaggio che si intende veicolare e sulla base delle caratteristiche del testo che si desidera pubblicare. In questo caso ci vengono incontro altri strumenti che possiamo utilizzare per “personalizzare” un carattere e quindi il suo apsetto.
Lavoro spesso sulla distanza tra i singoli caratteri ed ancora di più sull’interlina, due elementi che se correttamente utilizzati aiutano il visitatore a leggere il testo più agevolmente, inoltre una larghezza contanuta dei paragrafi incrementa ulteriormente la leggibilità aiutando l’occhio a ritrovare l’inizio della riga successica a quella letta.
Infine ritengo che una pagina fitta e piena di caratteri stanchi, alleggerirla aumentando il numero dei paragrafi ed inserendo grassetti, colori, corsivi, titolini ecc.., possa rendere la lettura più appetibile…
Utilizzare le Doorway pages
Nov 20th
Le Doorway Page sono delle pagine HTML dotate di contenuto ottimizzato in modo specifico verso uno o più motori di ricerca che, automaticamente o no, rimandano all’home page del sito che si intende promuovere.Il fine delle doorway page è quello di raggiungere il massimo posizionamento negli indici dei motori su determinate chiavi di ricerca ed avere così maggiori possibilità di visita per il sito cui sono collegate.
Sono anche conosciute come come door pages , jump pages , gateway pages , entry pages e con altri nomi, sono pagine integrative di supporto al posizionamento ottimale del sito. Gli utenti, in genere, accedono a tali pagine dalle ricerche effettuate sui motori e non da link presenti sul sito.
I motivi per cui si usano le doorway sono tantissimi, ad esempio si usano le doorway page si intende promuovere un sito con una grafica che non permette l’ottimizzazione a livello di codice.
Queste pagine si usano anche per inserire link ad altre pagine e ad altri siti aumentandone la popolarità. L’uso corretto di questa tecnica può portare ad ottimi risultati.
Le doorway pages generalmente non sono considerate spam dai motori di ricerca quando vengono utilizzate correttamente dando informazioni utili, contenuti informativi validi ed elementi grafici contestuali a quelli del sito. Tuttavia c’è una crescente tendenza nel considerarle con un pò di scetticismo, poiché alcuni utilizzano le doorway non per offrire contenuti interessanti per i visitatori, ma solo parole chiave e collegamenti ipertestuali studiati per aumentare in modo artificioso la rilevanza della pagina agli occhi dei motori di ricerca.
Le landing pages
Nov 20th
Come dice la parola “landing page” significa pagine di atterraggio, ossia sono quelle pagine alle quali vogliamo arrivi l’utente. Le landing page sono studiate per presentare un “prodotto” o un “servizio” e devono “spingere” l’utente a compiere un’azione.
Tutti i siti hanno bisogno di landing page, le landing page potrebbero essere realizzate per spingere un utente a richiedere un preventivo, effettuare un ordine, iscriversi ad una newsletter, ecc. Sono quindi le pagine del nostro sito verso le quali dobbiamo guidare i nostri visitatori.
Le landing page possono anche essere utilizzate come punto di arrivo di un utente sul nostro sito. Immaginiamo di effettuare una campagna pubblicitaria, sia essa cartacea, sotto forma di newsletter o altro, potremmo creare una pagina dedicata all’evento, prodotto o servizio pubblicizzato e fornire all’utente il link diretto a tale risorsa. Avremo così una landing page a tema con quanto pubblicizzato e direttamente raggiungibile dal web. Monitorando gli accessi alla stessa avremo anche modo di verificare l’effettivo ritorno del nostro investimento pubblicitario.
E’ inoltre fondamentale che la landing page sia ben strutturata e quindi se dovessimo costruire una landing page per far iscrivere utenti alla newsletter, dovremmo creare una pagina apposita che spieghi che informazioni riceverà
l’utente, come iscriversi, come cancellarsi, informazioni sulla privacy, indicare che il servizio è gratuito, mettere in evidenza l’inesistenza di spam, una demo on-line ecc.
