Articoli su ‘css’

9 dicembre 2009 - Tags: , , , , ,

La home page del nuovo sito di Gioielleri Parravicini

La home page del nuovo sito di Gioielleria Parravicini

Venerdì 4 Dicembre abbiamo pubblicato la nuova versione del sito di e-commerce di Gioielleria Parravicini, realizzato con Joomla e VirtueMart.

Il sito ha subito un profondo restyling, basato su uno schema fornito da Marco Parravicini, titolare dell’azienda, e sviluppato graficamente da GiBiLogic. Il risultato è carino, non vi pare? Cliccate sulla foto per ingrandirla.

Uno degli obiettivi principali era “accorciare” la pagina, e fare in modo che l’utente non dovesse scorrere la pagina per visualizzare tutte le informazioni necessarie. A tal proposito è stato compattato l’header, sfruttando lo spazio in alto per un menù “di servizio”; è stato rimpicciolito il menù principale; e sono stati tolti vari gadget grafici che lasciavano poco spazio al contenuto.

E’ stata inoltre posta particolare cura nello “snellire” la pagina togliendo tutti i JavaScript e CSS non necessari, in modo da avere un caricamento più rapido e un HTML più leggero.

Infine, è stato ottimizzato il contenuto, mettendolo prima delle sidebar tramite la tecnica CSS dei margini negativi (in pratica, il testo principale viene spostato verso destra di un tot di pixel in modo da lasciare spazio per gli elementi float che verranno dopo). Se provate a guardare la pagina senza CSS noterete che le due liste laterali di navigazione (“Scegli tra i marchi” e “Scegli tra le categorie”) vengono dopo il contenuto principale.

La pagina di dettaglio di un prodotto

La pagina di dettaglio di un prodotto

Abbiamo dovuto fare qualche salto mortale con sh404SEF e il file .htaccess per ridurre al minimo i danni di posizionamento dovuti al fatto che la struttura di navigazione dei contenuti è stata leggermente modificata.

A questo proposito, un consiglio: sh404SEF già contiene una serie di opzioni per come creare l’URL per VirtueMart, e se voleste cambiare qualcosa (ad esempio personalizzare il title) il file da modificare è solo uno e abbastanza semplice:

/components/com_sh404sef/sef_ext/com_virtuemart.php

Per cui fate tutte le prove necessarie finchè l’URL che vi piace di più non viene generato automaticamente. Gestirlo manualmente, infatti, è un lavoro piuttosto lungo e portatore di errori.

E infine, una volta realizzata la struttura di navigazione che vi piace, cercate di non cambiarla più: altrimenti hai voglia di lavorare di redirect 301, qualcosina andrà perso comunque. Poi, chiaro, se la struttura va proprio modificata e siete disposti ad avere un piccolo calo nell’indicizzazione, fate pure. La mia esperienza mi insegna che i siti ben posizionati recuperano in fretta le posizioni di vertice anche dopo profonde sistemazioni (è lampante il caso del sito di Hobbydonna, che abbiamo rifatto da zero in Joomla senza nessun tipo di redirect, e dopo pochi giorni già le nuove pagine cominciavano a comparire in alto nei risultati di ricerca).

Un ringraziamento a tutto il gruppo, ma in particolare a Marco,che come committente è molto ambizioso ma sempre rispettoso del lavoro altrui; e a Fabio, che con la sua continua analisi ci ha forzato a dare il meglio e ad approfondire concetti e funzionalità nuove. Lavori come questi ci permettono di migliorarci ancora, e questo è davvero un bel regalo di Natale. Per regali più tradizionali, quali gioielli e orologi, andate a vedere sul sito! ;-)

Grazie a tutto il gruppo, ma in particolare a Marco che è un committente pieno di entusiasmo e a Fabio che mi ha fatto imparare un sacco di cose.

16 novembre 2009 - Tags: , , ,

gibilogQuelli tra voi che ci leggono abitualmente avranno notato che abbiamo cambiato da qualche giorno il layout del nostro blog. Che ne pensate?

In questo articolo vi raccontiamo le motivazioni di questa scelta e i dettagli tecnici dell’esecuzione.

(continua…)

30 settembre 2009 - Tags: ,

Un grosso problema per un web designer alle prese con la realizzazione grafica di un sito è quello di scegliere un font piacevole, che corrisponda al carattere del sito, ma soprattutto che sia incluso nella maggior parte – o ancora meglio nella totalità – dei browser e sistemi operativi. E’ inutile scegliere un bellissimo ed elaborato font per i nostri titoli, solo per scoprire che su Ubuntu viene visualizzato come un semplicissimo Times New Roman (o qualcosa di simile) perchè quel tal carattere non è installato.

In tal caso non ci resta altro che suggerire a ciascun utente di scaricarsi il font, così poi vedrà il nostro sito correttamente. :-)

Ok, non è proprio così, ma la strada è quella giusta. E’ un concetto simile quello alla base dei web fonts, che introduciamo nel resto dell’articolo.

(continua…)

25 settembre 2009 - Tags: , ,

Esistono diversi modi di definire i colori nei nostri fogli di stile. Vediamo rapidamente i principali, e cosa è meglio fare secondo GiBiLogic.

(continua…)

19 giugno 2009 - Tags: , ,

Su specifica richiesta di un nostro studente, stiamo organizzando un corso aggiuntivo XHTML / CSS a Luglio 2009. Stiamo quindi raccogliendo iscrizioni aggiuntive, il numero minimo è di tre persone. Le date in questo caso potranno essere concordate tra i partecipanti.

Vista la caratteristica “last-minute” di questa edizione del corso, applicheremo uno sconto del 20% al prezzo di listino, quindi il costo finale è di € 144,00 IVA compresa.

Vi ricordo che il numero massimo di partecipanti è di 6, e il primo posto è già assegnato. Fatevi sentire!

23 marzo 2009 - Tags: , , , , , , ,

Si è concluso questa settimana il corso di realizzazione pagine web con XHTML e CSS, mentre si sono  chiuse le iscrizioni per il prossimo corso di gestione siti web con Joomla del 10 Aprile 2009, per raggiunto limite di posti.

Quest’ultimo corso in particolare è una novità: a differenza del nostro corso Joomla tradizionale, dedicato a esplorare tutti le componenti tecniche del sito fin dall’installazione – e quindi rivolto prevalentemente a professionisti che vogliano realizzare siti web con il nostro CMS preferito – questo corso si rivolge in particolare a chi il sito lo deve solo gestire.

Verranno quindi saltate le questioni prettamente tecniche, e le personalizzazioni grafiche o funzionali: ci si concentrerà invece sulla parte relativa alla gestione dei contenuti, in particolare relativamente all’inserimento di immagini e alla formattazione dei testi, nonchè alla gestione dei menu, per costruire la navigazione del sito. Ci è sembrato giusto separare i due corsi per le diverse esigenze legate alle due diverse figure professionali.

Nuove edizioni di entrambi i corsi Joomla (quello per “sviluppatori” e quello per “gestori”) verranno probabilmente messe a calendario tra Maggio e Giugno, prima della pausa estiva.

Vi ricordo inoltre tutti gli altri prossimi corsi in arrivo:

Potete comunque sempre trovare il calendario e tutti i dettagli alla pagina http://www.gibilogic.com/corsi, dalla quale potete anche iscrivervi online. Per qualunque altra informazione, contattateci via e-mail all’indirizzo info@gibilogic.com.

1 dicembre 2008 - Tags: , , , ,

Aggiornamento sulla situazione dei corsi.

  • si è concluso il corso di Joomla del 22 e 29 Novembre 2008 (con l’esordio degli appunti ufficiali GiBiLogic*)
  • sono esauriti i posti per il corso di Joomla del 5 e 12 Dicembre 2008
  • sono esauriti i posti per il corso di Introduzione alla Web Analytics del 16 Gennaio 2009

Il prossimo corso ancora aperto è quindi il corso di realizzazione pagine web con XHTML e CSS, per il quale ci sono ancora tre posti disponibili. Per informazioni, come sempre scrivete a info@gibilogic.com.

* gli appunti ufficiali GiBiLogic nascono perchè sono stufo che le persone debbano perdere un sacco di tempo a scriversi gli appunti, invece di guardare me e il monitor. Per cui li ho scritti io e li fornisco io. Compresi nel corso.

14 novembre 2008 - Tags: ,

Il problema che voglio affrontare in questo articolo è l’errata gestione delle PNG trasparenti su Internet Explorer 6. Su questo browser. infatti, le aree trasparenti nelle immagini PNG vengono rese con un colore grigio che impedisce la visualizzazione di quello che sta sotto l’immagine, ad esempio un altro elemento o lo sfondo.

(continua…)