Grazie a questo corso, in 30 giorni imparerai a realizzare un sito web, fatto come si deve e non come fanno quei fannulloni che si spacciano per web designer.

Il corso parte dal primissimo esercizio, dove si inizierà con la classica scritta “Hello World”, fino alla realizzazione di due pagine web complete, rispettivamente l’home page e una pagina di lavori, che puoi vedere qui sotto.

Un corso di assoluta qualtà che ti consiglio vivamente di seguire se vuoi entrare in questo fantastico mondo

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Il template è composto da quattro sezioni: Home Page, About Us, I Nostri Lavori e Contatti. Queste sezioni si possono modificare in ogni loro parte, grazie alla guida che troverai insieme al tema.

Le Caratteristiche di Horizontal Template

Vediamo nei dettagli le caratteristiche che hai potuto apprezzare nel video.

Navigazione Orizzontale Animata

La navigazione avviene con una animazione orizzontale che ci porta da una sezione all’altra del sito in modo originale e innovativo.

Slideshow in Home Page

Lo slideshow in home page ti permetterà di inserire le immagini principali insieme a una descrizione. Un modo per presentare le caratteristiche più importanti della tua azienda.

Galleria lavori

Questa sezione la puoi adattare a moltissimi scopi.

Sei un ristorante e vuoi presentare i tuoi migliori piatti divisi in antipasto, primo, secondo ecc? Oppure sei un albergo e vuoi mostrare le camere a seconda della tipologia? O ancora sei un web designer e vuoi mostrare i tuoi lavori divisi per categorie?

In questa sezione potrai fare tutto questo, presentando in modo elegante ciò che riterrai più opportuno, potendo inserire poi una descrizione per ciascuna foto.

Modulo Contatti

Grazie al modulo contatti, che prevede dei controlli nei vari campi, l’utente potrà contattarti in modo facile e immediato; sulla destra potrai inserire altre informazioni.

Compatibilità

Horizontal Template è stato testato con successo con Internet Explorer dalla versione 7 in poi, Firefox, Chrome, Safari e Opera, con risoluzioni che vanno dai 1024x600px dei netbook, fino ai 1920x1080px.

La Guida

Insieme al tema riceverai una guida dettagliata su come inserire i contenuti nelle diverse sezioni.

Scarica Horizontal Template

Per scaricare Horizontal Template è gradita una donazione minima di 5 €. Puoi “offrirmi” una pizza (mi raccomando la diavola) o un’aragosta . 

Una volta effettuata la donazione tramite paypal, ti invierò il pacchetto che comprende il template e una guida dettagliata su come inserire i contenuti.

Questo è anche un modo per ricevere un tuo “grazie” per tutte le risorse, tutorial, segnalazioni che ho condiviso con te in questi anni

Dicono di Horizontal Template

Giuliano Ambrosio – Julius Design

Il tema realizzato da Federico è molto interessante, proprio grazie alla possibilità di navigare in modalità orrizzontale.

Un template che può soddisfare le più comuni esigenze per siti portfolio, music band, hotel, ristoranti e molto altro ancora.

Laura Gargiulo – Italian Web Design

Mi sembra un ottimo template, validato secondo gli standard e secondo me molto carino, usabile non solo per portfolio online ma per usi anche diversi (leggi la recensione completa)

Nando Pappalardo e Sara Presenti – Your Inspiration Web

Un template d’impatto, versatile e allo stesso tempo essenziale e semplice.
Un ottimo esempio di portfolio gradevole e professionale allo stesso tempo!

Tommaso Baldovino – TomStardust

Horizontal Template è un ottimo lavoro, una soluzione ideale per chi vuole un layout originale e curato in tutti i dettagli.

La sua scalabilità a differenti risoluzioni è un bell’esempio di design attento ai particolari.

Mirko d’Isidoro – Blographik

Un metodo diverso per usare un sito ad una pagina, senza dover aspettare il caricamento di nuove pagine, e avendo una navigazione diversa dal solito, ma molto chiara e usabile.

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

E’ sempre importante trovare il modo per distinguersi, curando i dettagli, come si è dimostrato più volte nella rubrica Siti ai Raggi X.

In particolare ho voluto sfruttare il logo dell’azienda, facendolo comparire all’hover sopra le voci del menu.

Ottenere questo effetto è davvero semplice, vediamo come si procede.

Passo 1 – Un po’ di HTML

Il codice HTML per il menu è una semplice lista non ordinata, dove assegniamo l’id menu, per poterci poi riferire ad essa nel codice CSS.

Voce 1
Voce 2
Voce 3
Voce 4
Voce 5

Passo 2 – CSS

Il codice CSS l’ho ampiamente commentato, per eventuali dubbi chiedi nei commenti

/* padding top assegnato alla lista, necessario poi
 * per lasciare lo spazio per il logo */
ul#menu {
	padding-top:45px;
	}

/* visualizzo gli elementi della lista in linea
 * e tolgo il "pallino" nella lista */
ul#menu  li {
	display:inline;
	list-style-type: none;
}

/* imposto la spaziatura tra i link
 * importante mettere la misura uguale
 * a sinistra e a destra per centrare poi il logo
 * all'effetto hover*/
ul#menu  li a {
    padding: 20px 10px 0 10px;
	text-decoration:none;
}

/* impostiamo l'effetto hover, posizionandolo
 * al centro e un padding di 20px per posizionare
 * il logo sopra le voci del menu */
ul#menu li a:hover {
	background:url(images/menu-hover.png) no-repeat center top;
	padding-top:20px;
}

Conoscevi questa tecnica? L’hai mai adottata in qualche sito? Condividila nei commenti!

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Quasi sempre quando sviluppiamo un sito in html e css la visualizzazione sui diversi browser non crea problemi, ad eccezione di IE. Però appunto quasi sempre.

In un recente progetto, mi è capitato che per un pixel una foto non si allineava correttamente solo in Chrome e Safari.

Cosa fare in questi casi? Esiste un hack CSS che permette di specificare la proprietà interessata solo per i browser che utilizzano webkit.

Nel tuo foglio di stile basterà aggiungere queste semplici righe di codice.

/*codice css generale per il div #div-id */
#div-id {
margin:10px auto;
width:960px;
height:auto;
background: #333; }

/*codice css specifico per chrome e safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#div-id { margin-top: 11px; }
}

In questo caso verrà applicato un margine superiore di 11px al div #div-id, solo per i browser Chrome e Safari.

Conoscevi questo hack? Ti è mai capitata una situazione simile alla mia?

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Sono 8 esempi che ti aiutano a capire le potenzialità di CSS3 e sono uno stimolo in più per iniziare a sperimentare queste tecniche.

Queste tre le animazioni che più mi sono piaciute che potrai apprezzare al massimo con Chrome o Safari.

Se anche tu hai realizzato delle animazioni simili condividile pure nei commenti

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Adaptive CSS può essere la risposta a questa eterna domanda che non ci fa dormire la notte (forse sto esagerando).

Questo script rileva la risoluzione che si sta utilizzando e associa il foglio di stile; in particolare potrai stabilire un range di risoluzioni (da 800 a 1000 utilizza 800.css, da 1000 a 1200 1000.css e così via).

Se per caso javascript è disabilitato, basterà mettere il tag noscript e associare il foglio di stile per la versione mobile, come specificato nella pagina dello script.

Cosa ne pensi di questa soluzione? Tu come ti comporti per la versione mobile del tuo sito?

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Infatti ti voglio segnalare un servizio che ho scovato per generare codice CSS3, CSS3 Generator: angoli arrotondati, ombre e gradienti in 3 minuti.

Basterà operare sui quattro selettori per impostare quello che ci serve e ottenere il codice da associare.

Come associare il codice?

Una volta prelevato magari potresti chiederti: e ora dove lo metto? Supponiamo che tu abbia il div “pippo” che vuoi arrotondare.

  Per favore mi arrotondi, mi metti l'ombretta e anche un bel gradiente?

Ora vai nel foglio di stile CSS e incolla il codice che hai ottenuto in questo modo, associandolo a pippo:

#pippo {
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
/*IE DOES NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow:0px 0px 7px #000000;
-webkit-box-shadow:0px 0px 7px #000000;
box-shadow:0px 0px 7px #000000;
/*IE DOES NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
background: -moz-linear-gradient(top, #ff4900, #591300);
background: -webkit-gradient(linear, center top, center bottom, from(#ff4900), to(#591300));
background: -o-linear-gradient(top, #ff4900, #591300);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4900', endColorstr='#591300');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4900', endColorstr='#591300')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background: linear-gradient(top, #ff4900, #591300);
/*--IE9 DOES NOT SUPPORT GRADIENT BACKGROUNDS--*/

}

Ah dimenticavo..e il mitico Internet Explorer? Per quello c’è CSS3PIE

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Non so quante volte mi sono arrivate mail, dove mi venivano chiesti consigli su quali libri comprare per imparare html, css, jquery ecc. Code School forse è la risposta migliore per imparare a scrivere codice.

I corsi funzionano in questo modo: ci sono 5 livelli dove per ognuno c’è un video di 10/15 minuti, poi si fa pratica con degli esercizi da risolvere per passare al livello successivo.

Alla fine ci saranno dei premi, ma non voglio svelarti altro, guarda tu stesso come funziona.

Al momento sono presenti 2 corsi che riguardano il linguaggio Ruby e ne sono previsti altri due su jQuery e HTML5 e CSS3.

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Basterà inserire l’URL del sito che vogliamo modificare, il servizio provvederà a eliminare il foglio di stile e noi poi dovremo inserire le nuove regole.

CSS Pivot, da solo non permette una modifica immediata dei vari elementi, ma a mio avviso va utilizzato insieme a Firebug, per capire quali regole devono essere applicate.

Lo trovo un metodo interessante per imparare ad utilizzare i fogli di stile, partendo già da una struttura HTML sottostante e in più potrebbe essere un modo per incuriosire dei potenziali clienti.

Tu cosa ne pensi? Conosci servizi simili?

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Ora tu mi risponderai: beh Fede basta che metti un position:fixed, un bottom:0 e il gioco è fatto.

Si vero, ma se ci ritroviamo con pagine dove c’è molto contenuto? Il testo andrà “sotto” il footer e non sarà il massimo dal punto di vista estetico e di usabilità.

Allora che si fa? Vai su CSS Sticky Footer e avrai la soluzione! Infatti qui è spiegato quali accorgimenti dovrai adottare nella scrittura del codice HTML e CSS, in modo da ottenere che quando c’è poco contenuto il footer si ” attaccherà” al bordo inferiore, se invece la pagina è “lunga” il footer si posizionerà dopo il contenuto.

Questa soluzione funziona su tutti i browser (e quando dico tutti, intendo TUTTI). Cosa aspetti? Prova e fammi sapere!

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!