Ecco alcuni errori da evitare nella realizzazione di un sito dinamico

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 25/5/2010 alle 17:54

Nell’ultimo mese sono stato contattato da una adv agency che mi ha chiesto di realizzare un nuovo CMS per un sito dinamico (appartenente ad un loro cliente) e di apportare alcune modifiche anche alla parte client. Visualizzando i sorgenti del sito web ho avuto modo di constatare diversi errori di progettazione  e una moltitudine di scelte più o meno insensate dovute, probabilmente, alle scarse competenze di coloro che in passato hanno realizzato il sito in questione :D

Errore n°1: menu principale realizzato in Flash

Ebbene si, il primo errore è un errore SEO. Il menu principale e le photogallery dei prodotti sono state realizzate in Flash. Mentre per le photogallery la scelta di utilizzare Flash può essere condivisibile (anche se le soluzioni JS non mancano di certo, vedi qui e qui) il menu principale di un sito non va mai e poi mai realizzato in Flash. Bisogna realizzarlo in semplice HTML per permettere agli spider dei motori di ricerca di trovare le pagine del sito. Leggerezza confermata anche dall’assenza di una sitemap.

Errore n°2: layout tabellare

Il layout delle pagine web è stato realizzato con le tabelle senza rispettare gli standard web e senza tenere conto di una cosa importantissima come l’accessibilità. Errore gravissimo, nulla da aggiungere.

Errore n°3: pagine non dotate di url seo-friendly

Il dominio del sito in questione effettua un redirect ad un server dove è ospitato il sito. Tutte le pagine del sito, comprese quelle dei prodotti, non hanno url uniche. In pratica, tutte le pagine del sito rispondono all’indirizzo www.sitoinquestione.com. Nei motori di ricerca non sono indicizzate le pagine dei prodotti, altro errore SEO dunque (ogni prodotto doveva avere un indirizzo del tipo www.sitoinquestione.com/prodotto-xyz).

Errore n°4: il multilingua che ti farà impazzire :D

Questa è una vera e propria genialata. In pratica, il sito è multilingua (ita, eng, fra, esp) e per ogni photogallery (di ogni prodotto) sono stati realizzati 4 SWF del tipo:

- photogallery_prodotto_x_ita.swf
- photogallery_prodotto_x_eng.swf
- photogallery_prodotto_x_fra.swf
- photogallery_prodotto_x_esp.swf

e via così per le photogallery di tutti i prodotti. Era sufficiente realizzare un unico file SWF che caricava le informazioni dinamicamente: si inviavano all’SWF le variabili ID_prodotto e la lingua scelta e il gioco era fatto. Invece no, immaginate ora di fare una modifica, anche piccola, alla photogallery…risultato? Impazzire tra decine e decine di file FLA tutti uguali :(

Ho notato tanti altri piccoli errori ma credo di avervi fatto rabbrividire abbastanza :D Inoltre rischio di fare troppo la parte del Saputone e non mi sembra il caso ;)

Google Buzz
Pubblicato in Flash,HTML,News,Web 2.0,Web Design | 2 Commenti »

box di testo stilizzato con i CSS

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 19/1/2010 alle 16:33

textbox css

In ogni sito web non possono mai mancare paragrafi e blocchi di testo che è opportuno presentare con una grafica gradevole e ordinata. Tra le tante soluzioni oggi vediamo come stilizzare un box di testo servendoci di un immagine e dei CSS.

Nella nostra pagina web inseriamo i seguenti div ed incolliamo un paragrafo di testo, il classico lorem ipsum ;)

<div id=”textbox“>
<div id=”topimg“><h1>Text Box</h1></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

All’interno del div “textbox” inseriamo un ulteriore div, topimg, che avrà un immagine di sfondo (con un gradiente da grigio a bianco) e conterrà il titolo del blocco di testo.

L’immagine che abbiamo realizzato è di 400px per 50px, e la posizioniamo in top senza ripetizione. Inoltre, optiamo per ornare il blocco di testo con un bordo:

#textbox {
width:400px;
height:auto;
margin:0;
padding:1px;
border-color:#336699;
border-style:solid;
border-width:2px;
}

#topimg {
width:400px;
height:50px;
margin:0;
padding:0;
background-image:url(img.jpg);
background-position:top;
background-repeat:no-repeat;
}

Per il paragrafo, scegliamo semplicemente il tipo di font e l’allineamento giustificato:

p {
margin:0;
padding:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-align:justify;
}

Ecco come appare il blocco di testo. Potete anche scaricare i files per visionarli direttamente ;)

http://www.emawebdesign.com/wp-content/plugins/downloads-manager/img/icons/winzip.gif download: textbox CSS (1.54KB)
added: 19/01/2010
clicks: 153
description: Blocco di testo stilizzato con i CSS

Google Buzz
Pubblicato in CSS,Grafica,HTML,News,Web Design | Nessun commento »

Web Design: interfacce e layout da DeviantArt

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 16/11/2009 alle 15:12

1stwebdesigner.com ha selezionato 60 interfacce (o layout) dal noto sito DeviantArt. Potete visionare tutte le grafiche qui.

Ecco le mie preferite:

wp monk

1) WP Monk

2) Teacher Board III

3) AVG-HHblog

4) Osae

5) Financial webdesign

A te quale grafica è piaciuta?

Google Buzz
Pubblicato in Grafica,News,Risorse,Web Design | Nessun commento »

Ecco un semplice menu accordion con MooTools

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 4.00 out of 5)
Loading ... Loading ...

Pubblicato il 30/10/2009 alle 13:37

menu accordion

Oggi vi metto a disposizione un semplice menu accordion che ho realizzato utilizzando MooTools.

Oserei definire il menu estremamente “basilare”, sarà un gioco da ragazzi renderlo graficamente accattivante o anche cambiarne struttura semplicemente modificando il file CSS.

Per utilizzare il menu includete nella vostra pagina web i seguenti files:

<script type=”text/javascript” src=”mootools.js”></script>
<script type=”text/javascript” src=”accordion.js”></script>
<link rel=”stylesheet” href=”style.css” type=”text/css” />

Inserite i DIV:

<div id=”container_accordion”> il contenitore
<div id=”accordion”> il menu

e quindi le varie voci con i rispettivi contenuti (non dimenticate gli identificatori toggler ed element):

<h3 class=”toggler“>Voce 1</h3>
<div class=”element“>
<a href=”#”>Link 01</a><br />
<a href=”#”>Link 02</a><br />
<a href=”#”>Link 03</a>
</div>

Potete vedere il menu in azione qui.

Di seguito potete scaricare il pacchetto ZIP contenente tutti i files ;)

http://www.emawebdesign.com/wp-content/plugins/downloads-manager/img/icons/winzip.gif download: Menu Accordion (28.43KB)
added: 30/10/2009
clicks: 209
description: un semplice menu accordion realizzato con MooTools

Google Buzz
Pubblicato in CSS,HTML,JavaScript,MooTools,News,Programmazione,Risorse,Scripts,Web Design | Nessun commento »

Ecco 99 templates HTML/CSS di alta qualità

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 30/9/2009 alle 10:32

InstantShift ha raccolto 99 templates HTML/CSS di alta qualità. Alcuni sono davvero eccellenti e vale la pena dare un’occhiata.

templates html css

Tutti gli altri templates potete visionarli qui: 99 High-Quality Free (X)HTML/CSS Templates

Google Buzz
Pubblicato in CSS,Grafica,HTML,News,Risorse,Web Design | 1 Commento »

Ecco alcuni vantaggi di un layout “clean style”

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 28/7/2009 alle 11:42

Clean style

Sono un sostenitore dello stile “clean style” e voglio indicarti alcuni vantaggi di un layout minimale per un sito web. Erroneamente, alcuni, credono che un layout “clean” sia sinonimo di pagina bianca o di grafica elementare.

In realtà, i siti più “attraenti”, che si presentano in modo professionale, sono quelli che hanno un layout minimale ben curato e, ovviamente, realizzato da un bravo web designer. Un layout “clean style”, realizzato da un bravo designer (lo ripeto in quanto è importante), trasmette immediatamente professionalità ed eleganza ed è piacevole da navigare.

Ci sono dei vantaggi, altro aspetto importante. Niente fronzoli che rischiano di appesantire le pagine, i tempi di caricamento sono importantissimi. I contenuti sono chiaramente in evidenza e il lettore non è infastidito (o distratto) nella lettura. L’utente riesce a navigare il sito senza alcuna difficoltà, spesso, grafiche molto elaborate (per non dire altro ;) ) disorientano l’utente che, non sapendo che fare, abbandona il sito in questione.

Voi cosa pensate della grafica “clean style”? Qual’è lo stile che preferite?

Avete layout clean style da suggerire? Uno dei miei preferiti è il layout di ClearSpring.

Google Buzz
Pubblicato in Grafica,News,Web Design | Nessun commento »

I migliori post della settimana #34

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 26/7/2009 alle 21:05

Best Post

Di seguito i posts più interessanti di questa settimana:

1) HTML e CSS Tutorial: Opacità Degli Elementi

2) 10 idee per avviare un Business on line!

3) Acquisizione clienti Online in 4 Mosse!

4) Creare un sito: design e font

5) Blog design: Scopri queste 40 ispirazioni eccellenti

Google Buzz
Pubblicato in Business online,CSS,HTML,Migliori post della settimana,Web Design | Nessun commento »

I migliori post della settimana #30

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 28/6/2009 alle 09:54

Best Post

Di seguito i posts più interessanti di questa settimana:

01) Nuove procedure per la registrazione di domini .it

02) 6 fantastici trucchi per Facebook!

03) Alcuni Buoni Consigli per Progettare un Buon Layout

04) Come creare un widget in WordPress 2.8?

05) Protocollo Https: cos’è e perchè usarlo

06) Futurebox: Lightbox Senza Javascript!

07) Tutorial Flash AS3: Caricare un filmato SWF Esterno

08) Super simple way to work with Twitter API (PHP + CSS)

09) Cosa Ho Imparato nel Disegnare il Mio Background per Twitter

10) Creare una pagina di lavori in corso (sito in manutenzione) in WordPress

Google Buzz
Pubblicato in ActionScript,CSS,Domini & Hosting,Flash,Migliori post della settimana,PHP,Programmazione,Risorse,Scripts,Social Network,Web 2.0,Web Design,Wordpress | Nessun commento »

125 logo design basati su testo

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 20/6/2009 alle 09:34

InstantShift ci propone una raccolta di 125 loghi basati su testo, una raccolta molto ricca e interessante utilissima come fonte d’ispirazione per logo design.

125 logo design basato su testo

Puoi visionare l’intera raccolta qui: 125 Creative Text Based Logo Designs For Design Inspiration

Google Buzz
Pubblicato in Fonts,Foto e immagini,Grafica,News,Risorse,Web Design | Nessun commento »

Nuovo layout per EmaWebDesign

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 18/6/2009 alle 18:50

logo emawebdesign

Quello che vedi qui sopra è il mio nuovo logo associato al nuovo layout del blog che finalmente ho terminato. A causa dei tanti impegni, dei progetti, dei lavori e delle collaborazioni portate avanti negli ultimi tempi, non ho potuto dedicare molto tempo alla lavorazione del nuovo layout ma ho comunque “racimolato” quel pò che bastava per potergli dar vita in tempi comunque brevi.

Per questo nuovo layout mi sono basato su idee ben precise:

1) Grafica clean style che conferisce un aspetto professionale
2) Niente fronzoli per quanto riguarda la grafica, massima priorità per i contenuti
3) Inserimento di uno spazio per segnalare l’ultimo video interessante scovato in rete
4) Inserimento di una sezione di newsmastering

Nel passaggio dal vecchio al nuovo layout ho cercato di ottimizzare gli aspetti più importanti come la velocità di caricamento delle singole pagine e mantenere la stessa disposizione delle varie sezioni, migliorandole dal punto di vista grafico e della user-experience.

Il nuovo layout parte in versione beta, se trovate qualche problema segnalatemelo utilizzando il modulo dei contatti.

Ora sono curioso di sapere cosa ne pensi, ti piace il nuovo layout? Sotto un immagine del vecchio per un rapido confronto.

emawebdesign versione 1.0

Google Buzz
Pubblicato in Blog,CSS,Grafica,HTML,News,Web 2.0,Web Design,Wordpress | 7 Commenti »

Categorie







Ultimi commenti

  • EmaWebDesign: @Joel sono d’accordo con te ;) @Giovanni si Giov, CKeditor merita più di un’occhiata :)
  • Giovanni: Io ormai ho adottato TinyMCE ma con questo post mi hai invogliato a riprovare FCK – pardon –...
  • Joel: Hola ;-) qualche mesetto fa ho avuto la necessità di inserire un editor in un mio progetto. Penso di averne...
  • EmaWebDesign: TinyMCE è sicuramente uno degli editor Wysiwyg più amati, soprattutto da chi utilizza Wordpress ;)
  • luca: Ciao, Io ho utilizzato per molto tempo fckeditor ma per alcune cose era molto limitato e quindi un volta ho...
  • EmaWebDesign: @Rudy sarebbe il caso di capire come il the best possa stare dentro al the best…cioè, mica può...
  • Giovanni: Mitico Rudy, sei troppo meta-blogger! Ema, io ho l’impressione che quando uno metta uno specchietto...
  • Rudy Bandiera: Io preferisco questo, questo è il mio articolo preferito, ma così si genera un paradosso ovvero il the...
  • EmaWebDesign: Ciao Marco, essì, la Web Analytics è una delle cose più interessanti in assoluto. A presto ;)
  • Marco: Ottimo :) articolo interessante :D