Blog trasferito su
www.NoizExperience.com

18 luglio, 2008

Risorse Web per i Developer e Designer




pulsante html in stile media player
Tutorial di Photoshop che illustra la procedura per realizzare pulsanti in stile Windows Media Player 11.


idee per Layout orizzontale css
La moda del layout Orizzontale sta dilagando. Questo esempio può essere utile per analizzarne i pro e contro.


modello form php
Un servizio web 2.0 molto valido in grado di crearci il codice html di Form. Non dovremmo fare altro che selezionare le nostre preferenze: colore, quantità di campi, dimensioni ecc. ecc.


script mootools moord javascript
Moo.rd è una libreria Javascript molto potente e utile basata sul framework Mootools. Molti degli script che vengono pubblicati su questo blog, sono realizzati tramite moo.rd.


grafica gratis
JuliusDesign presenta un elenco di 50 link a siti dove poter scaricare tante risorse vettoriali gratuitamente. Imperdibile per i Web Designer e bloggers: si trova davvero tanto materiale utile.

16 luglio, 2008

Trucchi per Blogger




Nonostante Blogger sia di proprietà di Google, quest'ultimo non gli dedica tutto il supporto dovuto per fare una concorrenza seria alle altre piattaforme. Gli ultimi aggiornamenti non hanno soddisfatto granchè gli utenti, e chissà quando verranno rilasciati i prossimi.

Vediamo di migliorare alcuni parametri per aumentare la visibilità sui motori di ricerca.

Come inserire il titolo del post come titolo della pagina

Questo trucco permette una migliore indicizzazione da Google. Infatti normalmente sul titolo della pagina viene visualizzato il titolo del Blog, e poi quello del post. In questa maniera verrà mostrato solo il titolo del post, che contiente molte keyword e quindi avrà più possibilità di salire tra i risultati.

Accedi alla tua bacheca, vai su Layout e Modifica Html. Tra le prime righe di codice dovresti trovare questo codice:
<title><data:blog.pageTitle/></title>
cancellalo, e al suo posto copia e incolla questo:


<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Mostrare solo l'immagine dell'header, e nascondere il titolo del blog.

Molti utenti preferiscono, come io, inserire nell'header una bella immagine jpg, piuttosto che lasciare il normale titolo del blog in testo h1. In tal caso scegliendo questa soluzione si perde qualcosa in termini di indicizzazione. L'ideale è inserire l'immagine come sfondo del div che contiene l'header e "nascondere" l'h1 dalla grafica, ma renderlo sempre visibile per Google.

Il codice css a cui dobbiamo fare riferimento cambia da template a template, quindi non posso dirvi quale classe specifica modificare. Ma vediamo di arrangiarci.

Accedi alla sezione Modifica html e cerca #header. Subito dopo il primo }, inserisci questo codice:
#header h1 {text-indent:-10000px}

Aumentare la percentuale di keyword importanti

Possiamo realizzare lo stessa tecnica del titolo, anche sulla descrizione del Blog. Prima di tutto è da notare che la maggior parte dei template scrive la descrizione come semplice testo, ma se inseriamo una descrizione con tante keyword, la impostiamo in h2 e la nascondiamo, possiamo ottenere dei buoni risultati su Google.

Sul codice Css #header h1 di cui abbiamo già parlato sopra, apporta questa modifica:
#header h1, h2 {text-indent:-10000px}

Dopo aver salvato, spunta la casella Espandi i modelli widget, e cerca la scritta:
class='description'

Il tag contenente questa classe dovrebbe iniziare con p, sostituiscila con h2, e accertati che anche la chiusura del tag sia in h2.
Tutti questi trucchetti aumenteranno sicuramente la tua posizione su Google, non subito ovviamente, i risultati incominceranno a vedersi dopo qualche settimana.

Nei prossimi post vedremo altri trucchi. Mentre se hai qualche problema nell'applicarli, non esitare a chiedere aiuto, siamo qui per questo.

15 luglio, 2008

2° Mese: alcune considerazioni





Sembra ieri quando ho deciso di aprire questo blog, e invece sono già passati 2 splendidi mesi. Questa nuova "experience" mi sta portando tante soddisfazioni: sto conoscendo tante persone nuove, le mie conoscenze sul developing e design sono sempre maggiori, e scopro ogni giorno angoli del web di nicchia che prima mai avrei potuto conoscere.

I risultati del blog sono molto soddisfacenti: Google Analitycs segna una costante crescita, e da qualche settimana, grazie ad un piccola modifica alla struttura del codice del template, il Blog è parecchio salito sulla serp di Google, e di conseguenza gli accessi provenienti dalle ricerche sono tanti ogni giorno. Buona parte dei post risulta tra i primi risultati per le querry di ricerca con domande relative al developing, e FeedBurner.com mi segnala ogni giorno tanti lettori ai Feed.

Insomma, tante soddisfazioni! Ma purtroppo il tempo non basta mai: lavoro, impegni e vita sociale. Infatti vorrei poter riuscire a scrivere un post al giorno, ma non sempre è possibile, non tanto per scriverlo in se stesso, ma per quanto riguarda lo studio che ne faccio prima che porta via tanto tempo: realizzazione del codice o video, semplificazione, realizzazione grafica, ottimizzazione ecc. ecc.

Ringrazio di cuore chi segue il Blog, chi porta il suo contributo con i commenti o con i voti ai post, e chi si limita solo a leggere, chi mi ha segnalato gli errori che ho commesso, e chi mi ha suggerito alcuni consigli, chi mi ha aggiunto al suo BlogRoll nel suo Blog e chi mi chiede aiuto via email..insomma..tutti i presenti!

Approffito del post per fare una proposta. Chi ha qualche idea per qualche speciale collaborazione, iniziativa, partnership o altro, mi contatti. Da Settembre vorrei poter realizzare qualcosa di nuovo in collaborazione con altri Blog, quindi se siete interessati o conoscete qualcuno che lo è, o avete link da segnalarmi, fatemi sapere!

14 luglio, 2008

Creare l'effetto riflesso su un' immagine e testo






Nell'era del web 2.0 l'effetto riflesso la fà da padrona. Per realizzarlo basta un minuto su Photoshop, vediamo come.

Sul video potrai seguire passo passo le procedure, mentre per i dettagli tecnici consulta il post qua sotto.

Guarda l'esempio.

1) Inserisci un testo o un'immagine, e dagli una leggero riempinto sfumatura su opzione di fusione.

2) Crea un nuovo livello, seleziona un'ovale a metà del testo o immagine, riempilo di bianco e imposta l'opacità a circa 10 o 20%;

3) Duplica l'immagine, capovolgila, mettila sotto l'originale e dagli una sfumatura alta che finisca col bianco o con un colore uguale allo sfondo della pagina web.

10 luglio, 2008

Menù Rollover in puro Css senza pre-load


In un precedente articolo in cui si realizzava un menu rollover in puro css, abbiamo lasciato in sospeso il problema iniziale del pre-load. Vediamo con l'utilizzo di un piccolo trucco Css come puoi risolvere il problema.

Guarda l'esempio.

Per aggirare il caricamento della seconda immagine che farà il rollover non devi fare altro che creare due immagini in una, ossia, nello stesso file immagine inserisci nella parte alta l'immagine normale e nella parte bassa il rollover. Quindi posizionando il mouse sopra la voce del menù, non farai altro che spostare l'immagine verso il basso.

Ogni voce conterrà un'immagine di sfondo duplicata: nella fase normale si vedrà la parte superiore, passandoci sopra col mouse, si vedrà solo la parte inferiore. Così facendo si aggirà il pre-load perchè si carica solamente un'immagine doppia.


Vediamo quindi in pratica come si realizza, analizzando l'esempio:
Il codice Css:
#menu {margin:0; padding:0; list-style-type:none; height:60px}
#menu li {width:100px; height:60px; float:left; background-position:top}
#menu li:hover {background-position:bottom}
#menu a {width:100px; height:60px; line-height:60px; display:block; vertical-align:middle}
.home {background-image:url(menu_01.jpg);}
.works {background-image:url(menu_02.jpg);}
.blog {background-image:url(menu_03.jpg);}
.email {background-image:url(menu_04.jpg);}

Il codice Html
<ul id="menu">
<li class="home"><a href="#"></a></li>
<li class="works"><a href="#"></a></li>
<li class="blog"><a href="#"></a></li>
<li class="email"><a href="#"></a></li>
</ul>

Come vedi il Css si basa quasi unicamente sull' ID menu, il quale detta le regole per tutti gli elementi che ci stanno dentro. Poi per ogni voce viene indicata l'immagine da usare.
Il markup html invece è un semplice elenco che buttà giù la struttura.

Guarda l'esempio.
Scarica il sorgente e il file Photoshop.

Prova a realizzarlo anche tu prendendo spunto da questo esempio di base, e pubblica il link al tuo lavoro sui commenti. Io provvederò a pubblicarlo sul post con il link al tuo Blog.
Se non ci riesci o trovi qualche difficoltà, ti fornirò aiuto.

09 luglio, 2008

Un form per lo Scambio Link




form scambio link in php

Ricevi molte proposte di scambio link che ti intasano i commenti? Ricevi tante email lunghe e noiose da leggere che in pratica alla fin fine ti propongono solo uno scambio link? Vediamo come realizzare un form da inserire sul tuo Blog, e che con pochi parametri assicura meno stress per tutti: sia per chi chiede, sia per chi riceve la proposta.

Utilizziamo un piccolo form php contenente i seguenti parametri:
  • Nome;
  • Email;
  • Link da proporre
  • Breve descrizione del sito/blog.

Questo modulo di richiesta puoi utilizzarlo nella sidebar in maniera permanente, o altrimenti dedicare una pagina col link diretto ed in evidenza nel menù.
Iniziamo a Realizzare!
Inserisci questo codice Css in un foglio di stile esterno o direttamente tra i tag style :
#form *{float:left; margin:0; list-style-type:none}
#form li {display:block; clear:both; margin-bottom:10px}
#form label {width:150px; text-align:right}

Ora copia ed incolla l'html dove vuoi che venga visualizzato il form:
<form method="get" action="scambiolink.php">
<ul id="form">
<li><label>Nome: </label> <input type="text" name="nome"/></li>
<li><label>Email: </label> <input type="text" name="email"/></li>
<li><label>Link del tuo sito/blog: </label> <input type="text" name="link"/></li>
<li><label>Breve descrizione: </label> <textarea name="descrizione"></textarea></li>
<li><label>Invia il Link </label><input type="submit" value="Ok"/></li> 
</ul>
</form>

Ora crea un nuovo file e nominalo scambiolink.php ed inserisci questo codice:
<?php
$nome = $_GET['nome'];
$email = $_GET['email'];
$link = $_GET['link'];
$descrizione = $_GET['descrizione'];
$miourl = 'http://www.tuosito.it';
mail("tuaemail@mail.com","$nome ti propone uno scambio link","Nome: $nome \r\nEmail: $email \r\nLink: $link \r\nDescrizione: $descrizione");
mail("$email","Ok! Link consegnato a $miourl","Nome: $nome \r\nEmail: $email \r\nLink: $link \r\nDescrizione: $descrizione");
?>


Sostituisci le scritte in rosso rispettivamente col nome del tuo sito e il tuo indirizzo email. Nella pagina scambiolink.php puoi inserire un messaggio di conferma tramite semplice testo, e un link che ti riporta all'home page.

Nel caso in cui vuoi che dopo aver compilato il modulo, l'utente venga rimandato direttamente sull'home-page, copia ed incolla questo script php subito dopo quello arancione:
<? header("location:$miourl"); ?>

Lo script ti manderà un'email di richiesta, che tu potrai valutare, ed eventualmente dopo inserirai a mano i dati sul tuo Blog. A chi chiede lo scambio riceverà una notifica via email.

Per utenti Blogger
Se utilizzi Blogger inserisci solamente il form html e css (se non sai come inserire il css clicca qui), mentre la pagina in php, con i suoi relativi script, la dovrai inserire su uno spazio web esterno (altervista.org fornisce questo servizio gratuitamente), dopo di che inserisci nell'attributo action (del form html su blogger) l'indirizzo completa che rimanda al file php esterno.

Per chiarimenti e/o se riscontri malfunzionamenti possiamo verificarli insieme.

08 luglio, 2008

Come si Progetta una Pagina Web



Occuparsi dell'ideazione e progettazione di pagine web non è qualcosa che si improvvisa.Vediamo di capire insieme come si può arrivare ad un prodotto finale veramente ottimale seguendo alcuni consigli.

1) La struttura sono le fondamenta
Fai una piccola analisi sul cosa vuoi realmente costruire. Pensa come se fossi tu l'utente: cercare di capire quale sia la miglior posizione degli elementi, qual'è il miglior modo per trovare quello che cerchi? Prendi una decsione: cos'è realmente utile e cosa no. Cosa potrebbe farti confondere nella ricerca dei contenuti? In fondo la cosa che l'utente desidera di più è trovare ciò che cerca nel modo più facile possibile e nel minor tempo.

A chi ti rivolgi? Qual'è il tuo target di riferimento? Prendi in considerazione la fascia di utenza a cui ti dedichi, e realizza una palette di colori e font in cui quegli utenti in qualche modo si riconoscano.
Facciamo qualche esempio:
- Stai realizzando un sito per uno studio di consulenza finanziaria: scegli uno sfondo bianco, font Arial / Verdana nero o grigio scuro, imposta il layout coi colori grigi o marron chiari, tieni uno stile sobrio ed elegante.
- Stai realizzando un sito per la ludoteca comunale: scegli uno sfondo di un colore chiaro, usa un font di dimensioni almeno 13/14 pixel, come Times New Roman o Comic Sans con un colore quasi scuro, ma in netto contrasto con lo sfondo, colora i link con colori vivaci ma leggibili. imposta il layout con colori che vanno dal celeste al verdolino, insomma tinei il sito colorato ma non scordarne l'usabilità.
-Stai realizzando un sito per una band metal: ovviamente sfondo nero, font Trebuchet o Arial sul bianco, imposta il layout con i rossi scuri e grigi.

2) Prendi carta e matite e disegna!
Prima di lavorare col Photoshop fai degli schizzi su carta. Inizia con delle bozze a mano libera, definisci più o meno cosa vuoi fare solamente con una matita, dopo che hai deciso prendi un righello e un nuovo foglio e rielabora in una scala più o meno precisa il layout, e dopo aver disegnato la struttura fai qualche fotocopia se hai la possibilità. Dopo di che prendi le matite colorate e colora. Prova più combinazioni di colori, e non aver paura di perdere qualche minuto in più: abbi pazienza, fai con calma per ottenere un lavoro più curato ed elaborato.

3) Imponi il tuo Stile
Per la rete si trovano tanti effetti da applicare alle immagini e al codice delle pagine web, ma usa uno stile ben definito, non mescolare troppa roba tutta insieme per rendere il tuo sito più cool o web 2.0.

Tieni presente il concetto del Logo. La prima cosa che un'utente nota è il logo, se questo manca, o non è ben enfatizzato, le probabilità che scambi il tuo sito per un sito "qualunque" sono elevate, quindi imponi la tua importanza, promuovi il tuo marchio, o del cliente che sia.

4) Rendi la vita più facile agli utenti
Un sito con un design spettacolare ma senza usabilità, non ha alcun valore. Rendi la navigazione semplice, come già detto al punto uno, tieni conto di come si muovono gli utenti per trovare ciò che cercano.

Un'utente che non riesce a trovare ciò che gli serve nel tuo sito, difficilmente tornerà.

5) La grafica dev'essere Coerente
Realizzare una grafica con diversi tipi di font per ogni sezione del sito non è coerente, e ciò porta a confusione. Cerca di tenere lo stesso carattere per tutta la pagina, o al limite, un carattere in linea con l'altro. Per esempio evitare di associare Arial e Comic Sans, al massimo si può con Arial e Verdana. Tieni presente questo concetto anche per gli elementi grafici, non fare minestroni: primo perchè porta confusione all'utente, secondo è anti-estetico.

6) Tecnologia ok, ma se serve.
L'utilizzo degli effetti come mootools e jquerry rendono le pagine più fresche, vive, più semplici e in alcuni casi più veloci. Perfetto. Ma esagerare, come in tutte le cose, fa male. Utilizza tecnologie utili, non appesantire le pagine per impressionare i tuoi utenti: ricorda che se una pagina ci mette più tempo a caricare, l'utente se ne va. Ricorri alle tecnologie sopratutto per risolvere problemi, non per crearli.

7) Spaziature: meno stress, più cool.
Impostare i contenuti con gli spazi giusti è importante e più gradevole, tieni un'interlinea nel testo che sia ampia al punto giusto da poter leggere con chiarezza, quindi evita linee troppo vicine, e tieni il contenuto sempre un pò spostato dal bordo, anche qui senza esagerare. L'esempio qua sotto rende l'idea di come il terzo riquadro sia più piacevole e leggibile.

Da Evitare Prova per vedere come funziona un'interlinea giusta e gradevole.

Da Evitare Prova per vedere come funziona un'interlinea giusta e gradevole.

Può andare Prova per vedere come funziona un'interlinea giusta e gradevole.

07 luglio, 2008

Lo sfondo del blog come quello di Barack Obama - Tutorial






Mettiamo da una parte le simpatie politiche. Il sito di Barack Obama è sicuramente il più bello graficamente e più innovativo tra tutti gli ex candidati alle primarie per le presidenziale americane del 2008, sia essi democratici che repubblicani. Lo sfondo del sito è in primis la cosa che colpisce di più, luminoso e vitale.

Vediamo come puoi realizzare qualcosa di simile: una base da cui partire per realizzare qualcosa di più personalizzato per il tuo Blog.
Per vedere un'esempio del prodotto finale che potrai ottenere seguendo il tutorial clicca qui.
Sul video potrai seguire passo passo le procedure, mentre per i dettagli tecnici consulta il post qua sotto.

Imposta le Guide
Immagina di avere una pagina con un classico layout da 900px, quindi imposta le dimensioni del foglio di lavoro a 1000px per un'altezza di almeno 800px. Imposta le guide verticali 0, 50 e 100px poi su 900, 950 e 1000px. Quelle orizzontali su 200px e 700px.

Illumina e Illumina!
Crea un nuovo livello, e disegnaci un ovale orizzontale e riempilo di bianco. Ora su opzione di fusione azzera l'opacità di riempimento e crea un bagliore esterno. Posizionalo in maniera orizzontale in modo tale che il suo punto più alto tocchi la linea orizzontale del foglio a 200px. Creane due copie e fai lo stesso verticalmente.

Crea un nuovo livelo, e seleziona un rettangolo partendo dalla guida orizzontale a 200px, per la verticale da 100 a 900px e riempilo di bianco. Questo sarà lo sfondo dei contenuti. Dagli un pò di ombra impostando la posizione a 90 gradi.

Crea ancora un nuovo livello, e disegnaci un cerchio, non per forza regolare. Coloralo di bianco, poi vai su opzioni di fusione e azzeragli l'opacità di riempimento e creali una sovrapossizione radiale. Guarda il video per capire meglio.

Duplica tante copie quanto basta, e per ognuna impostane un'opacità e dimensione diversa.

Ultimi ritocchi
Crea un nuovo livello, e riempilo di nero. Vai su Filtro > Rendering > Riflesso Lente, e applica l'effeto sopra il nuovo livello. Dopo di che vai su opzioni di  fusione ed imposta Schiarisci come Metodo fusione e diminuisci l'opacità quanto credi che basti.

Guarda il lavoro completato cliccando qui.
Per poi applicare lo sfondo sul tuo sito puoi seguire la fase finale descritta qui.

06 luglio, 2008

La "scaletta" del Blog

Il Poetto, Cagliari.


Dopo qualche settimana dallo start-up iniziamo a definire gli appuntamenti o "scaletta" del Blog. Credo questo "comunicato" possa mettere un pò più chiarezza per chi legge, e definire meglio i paletti del blog. Quindi duranta la settimana verranno pubblicati dei post con questi argomenti:

  • Tutorial: Photoshop e Css spiegati tramite un video appositamente realizzato, con spiegazione dettagliata passo per passo;
  • Web Development: approfondimenti su script Php o Javascript;
  • Web Design: guide e approfondimenti sui Css, consigli per ottimizzare l'estetica della grafica web;
  • SEO e Web Marketing: approfondimenti e tecniche sull'ottimizzazione per i motori di ricerca, e consigli per pubblicizzare il proprio blog ed aumentare le visite;
  • Risorse Web novità: I migliori siti/articoli trovati durante la settimana che pubblicano risorse importanti ed imperdibili e che ovviamente stanno a tema con gli argomenti trattati qui sul blog.

Non mancheranno anche altri tipi di post che però avranno una cadenza meno regolare:
  • Off-Topic: ogni tanto sforare col tema principale del blog fa sempre bene, quindi non mancheranno post su servizi web 2.0 "eccezzionali", e potrebbero venire riprese "importanti" notizie per approfondirle insieme a chi legge, e poi vedremo...;
  • Considerazioni: più o meno ogni metà mese verrà pubblicato un post per fare il punto sulla situazione, sull'andamento del blog, chiarire alcuni punti, e più in generale per avere un contatto diretto con chi legge il blog..

Ci tengo a precisare che per questioni di tempo la scaletta settimanale non potrà quasi mai essere portata avanti al 100%, ma mi impegnerò per portarne a termine almeno i 2/3. Nessun argomento avrà un giorno certo di pubblicazione, tranne che per i Tutorial che saranno "quasi" sempre di Lunedì, e Risorse Web di Venerdì.

03 luglio, 2008

La Bandiera Americana e Italiana con Css

american flag width pure css

Oggi, 4 Luglio, è l'anniversario dell'Indipendenza degli Stati Uniti d'America. E che c'entra col Blog?! Approffitiamone per approffondire i Css e per analizzarne la sua potenza prendendo spunto da questa festa: vediamo come realizzare la bandiera degli Usa e, perchè no, anche quella Italiana.

Guarda l'esempio qui.

Analizzando il css notiamo la presenza di un solo Id per identificare il contorno della bandiera, la classe Blue detta le istruzioni per il rettangolo a sfondo, appunto blu, dove appiono le stelle, poi possiamo notare come il p della classe Blue detti le regole per il posizionamento delle stelline. A seguire poi troviamo le linee bianche e rosse.
#flag {
        width: 398px;
        border: 1px solid #ddd;
        margin: 0 auto;
        position: relative; }
    .blue {
        width: auto !important;
        width: 180px;
        background-color: #00348c;
        color: #fff;
        text-align: center;
        padding: 2px 0 5px 8px !important;
        padding: 2px 0 5px 0;
        position: absolute;
        top: 0;
        left: 0; }
    .blue p {
        letter-spacing: 12px;
        height: 14px;
        font-size: 20px;
        line-height: 14px;
        margin: 0; }
     p.stripe {
         height: 19px;
        font-weight: bold;
         text-align: right;
        padding: 0 5px;
        margin: 0; }
    .red {
        color: #f70029;
        background-color: #f70029; }
    .red::-moz-selection {
        color: #fff;
        background-color: #f70029; }
    .red::selection {
        color: #fff;
        background-color: #f70029; }
    .white {
        color: #fff;
        background-color: #fff; }
    .white::-moz-selection {
        color: #000;
        background-color: #fff; }
    .white::selection {
        color: #000;
        background-color: #fff; }


Il codice Html detta la struttura:
<div id="flag">
<div class="blue"> <p>&#9733;&#9733;&#9733;&#9733;&#9733;&#9733;</p> <p>&#9733;&#9733;&#9733;&#9733;&#9733;</p> <p>&#9733;&#9733;&#9733;&#9733;&#9733;&#9733;</p> <p>&#9733;&#9733;&#9733;&#9733;&#9733;</p> <p>&#9733;&#9733;&#9733;&#9733;&#9733;&#9733;</p> <p>&#9733;&#9733;&#9733;&#9733;&#9733;</p> <p>&#9733;&#9733;&#9733;&#9733;&#9733;&#9733;</p> <p>&#9733;&#9733;&#9733;&#9733;&#9733;</p> <p>&#9733;&#9733;&#9733;&#9733;&#9733;&#9733;</p>
</div>
<p class="red stripe"></p>
<p class="white stripe"></p>
<p class="red stripe"></p>
<p class="white stripe"> </p>
<p class="red stripe"> </p>
<p class="white stripe"></p>
<p class="red stripe"></p>
<p class="white stripe"> </p>
<p class="red stripe"> </p>
<p class="white stripe"></p>
<p class="red stripe"></p>
<p class="white stripe"></p>
<p class="red stripe"></p>
</div>

E la bandiera dell'Italia come si fa? Ancora più semplice ovviamente. Vediamo che dice wikipedia: "La bandiera italiana è un tricolore composto da tre bande verticali di uguali dimensioni. Partendo dall'asta i colori sono: verde, bianco e rosso."

Partiamo col Css:
#italia {width:300px; border:1px solid #ccc; position:relative}
 #italia p {width:100px; height:150px; float:left; margin:0; border:0}
.verde {background-color:#336600;}
.bianco {background-color:#FFFFFF}
.rosso {background-color:#CC0000}


Il codice html ne butta già la struttura:
<div id="italia">
<p id="italia" class="verde"></p>
<p id="italia" class="bianco"></p>
<p id="italia" class="rosso"></p>
</div>


Questi sono solo dei piccoli esempi da cui partire e per rendersi conto di quanto si possa realizzare col Css con un pò di fantasia.

02 luglio, 2008

Come si toglie la NavBar di Blogger?






La navbar o barra di navigazione che compare di default su Blogger è uno strumento poco apprezzato dagli utenti, perchè spesso va in netto contrasto con la grafica. Rimuoverla è molto semplice, e il video qua sopra ne mostra il procedimento, ma vediamo in dettaglio come la poi rimuovere:
- Accedi alla tua dashboard o Bacheca;
- Vai sulla sezione Layout e poi clicca sotto su Modifica Html;
- Cerca nel testo la scritta: body {
- Incolla poco prima questo codice css: #navbar-iframe {display: none !important;}


Se hai seguito tutte le procedure sia sul video che sul testo e non riesci a cavarne piede, sono disponibile per analizzarlo insieme.