Caputo's blog

Informatica, tecnologia, programmazione, fai da te, papercraft e papertoy

Corso gratuito css

Marzo 29th, 2009 by Giovanni Caputo

Voleveo sengalare un semplice corso gratuito CSS.

CSS Chapters:

  1. Chapter 1 – Introduction to CSS
  2. Chapter 2 – CSS Syntax
  3. Chapter 3 – CSS Classes
  4. Chapter 4 – CSS IDs
  5. Chapter 5 – CSS Divisions
  6. Chapter 6 – CSS Spans
  7. Chapter 7 – CSS Margins
  8. Chapter 8 – CSS Padding
  9. Chapter 9 – CSS Text
  10. Chapter 10 – CSS Fonts
  11. Chapter 11 – CSS Anchors, links and pseudo classes
  12. Chapter 12 – CSS Backgrounds
  13. Chapter 13 – CSS Borders
  14. Chapter 14 – CSS Lists
  15. Chapter 15 – CSS Width and Height
  16. Chapter 16 – CSS Classification
  17. Chapter 17 – CSS Position
  18. Chapter 18 – CSS Pseudo Elements


Stampare direttamente i 18 capitoli (o download PDF)

Category: Siti Web, Tecnologia | No Comments »

Realizzare image Map con i Css (Possibile utilizzo per un sistema di tagging)

Marzo 28th, 2009 by Giovanni Caputo

Di seguito link ad una serie di tutorial che spiegano come realizzare delle image Map.  Questo permette di avere sezioni di una immagine che visualizzano tooltip oppure che linkano ad altre informazioni. Questi tutorial possono esere utili se volete creare un sistema di tagging delle immagini per il vostro sito web.

CSS Image Maps, Redux (Tutorial)

Exploring Pure CSS Image Map technique s

Tutorial URL : CSS Image Maps, Redux.

CSS Image Maps With Pop-Up Tool Tips (Tutorial)

Exploring Pure CSS Image Map technique s

Tutorial URL : CSS Image Maps With Pop-Up Tool Tips.

How do I… Use CSS to create an image map on my Web site? (Tutorial)

Exploring Pure CSS Image Map technique s

Tutorial URL : How do I… Use CSS to create an image map on my Web site?.

Creating an Image Map using CSS only (Tutorial)

Exploring Pure CSS Image Map technique s

Tutorial URL : Creating an Image Map using CSS only.

Night of the Image Map (Tutorial)

Exploring Pure CSS Image Map technique s

Tutorial URL : Night of the Image Map.

CSS Image Rollover Map (Tutorial)

Exploring Pure CSS Image Map technique s

Tutorial URL : CSS Image Rollover Map.

Experiment with CSS Image Rollover Map (Technique )

Exploring Pure CSS Image Map technique s

URL : Experiment with CSS Image Rollover Map.

Experiment with CSS Image Rollover Map (Technique )

Exploring Pure CSS Image Map technique s

URL : Experiment with CSS Image Rollover Map.

Return of the Image Maps (Technique )

Exploring Pure CSS Image Map technique s

URL : Return of the Image Maps.

A Scrolling Image Map (technique )

Exploring Pure CSS Image Map technique s

URL : A Scrolling Image Map.

Read the rest of this entry »

Category: Senza categoria | 1 Comment »

Aggiungere variabili in file CSS

Marzo 19th, 2009 by Giovanni Caputo

La tecnica per fare questo è molto semplice, basta chiedere ad Apache di effettuare il redirect dei fogli di stile in modo da eseguire uno specifico script PHP. Qeusto script non fa altro che leggere linea per linea e sostutuire le varie varibili definite dall’utente.

Vediamo i vari passaggi.

Prima cosa creamo una struttura di progetto semplice e aggiungiamo il file index.html nella directory radice del progetto.

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
  5. <title>Variables in CSS Files… It’s possible!</title>
  6. <link href=“css/styles.css” rel=“stylesheet” type=“text/css” />
  7. </head>
  8. <body>
  9. <h1>Variables in Stylesheets</h1>
  10. <p>It’s possible!</p>
  11. <p>With PHP and Apache URL Rewrite Mod</p>
  12. </body>
  13. </html>

Ora creare un file CSS con le variabili e inserirlo in una cartella di nome css.

  1. $font: arial, sans-serif;
  2. $main-color: #3D7169; $secondary-color: #000;
  3. h1 {
  4. font: 200% $font;
  5. color: $main-color;
  6. }
  7. p {
  8. background: $secondary-color;
  9. color: $main-color;
  10. font-family: $font;
  11. padding: 10px;
  12. }

Infine creare un file PHP vuoto di nome enhanced_css.php e un file vuoto .htaccess. Questo file sovrascrive le configuarzioni di default del server e viene applicata nella direcotory attuale e nelle sue sottodirectory.

A questo punto il progetto dovrebbe esere avere la seguente struttura:

Potete continuare leggendo l’articolo originale in inglese al seguente link.

LINK

Category: Programmazione, Siti Web, Tecnologia | 2 Comments »

Problemi ridimensionamento immagini del browser

Marzo 17th, 2009 by Giovanni Caputo

Se si utilizzano i tag width oppure height per ridimensionare un’immagine tramite html, si possono ottenere orribili risultati con IE.

In generale far ridimensionare immagini al browser non è consigliato. Se si vuole comunque rimediare a questo problema si puù utilizzare il seguente codice:

<img src="image.jpg" alt="Immagine di grandi dimensioni 500x500" class="thumb" width="50" height="50" />

e applicando come proprietà 

img.thumb { -ms-interpolation-mode: bicubic; }


Category: Siti Web, Tecnologia, tutorial | No Comments »

Realizzare tracking di click di una pagina web per ottenere una Clickmap

Marzo 16th, 2009 by Giovanni Caputo

Volevo segnalare una utile guida per chi vuole studiare quali zone del proprio sito vengono più cliccate.  Quindi può essere utile un immagine simile a quella seguente, chiamata ClickMap.

View Demo Download Files

Il tutto vine realizzato con codice PHP and jQuery.

Tutorial

Category: Programmazione, Siti Web | No Comments »

Tag html poco conosciuti

Febbraio 26th, 2009 by Giovanni Caputo

Il primo sconosciuto è <abbr> o <acronym>:

questo tag sostanzialmente descrive una breve abbreviazione o acronimo, al fermarsi del mouse su una particolare scritta, uscirà un tooltips che indicherà questa abbreviazione; vediamo un esempio pratico:

<abbr title=”Very Important People”>V.I.P.</abbr>

e questo è il risultato: V.I.P.

Il secondo tag è <wbr>:

questo tag è uno tra i più sconosciuti ed oscuri esistenti, teoricamente dovrebbe inserire una linea vuota (wrap) all’interno di un paragrafo o una frase, ma solo se secondo il browser tale linea potrebbe essere utile; ergo se non lo ritiene opportuno non succede nulla, vediamo il codice:

testo<wbr/>testo<wbr/>testo<wbr/>testo<wbr/>testo<wbr/>

Purtroppo questo tag al momento è solamente supportato da Internet Explorer e Firefox.

Il terzo tag è <fieldset><legend>:

in pratica questi tag disegnano un box attorno agli elementi ricompresi, con una etichetta indicata dal tag <legend>, molto utile quando si vuole racchiudere vari elementi nello stesso spot:


<fieldset>
<legend>Form dati</legend>
Nome: <input type=”text” size=”30″ /><br />
Email: <input type=”text” size=”30″ /><br />
</fieldset>

Il risultato prodotto è il seguente:

Form dati

Nome: 
Email: 

L’ultimo tag è il simpaticissimo <bdo>:

totalmente inutile dal punto di vista stilistico e semantico, ma forse utile nel campo della sicurezza e delle password, serve sostanzialmente a “rovesciare” una frase racchiusa tra questo tag, utilizzando il valore rtl (right to left)

<bdo dir=”rtl”>Continuate a seguirci lettori di 3sulBlog!</bdo>

ed il risultato che ne viene fuori è il seguente:

Continuate a seguirci lettori di 3sulBlog!

Read the rest of this entry »

Category: Siti Web, Tecnologia | No Comments »

Mozilla presenta Bespin editor web based

Febbraio 16th, 2009 by Giovanni Caputo

webkit-editor-medium

Mozilla Labs ha presentato Bespin un code editor web based di grande facilità d’uso, che ha come scopo quello di migliorare la produttività degli sviluppatori, consentendo la collaborazione tra utenti da remoto.

Basato su Javascript, Bespin permette sviluppare interfacce web in HTML 5, garantendo velocità di prestazioni per importare rapidamente anche codice incluso in file di grandi dimensioni, annullare modifiche apportate al progetto e presto la possibilità di condividere in real time la sessione di lavoro relativa al codice implementato.

Le funzionalità di Bespin sono destinate a crescere verso una più completa integrazione di strumenti che possano garantire una collaborazione diretta di modifica del codice sul web mai vista prima, come ha dichiarato Galbraith, il co-direttore dell’area developer tools del Mozilla Labs.

Per provare il tool e testare da subito le funzionalità di cui è dotato, è possibile registrarsi al sito ufficiale.

Via | labs.mozilla.com

Category: Programmazione, Siti Web, Tecnologia | No Comments »

Layout css vuoti per i propri siti Web

Febbraio 12th, 2009 by Giovanni Caputo

Se realizzate siti web potrebbe interessarvi la lista di Layout in CSS presente al seguente link:

LINK

Category: Siti Web, Tecnologia | 1 Comment »

Rollover veloce senza precaricamento

Febbraio 11th, 2009 by Giovanni Caputo

Molto spesso capita, durante la creazione di un sito web,  di voler ottenere un testo con effetto rollover con delle immagini.

Per ottenere un buon effetto, è necessario utilizzare un precaricamento di tutte le immagini utilizzate nelle hover che fà però aumentare il numero di richieste HTTP al server.

Ad esempio dobbiamo avere  gli elementi <a con display:block; e le proprietà di padding e background con immagini per le  a, a:hover e a:active per ottnere un rollovere.

Quindi avremo del codice CSS di questo tipo:
#menu a {
...
background: url("button.gif") top left no-repeat;
}
#menu a:hover {
...
background-image: url("button-over.gif");
}
#menu a:active {
...
background-image: url("button-active.gif");
}

/* etc… */

Per semplificare il rollovere spesso è utilizzato una sola immagine che contiente tutti i vari stati del bottone: normale, :hover, and :active.

rollover background image

In questo modo avremo una sola immagine che si sposta modificando il background position, ad esempio con il seguente codice CSS:
#menu a {
background: url("button.gif") 0 0 no-repeat;
...
}
#menu a:hover {
background-position: -157px 0;
...
}
#menu a:active {
background-position: -314px 0;
...
}

Se volete ottenere qualcosa di più complicato potete visualizzare il video al seguente link:
LINK

Category: Programmazione, Siti Web | No Comments »

Template e-Commerce

Gennaio 29th, 2009 by Giovanni Caputo

Di seguito 35 template trautiti  per i più comuni sistemi di e-Commerce come Os-Commerce, Magento, zen Cart etc..

1. WordPress Templates

Crafty WordPress Theme | Demo | Download

Screenshot

WordPress e-Commerce Plugin | Download

Screenshot

2. Prestashop

CleanBlue

Screenshot

et-black

Screenshot

PrestaThemes
A collection of free high-quality templates for PrestaShop.

3. osCommerce Templates

Footwear | Download

Screenshot

Appliance | Download

Screenshot

Cosmetics Store | Download

Screenshot

Computer Store | Download

Screenshot

4. Magento Templates

Modern Theme | Download from Magento

Screenshot

Blue Skin | Download from Magento

Screenshot

Telescope Theme | Download from Magento

Screenshot

Pet Store Theme | Download from Magento

Screenshot

Free Magento Theme from Template Monster | Download

Screenshot

Electronics Store 3 | Download from eCommerce-Themes

Screenshot

5. Zen Cart Templates

Free Zen Cart Template | Download

Screenshot

Acadame | Download from ichoze.net

Screenshot

Clothes Online | Download

Screenshot

6. CubeCart Templates

LiteFree

Screenshot

Clean Blue
A collection of free CubeCart 3 Skins. More free Cubecart skins.

Screenshot

7. CRE Loaded Templates

Electronics Store | Download

Screenshot

Clothes Store | Download

Screenshot

8. General E-Commerce Templates

The following templates were created for the purpose e-commerce but not built for a specific system. If you plan to use one of them, it would need to be adapted to and integrated in the e-commerce solution of your choice. Templates with valid HTML code are marked.

Tool Shop | Download (valid HTML)

Screenshot

Pet Shop | Download (valid HTML)

Screenshot

Auto Parts | Download (valid HTML)

Screenshot

Clothes Collection | Download

Screenshot

Gadgets Template | Download (valid HTML)

Screenshot

Online Movie Store | Download (valid HTML)

Screenshot

Books Online | Download (valid HTML)

Screenshot

Beauty Company | Download (valid HTML)

Screenshot

Clothes Store | Download

Screenshot

Hardware Store | Download

Screenshot

Online Store | Download

Screenshot

Computer Store | Download

Screenshot

Mobile Phone Shop | Download

Screenshot

Hi-Fi Technics Store | Download

Screenshot

Electronics Store | Download

Screenshot

Read the rest of this entry »

Category: Programmazione, Siti Web, Tecnologia | No Comments »