mercoledì 4 settembre 2013

CSS Tips & Tricks:

Differenza tra id e class
E' possibile assegnare caratteristiche grafiche tramite i CSS sia usando l'id di un elemento che la proprietà class.
Ricordatevi che per assegnare ad un elemento con id dovrete nel CSS indicare le proprietà anteponendo il carattere #nome_stile, mentre per assegnare una proprietà attraverso la classe dovrete anteporre il carattere .nome_stile.
La differenza tra i due ? In genere si usa assegnare uno stile mediante id se è unico e non si ripete, mentre la class quando lo stile va riutilizzato.

L'importanza del posizionamento degli elementi
E' possibile gestire il posizionamento di ogni elemento mediante la proprietà position. Di default ogni elemento ha come valore position: static. Questo significa che l'elemento si posiziona rispetto alla pagina esattamente dove è inserito nel codice.

position: relative
In questo caso è possibile assegnare i valori top, bottom, left, right per posizionare l'elemento relativamente alla posizione corrente.


#div-1 {
 position:relative;
 top:20px;
 left:-40px;
}

sposterete l'elemento div_1 a 20px dall'alto e a -40px a sinistra rispetto alla posizione corrente.


position: absolute
In questo modo praticamente togliete l'elemento dal documento e lo posizionate esattamente dove indicato rispetto alla finestra del browser.

Il seguente elemento posiziona un elemento nell'angolo in alto a sinistra.


#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

position: relative + position: absolute
Questa combinazione può essere usata per posizionare esattamente un elemento in una data posizione all'interno di un altro elemento.

#div-1 {
 background: green;
 position:relative;
}
#div-1a {
 background: red;
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
HTML

<div id="div-1">
   <p>lore ipsum</p>
   <div id="div-1a">
     <p>lore ipsum</p>
   </div>
</div>

position: fixed
In questo modo è possibile posizionare un elemento esattamente dove indicato (come absolute) con la differenza che in caso di scroll della pagina l'elemento rimarrà comunque visibile sempre nella posizione indicata

#div-1 {
 position:fixed;
 top:0;
 right:0;
 width:200px;
}


Testare il vostro codice direttamente online
Se volete testare la combinazione di codice HTML e CSS, ma anche javascript compresi vari framework, questo è il link dove poter effettuare le vostre prove.

http://jsfiddle.net/

Su come utilizzarlo ne parleremo approfonditamente nelle prossime lezioni, comunque cominciate a divertirvi.

Ciao

lunedì 2 settembre 2013

WebDesign Class: dove comincia il design?

Ciao a tutti e bentornato a chi ha potuto godersi un periodo di vacanza.
Riprenderemo da questa settimana le nostre lezioni ed in particolare approfondiremo i CSS cercando di capire meglio quanto uno o più buoni fogli di stile ci possono aiutare a rendere il nostro lavoro più semplice, veloce ed efficace.

Ritengo innanzitutto importante la necessità di dover adottare una metodologia che ci aiuti a sviluppare il design dei siti che andremo a creare. In questo senso ne esistono molte, tra l'altro tutte valide (o almeno quasi), l'importante è che innanzitutto soddisfi le vostre necessità e che sia facilmente implementabile anche su diverse piattaforme.

Nel nostro corso abbiamo adottato 960 grid (http://960.gs), ma potremo analizzarne altre in futuro e verificarne magari le differenze sostanziali, ma ripeto, l'importante è adottare un sistema di lavoro innanzitutto.

Il nostro punto di partenza in questa fase rimane comunque lo sviluppo di siti a dimensione fissa (in larghezza intendo) che soddisfino la compatibilità con quanti più device sul quale verrà visualizzato. Per questo motivo il nostro limite in pixel in larghezza sarà di 1024px che dovendo considerare margini ed eventuali barre di scorrimento verticale per convenzione si parla di 960px come area di visualizzazione. Questo ci garantisce con un certo margine di sicurezza di poter visualizzare il nostro sito su quasi tutti i device o per lo meno sulla maggior parte di essi. Non parliamo in questo caso di smartphone che hanno una risoluzione minore, per i quali affronteremo in futuro le metodologie di "responsive" design.

Da dove partire allora?
Innanzitutto il design di un sito parte dalla creatività. La capacità cioè di mettere insieme elementi grafici e testo disponendo il tutto in un layout che faciliti la navigazione, la lettura e la fruizione dei contenuti.
Questa sicuramente è la fase più delicata e forse anche la più importante. Un buon progetto di webdesign parte proprio da qui cercando di valutare alcuni aspetti:

  • la navigazione deve essere quanto più immediata e non deve richiedere all'utente la necessità di dover individuare come accedere ai contenuti: il vostro sito potrà essere bellissimo sotto il punto di vista grafico o dell'appeal ma se l'utente non riesce a interpretare le dinamiche di navigazione entro 5 sec. sarà un utente perso; ricordate che l'utente medio deve essere accompagnato;
  • la linearità e la semplicità sono sempre un'arma vincente; un sito troppo ricco di elementi a volte risulta a primo impatto di difficile lettura;
  • accompagnate i contenuti con immagini: le immagini e i video facilitano l'interpretazione e la lettura se accompagnati da titoli esplicativi e da testi quanto più sintetici e chiari;
  • non siate pedanti: inutile ripetere affermazioni, frasi o anche slogan. Risultereste noiosi.


A parte queste considerazioni elementari cominciate a disegnare il vostro sito su un foglio di carta bianco; sì tornate ad usare carta e penna (matita meglio così potete cancellare). E' ancora il metodo più semplice e veloce per farsi un'idea.
Vi suggerisco di adottare questo piccolo trucco: usate un foglio A4 e disegnatelo sia in verticale che in orizzontale. In orizzontale soprattutto. In questo sensto tracciate due margini a circa 3-4 cm in verticale sia a destra che a sinistra.
Ricordate che i monitor rispecchiano come dimensione un foglio A4 orizzontale (più o meno ma serve per darvi un'idea). Questo metodo può essere utile anche per verificare quali sono gli spazi vuoti che l'utente medio vedrà sul suo monitor.

In questa fase sentitevi liberi, non cercate di limitare la vostra creatività in griglie, colonne o altro. Affrontate gli aspetti tecnici in una seconda fase, trovando magari dei compromessi tra creatività e limitazioni tecniche o concettuali.

Alla prossima !!!

giovedì 25 luglio 2013

WebDesign Class al via!

Ciao a tutti, dopo la seconda lezione di ieri ser (direi quasi notte), ho deciso che sarebbe stato utile attivare un canale comunicazione diretto con chi sta seguendo il corso, ma anche che per vari motivi non puo' seguirlo direttamente.
Usero' temporaneamente questo blog per dare seguito alle nostre classi, cercando di arricchire le lezioni con contributi utili a fornire quante piu' informazioni e conoscenze in merito al pprogramma del corso.
Naturalmente i vostri commenti e le vostre, perche' no, domande saranno ben accette e cerchero' di rispondere direttamente dal blog o nel caso di argomenti che meritino un'approfondimento specifico potranno essere ripresi durante il corso direttamente.
A parte questa introduzione passiamo di fatto alle cose concrete.
Come abbiamo visto ieri abbiamo accennato all'importanza nella fase di progettazione di cercare di lavorare a livello di layout con un sistema basato su una griglia, con relative colonne e quindi sfruttare un lavoro che qualcun altro ha gia' fatto per noi.
Vi incollo qui il link dove potete ottenere molte informazioni utili, nonche' verificare esempi concreti e reali, o scaricare il framework che vi permettera' di semplificare il vostro lavoro in fase di programmazione.
A questo proposito tratteremo nelle prossime lezioni innanzitutto cosa sono i framework, che tipo di framework esistono, come e perche' sia utile utilizzarli.

Eccovi il link http://960.gs

Nelle prossime lezioni entreremo nel vivo del codice HTML, nonche' CSS, e a questo riguardo cercheremo di affrontarli contemporaneamente perche' inevitabilmente collegati tra di loro.

A questo,proposito voglio sottoporvi un link per capire le potenzialita' delll'HTML5 e delle possibilita' di progettare e sviluppare soluzioni innovative.

http://www.html5rocks.com

Purtroppo molte delle risorse che vi suggeriro' sono in inglese, ma sono certo che non avrete problemi.

Ciao a tutti e ... alla prossima!
Swina Allen

Per adesso vi sottopongo un altro link, utile per capire meglio le potenzialita' dell' HTML5


WebDesign Class: scopri l'errore 1

Questi post saranno l'occasione per effettuare delle simpatiche verifiche in merito alla vostra partecipazione al corso WebDesign Class, perchè ogni attività formativa è "seria" se esiste il momento della verifica, che non serve solo ad attestare il fatto che gli studenti abbiano appreso, ma soprattutto che il formatore abbia raggiunto gli obiettivi dell'attività svolta.

Allora il primo test è di individuare nella pagina html sottostante l'errore.

<!DOCTYPE html>
<html>
<head>
<title>....</title>
</head>
<body>
<strong>Il mio sito</strong>
Benvenuti sul mio sito
</html>
</body>


Indicate l'errore nei commenti.
Alla prossima
Swina Allen

mercoledì 28 dicembre 2011

Tunesbag ... your music everywhere

Another way to sync your digital music library (iTunes included) and stream it on browser, iPod, iPhone, iPad, sync it with your Dropbox account or play it with our Logitech Squeezebox? Create your free account on Tunesbag (200 songs or 1GB space) and enjoy your music where ever you are and when ever you want. You can also create your personal playlists and share them with your friends. iOS and Blackberry app available too (android in a near future).
Sincronizzare la tua libreria musicale (iTunes compreso) e poterla mandare in  streaming verso browser, iPod, iPhone, iPad, collegarla magari alla tua cartella Dropbox, o farla suonare dal tuo impianto Logitech Squeezebox? Crea il tuo account Tunesbag free (200 song o 1 GB di spazio) e goditi la tua musica dove vuoi e quando vuoi. Puoi anche creare le tue playlist e condividerle facilmente con i tuoi amici. App disponibile per iOS e Blackberry (presto anche per Android).


sabato 24 dicembre 2011

WeMusic

Music ... let's do it! We Music (http://wemusic.veenue.com) is a simple and interesting idea. Create a collaborative music video with musicians all around the world. How it works? Record a live video of your song and the search for other musician in order to build a collaborative video. Should be funny. To test it !
Facciamo musica ! We Music ( http://wemusic.veenue.com) è una semplice idea ma molto interessante. Creare un video musicale in collaborazione con vari musicisti in giro per il mondo.
Il funzionamento è semplice.
Registrate un video con la vostra canzone (suonatela live naturalmente) e poi cercate altri musicisti che possono concorrere al vostro pezzo aggiungendo audio e video.
Beh alla fine il risultato non deve essere male ... da provare !

8Tracks - Radio and Mix created by you


8Tracks (http://8tracks.com) is a simple and fast way to create or select your preferred mix or playlist created by you or other users that love music and like to listen online music. You can select style you want or create your own. I works also on mobile iOS and Android (you need a 3G connection in order to listen to so check you mobile provide account). It's a legal solution that works under Digital Millennium Copyright Act of 1998 copyright rules.

8Tracks (http://8tracks.com) è il modo più sempice per creare o scegliere tra migliaia di mix o di playlist create da utenti che conoscono e amano la musica e poterle ascoltare in streaming.
Potrete scegliere tra molti stili ma la cosa interessante è che potete creare voi stessi i vostri mix o playlist, quasi come creare un vostro palinsesto radio.
Il tutto funziona anche su mobile iOS e Android (naturalmente dovete avere un account internet preferibilmente 3G e quindi attenzione all'utilizzo che ne fate e ai costi se non avete formule flat).
Perfettamente legale il sistema opera secondo le regole webcasting definite dal Digital Millennium Copyright Act of 1998.