Css? Div? ma cosa sono. Con questo argomento giungiamo alla 4 parta parte della mia miniguida. Sto pensando di riassumerla appena avrò finito di scriverla in un ebook ma servirà sicuramente l aiuto di qualcun altro per aggiornarla e migliorarla.

Tornando a questi strani acronomi vi svelo subito il loro significato. I Css o meglio Cascading Style Sheet, è un linguaggio di programmazione meglio conosciuto come fogli di stile che può essere associato ad altri linguaggi avanzati come Html, Xhtml, e Php. Anche se inizialmente si pensava di metterli da parte oggi hanno raggiunto un livello di usabilità insostituibile. In effetti i Css riescono a garantire una stesura di linguaggio più scorrevole, pulito e leggero.  La loro flessibilità, semplicità di utilizzo e il loro potenziale trasformano quello che era un linguaggio destinato al vasto cimitero di linguaggi web, in un colossale strumento del webdesign. In effetti nel momento in cui si è completata la grafica di un sito web i Css entrano in gioco partecipando da vincitori. Bordi, Riquadri, background, rollover, lightbox, posizionamenti di box, relatività di contenuto, e altro ancora vengono gestiti da questi strumenti nel modo più accurato possibile.

Tutto il layout è fondato sull utilizzo alla massima potenzialità di questo linguaggio. Possiamo scegliere un layout fluido, fisso o elastico a secondo delle nostre necessità.

Per layout fisso intendiamo un layout non altamente consigliato per il livello professionale poichè fissando il layout su una dimensione fissata significa costringere parte degli utenti che non possiedono monitor di elevata risoluzione a visualizzare con scroll l’intera pagina. Anche se ultimamente secondo degli studi effettuati sugli sforzi di lettura dell utenza è risultato che si fa molta fatica a leggere una riga molto lunga, quindi per questo motivo sono stari ripresi sopratutto ultimamente.

Per fissare le dimensioni di un layout allora bisogna utilizzare il classico comando:

width: 768px ; /* un esempio di dimensione fissa *1 */

*1=dimensione che  viene scelta a discrezione se si vuole impostare una ottimizzazione per siti web da

• 800×600 pixels
• 1024×768 pixels

In caso di margini o altre specifiche sul testo vengono messe tutte in automatico. Per esempio:

margin: 0px auto;

Poi si può scegliere un layout fluido, impostando larghezze altezze e altro tutto in percentuale, specificando margini, padding e border. Infine sono presenti layout elastici che sono molto più recenti e sono utilizzati in questo modo:
Per quando riguarda il font-size viene impostato sempre in percentuale, mentre per tutte le altre unità di misura vengono espresse in em. Questo perchè permette al browser di modificare i paramentri delle misure imposte fornendo una visualizzazione più corretta in base al browser che si utilizza.
Fatto questa breve panoramica passiamo a determinare come è possibile gestire il layout al 100% con i CSS. Naturalmente bisogna dividere i layout in tre tipi:

1. Layout monolitici
2. Layout a due colonne
3. Layout a tre colonne

ESEMPI:

In base alla scelta delle colonne e della disposizione dei contenuti si utilizzano tecniche differenti.
Partendo dal primo punto i layout monolitici sono quei layout costituiti da :

1. header
2. navigazione
3. contenuti
4. footer

Come per esempio in questo caso:
Sono molto semplici da realizzare  basta utilizzare  4 div che richiamano le voci elencate prima e allinearli tutti nello stesso modo.
Richiamiamo prima nel codice html i seguenti div:
poi invece nel foglio di stile avremo:

html,body{margin:0; padding: 0}
body{font-family: arial,sans-serif; font-size: 76%}
div#container{ /*nessuna regola necessaria*/ }
div#header{background: url(sfondo.gif)}
h1{margin: 0;padding:0}
h2{color:#4078B8; font-size:1.5em; text-align:center}
div#navigation{background-color:#000; color: #fff}
div#content{padding:0 1.5em}
div#content p{line-height:1.3em}
div#footer{padding:0.5em; background-color:#B0D0E8; color:#000; text-align:center}

Vediamo che per richiamare i singoli div viene utilizzato il comando div#nomesezione dopo di che tra parentesi graffe vengono descritte tutte le proprietà che deve avere.

Inoltre notiamo come è stato impostato il tag html e body, infatti si vede che sono stati azzerati i bordi e il padding perchè molti browser inseriscono in automatico queste proprietà su alcuni elementi tipo immagini e altro…Nel caso di Layout su più colonne per esempio su due avremo invece una struttura leggermente diversa:
Anche nel caso in cui si parla di più colonne bisogna fare una piccola scelta. Di solito si utilizzano il layout fisso, anche perchè è molto fastidioso vedere delle righe di colonne che si spezzano in due o tre righe nel caso si aumentano le dimensioni del testo sul browser. Per questo motivo spesso e volentieri si utilizzano colonne fisse.

Ecco un esempio:

-Nel codice html avremo:

<body>
<div id=”container”>
<div id=”header”></div>
<div id=”content”></div>
<div id=”navigation”></div>
<div id=”footer”></div>
</div>
</body>

Ora vediamo quali sono le regole CSS minimali per realizzare un layout a due colonne con i posizionamenti assoluti:

div#container{
position: relative;
}

div#content{
margin-right: 200px;
}

div#navigation{
position: absolute;
top: 80px; /*l’ altezza dell’ header*/
right: 0;
width: 180px; /*un po’ di meno per evitare l’ uso del padding*/
}

Come possiamo vedere il container viene dichiarato relativo per poter permettere il posizionamento nei suoi confini. I div content invece lasciano uno spazio di 200px sulla destra permettendo l’alloggio della barra di navigazione e il footer in fondo alla pagina.

Naturalmente concludo qui promettendovi di aggiornare molto spesso questo articolo, dato che i Css sono in continua evoluzione. Già vi ho proposto le novità di Css3 in questo post.

Vi aspetto alla prossima con Applicazioni e programmazione .

Nota: I codici Html e CSS sono stati presi dalla guida di Alessandro Fulciniti su HTML.it

Come previsto il lunedi scrivo sempre qualche articolo relativo alla musica e dintorni, ma non sempre riesco a scrivere frequentemente a causa di esami, e impegni vari. Anche in questo post del lunedi vi propongo un argomento relativo alla musica, anche se un po triste. Nella scorsa settimana questa notizia è stata ripetuta più volte fino allo spasimo. Non voglio ripeterla semplicemente a livello di cronaca ma per ricordare preferisco mettere ancora una volta in giro una delle su grandi canzoni.

Come vedete non ho pronunciato il suo nome.

Anche se con un po di nostalgia Addio!

Finalmente dopo un anno approda il capolavoro del 2009, manuelsensitive.it! Per visualizzarlo cliccare qui.

Il sito è stato realizzato con un template proprietario Kobrabyte.org, utilizzando tecnologie più disparate. Da php a flash, e altro ancora. È dotato anche di area Admin e di altri servizi esclusivi programmati appositamente per la necessità del cliente.

Gioco di Design e accessibilità fanno la loro parte dando vita ad un vero e proprio capolavoro.

P:S: per la musica aspettiamo autorizzazioni varie….!

Dove eravamo rimasti? Certo che ricordo … purtroppo devo chiedervi scusa per le frequenti interruzioni ma la vita universitaria è più dura del previsto e mi costringe a questa serie di rallentamenti.

Iniziamo subito

Il layout di un sito web è fondamentale. La struttura si trova alla base dell impaginazione e del modo di presentarsi ai propri utenti. Possiamo scegliere diverse tipologie di strutture. Fino a qualche anno fa di solito quando si parlava di struttura si parlava della disposizione dei menu; se orizzontale, verticale a destra o verticale a sinistra…. oppure tutti e due. Oggi con la diffusione di Flash, Ajax e la straordinaria evoluzione dei Css, la mentalità di layout standard è stata seppellita negli abissi. La struttura di un sito web è personalizzabile ai massimi livelli. Possiamo scegliere una struttura orizzonatale o verticale, una struttura dinamica un menu superanimato …e tutto ciò che ci passa per la testa.

Come creare una struttura?

Bè vi sconsiglio caldamente di non utilizzare le tabelle per vari motivi. Prima fra tutti i tag <table> penalizzano la posizione SEO di un sito web, e poi non sono più standard accessibili dalla W3c. Un altro problemino abbastanza fastidioso sono le dimensioni fisse e il loro disadattamento alle risoluzioni e browser dei vari Pc. Ciò che vi consiglio caldamente è l’utilizzo dei div. Infatti la accoppiata vincente di una struttura dinamica e adattabile alla risoluzione del singolo utenti è DIV-CSS .

Ma puntualizziamo al meglio il nostro algoritmo:

• Dalla grafica alla struttura:

Una volta ultimata la grafica del nostro futuro sito web ci preoccupiamo di dividere la nostra pagina in sezioni per avere vari frammenti della nostra pagina web. Questo può essere effettuato utilizzando programmi di grafica come Photoshop. Infatti utilizzando lo strumento Sezioni possiamo distinguere le varie parti della nostra grafica. Effettuando il salvataggio come pagina web, abbiamo le varie immagini spezzettate pronte per essere utilizzate.

• Struttura logica e chiara senza tabelle
  Creiamo le nostre sezioni senza utilizzare nessun tipo di tabelle ma strutturando in modo gerarchico  la nostra struttura utilizzando i tag e i CSS. Per esempio:

Se vogliamo far visualizzare una pagina che abbia una background definita, testo bianco un pò più grande e testo rosso per i vari punti da specificare allora nella pagina HTML avremo:

<html>

<head>

<div id=”body”>TESTO GRANDE

<div id=”sotto”>testo piccolo</div>

<div>

</head>

</html>

e nella parte del CSS:

.body {

background: url(’../../images/image.jpg’);

bg-color: #FFF;}

.sotto{

bg-color: red;}

• Seguire le politiche della W3C
  Oggi la W3C è l’ organo di riferimento per poter eseguire un sito web valido! Infatti un sito web deve avere un requisito fondamentale sancito dalla W3C e da altre associazioni dello stesso tipo: l’ accessibilità.
• XHTML e CSS commentati
  Aggiungo sia nel XHTML che il CSS, commenti di base per permetterti di capire meglio la struttura completa della tua pagina.
• Compatibilità con i maggiori browser
  Una volta la tua grafica convertita da psd a xhtml, provo il tutto per IE6+, FF2+, Safari 3+, Opera 9+ per garantire la compatibilità con i maggiori browser.

Definire la struttura di un sito infatti è una scelta che bisogna effettuare con molta attenzione anche perchè non si andrà a modificare frequentemente e quindi deve garantire molta efficacia  e stabilità. Per prima cosa nella fase di disegno si cerca di non spezzettare molto la struttura del nostro sito, utilizzando immagini più estese e non esagerando nell inserimento di pulsanti  personalizzati poichè sono tutti gadget che si possono inserire e posizionare anche  successivamente.

Di solito si consiglia di spezzare la struttura del nostro sito web in tre parti: header, content e footer.

Nell’ Header definite il percorso dei fogli di stile e vi dilettate alla programmazione, inserendo tutto quello che può piacervi. Lo sfondo della vostra header, la barra menu, spazio banner, link al titolo del sito web ecc. Per posizionare nelle posizioni desiderati nominate ogni modulo  in una classe di appartenenza e richiamatela nel foglio di stile da voi annesso. Dal foglio di stile potete posizionare, ingrandire applicare background, rimpicciolire, applicare bordi….e tanto altro ancora…

Stessa identica cosa per il footer e  il content. Per il content ci sarebbero da aggiungere qualcosina in più.

Il content è la parte più importante e più dinamica del sito poichè andranno ad alloggiare diverse applicazioni e codici che ci permettono di agire dinamicamente su questa sezione. Infatti accoglierà la parte dinamica del sito sempre in continuo aggiornamento e la parte dei widget quindi con un elevato grado di Iterazione Server-client. Proprio per questo motivo deve essere la parte più flessibile del sito web.

Il footer necessita delle stesse specifiche.

Costruita la struttura il gioco è fatto!

Vi aspetto al prossimo post in cui si parlerà soltanto di Css e Div.

Caro Presidente,

uso un linguaggio formale perchè Lei è un mio dipendente, e come altri milioni di Italiani che possiedono una percentuale dell Italia S.p.a. da Lei creata a partire dal suo scorso governo.

Le scrivo questa lettera per annotare un aspetto che tutti non hanno considerato, e che sia meglio evidenziare con un doppio tratto di un evidenziatore Giallo. Dov’è il trucco? Sig. Silvio Berlusconi sono un paio di mesi che la magistratura, la stampa, la televisione, e tutto il resto è contro di Lei. Ma per quale motivo proprio ora e non prima. Possono incidere le imminenti elezioni?  Certamente. La sua abilità imprenditoriale è riuscita ancora una volta ad avere la meglio proponendo una antipropaganda popolare e conquistando ancora molta popolarità. Un caso dopo l’altro si sono succeduti. Lo scandalo con Noemi, il richiamo della Regina, Il famoso “Cucu” con il cancelliere tedesco, il caso Mills e molto altro ancora. È quasi riuscito nel suo piano ma non tutti ci sono cascati. Oggi ho espresso il mio voto, e anche io sono caduto nel tunnel della menzogna purtroppo. Tutti coloro che non sopportano il tuo operato dovrebbero votarti per mandarti in Europa e far eleggere un nuovo capo del governo in grado di sostiture il Suo esecutivo. Ma Lei pur di non lasciare il Suo tanto amato paese è costretto a ricorrere alla famosa strategia dell antipropaganda politica, scongiurando gli scoop, proponendo leggi ad personam e tutto ciò che può infastidire l’ elettore.

Ottima strategia sig. oh meglio chiamarla Papy. Ha messo in diffusione il famoso volantino della Lodo-Alfano, che ha commosso milioni e milioni di elettori, da cui non si comprende bene il suo intento. Ma non solo non so se il resto della popolazione ha notato, la sua propaganda rispetto a quella degli altri anni è esclusivamente molto più scarsa di quella del PD, e non uscire dicendo che il PD ha da recuperare perchè non ci crediamo proprio.

Spero che tutti gli Elettori di queste votazioni 2009 abbiano capito il vero intento di questo grande piccolo uomo.

Cordiali Saluti

Kobrabyte

P.S.: Scrivo questa lettera perchè Voglio un Parlamento PULITO!

Ecco a voi la Kobrabyte Shirt…:

Finalmente è arrivata dalla sede tedesca della Spreadshirt, pagata la bellezza di €27.90. Per chi fosse interessato ad acquistarla ho aperto un Kobrabyte Shop, dove andrò ad aggiornare una vera e propria collezione. Quindi non perdetevi le ultime novità. Davvero bella questa shirt, potete realizzare tutte le maglie che volete con le fantasie che volete e sicuramente di questo interessante servizio non rimarrete delusi.

Come fare?

Basta iscriversi scegliere il proprio design e mandare in stampa, dopo massimo 72 ore sarà nella vostra cassetta postale. Volete sapere cosa è davvero sopprendente? Bè potete scegliere anche solo un pezzo.

Alla prossima

Ormai sono 4 giorni che mi succede:

Uno screenshot dice più di mille parole.

Non so per quale motivo ma Gmail, cade spesso e volentieri in errore, e certamente non è problema di connessione, ho provato a collegarmi con la rete universitaria, con la rete domestica Lan e wireless, addirittura anche l umts, mi da sempre lo stesso tipo di errore. Cosa sarà successo?

P:S: Naturalmente ho oscurato il contenuto delle mails!

Come al solito vi consiglio una nuova raccolta di pennelli che Psdtuts colleziona nei suoi archivi  si chiama New Grungy Leaf.

Questo pacchetto comprende 24 pennelli di dimensioni 2500 x 2500 pixels e per poterli scaricare bisogna fare il Log in and Download!

Ormai i social hanno conquistato il mondo. Con l’avvento di Facebook, e altri social network, il mercato di questi nuovi prodotti fa sobbalzare gli interessi per questo settore. Dopo avervi parlato di Facebook e delle sue personalizzazioni, ora è il turno di Myspace.

Wikipedia definisce Myspace in questo modo:

“MySpace è una comunità virtuale, e più precisamente una rete sociale, creata nel 1998 da Tom Anderson e Chris DeWolfe. Offre ai suoi utenti blog, profili personali, gruppi, foto, musica e video. I server sono a Santa Monica, California, e a New York. È attualmente il sesto sito più popolare al mondo, il quarto tra quelli in lingua inglese e il terzo negli Stati Uniti secondo Alexa. Grazie a questo spazio su internet, artisti e gruppi musicali come gli Arctic Monkeys, Lily Allen, i Belladonna ed i Cansei de Ser Sexy sono diventati famosi in tutto il mondo ancora prima di mettere effettivamente sul mercato i loro dischi.”

Bè come la maggior parte dei Social, nasce in ambito universitario, e poi si trasforma in una s.p.a.  La diffusione di Myspace è stata garantita dalla sezione Music che ha fatto esplodere il numero di utenti sopratutto nel mondo dello spettacolo. Musicisti, cantanti, cabarettisti, comici, produttori televisivi, grafici, montatori, operatori video, vocalist, dj…. e molto altro ancora…!
Ci si trova davvero di tutto!

Screen della prima pagina di Myspace

Iniziamo a parlare di come si presenta…al primo impatto. Collegandoti all’ indirizzo www.myspace.com, appare una schermata molto caotica a differenza della homepage “facebookiana”! Infatti ci si perde al garbuglio pubblicitario di banner che si alternano nella home. In fondo a destra c’è il box dove è possibile autenticarsi o registrarsi. La registrazione è semplicissima basta cliccare sul tasto appropriato inserire i dati con un indirizzo email. Il server invierà una email per confermare la registrazione. Cliccare sul link e il profilo sarà attivato automaticamente.

Al primo login, l’area amministrazione si presenta a differenza della home abbastanza ordinata. A sinistra c’è il menu con il quale possiamo accedere alla gestione del blog, delle immagini, dei video e del calendario. Nel box sottostante possiamo trovare le richieste di amicizia, amicizie in attesa o i messaggi di posta. Nella sezione centrale ci sono vari box.

Nel primo possiamo inserire l’umore temporaneo, cosa stai facendo, e possiamo visualizzare gli stati dei tuoi amici. Nel box sottostante possiamo vedere le varie attività in corso. In seguito troviamo la bacheca e il box degli amici. Naturalmente la posizione dei box è personalizzabile.  Possiamo fermarci qui nella descrizione della home, poiche il resto dei box sono notizie, o banner di Myspace, o nel caso del box applicazioni, funzioni che non vengono utilizzate quasi mai.

Una funzionalità base che viene utilizzata per personalizzare il profilo myspace è il tastino Modifica profilo posto immediatamente a capo di Ciao TUONOME!.. Infatti cliccando apparirà un form su cui si può inserire il Titolo, Chi sono, mi piacerebbe conoscere, informazioni generali, musica,… ecc…Basta inserire informazioni in quei form e premere il tasto salva modifiche.

L’ importanza di quei form però è ben altra. Infatti nel secondo e nel terzo form, è possibile inserire codici CSS o HTML, attraverso i quali possiamo personalizzare al 90% la grafica del nostro myspace. Perchè solo il 90%? Myspace pone dei vincoli. Infatti non si può naturalmente nascondere il banner pubblicitario dello space. Tutti i banner, quello superiore ed inferiore devono essere visibili. Il footer dello space deve comprarire comunque. I link devono essere adattati con le funzioni mylinks!

Una serie di limitazioni, tra l altro anche molto comprensibili.

Ma di come personalizzare il vostro profilo ne parleremo la prossima volta.

Come usualmente potete vedere vi posto alcune ispirazioni per il vostro design che si possono ritrovare in rete. In questo caso ringrazio la gentile raccolta di Youthedesigner .

Alla prossima-…!