Controller audio

Forse una delle richieste più frequenti! Come creare un piccolo juke-box che consenta agli utenti di scegliere quando arrestare la musica? Nulla di più semplice! Basta seguire alcuni elementari passaggi

1- La prima operazione da compiere è creare due diverse pagine html (potrebbero essere anche più numerose, laddove vi foste impratichiti e voleste aggiungere più canzoni), l'una contenente il file audio, l'altra destinata ad ospitare l'opzione di stop. Per comodità (ed anche perché, volendo, potete scaricare il mio esempio precostituito) potete chiamarli midi_si.html e midi_no.html (ovviamente il nome è indicativo, ma se decideste di cambiarlo, dovrete ovviamente modificarlo rispetto alle indicazioni del tutorial)

2- Nella pagina contenente il file musicale (midi_si.html), incollate queste istruzioni:

Nella pagina stop (midi_no.html), incollate queste istruzioni:

 

3- A questo punto, per inserire il juke-box  nel vostro spazio web, o nel vostro blog, non vi resta che copiare il codice del frame, che richiamerà lo spazio web in cui avrete uploadato le due pagine:

Le indicazioni offerte sono ovviamente GENERICHE! Questo vuol dire che gli spazi relativi al file musicale ed al source del frame devono essere sostituiti con i VOSTRI indirizzi di rete.

Posted on 28 Oct 2007 by Sar@

Trasparenze nei layers

Ecco uno degli effetti senz’altro più ricercati – anche perché migliora molto l’impatto visivo di una qualunque creazione grafica (ma funziona solo con I.E.). In sostanza, come nel precedente, si tratta solo di applicare una specifica caratteristica allo style del div. Nella fattispecie il filtro che ci serve è questo:


filter: chroma(color=#013497)" allowTransparency ( Il colore che ho indicato è puramente dimostrativo!)


In breve: questa piccola striscia di testo ci dice che nel div ogni parte colorata secondo il valore ‘#013497’ diventerà trasparente per la presenza di questo filtro. A questo punto basta sostituire, nelle ipotetiche caratteristiche selezionate per il div (Che immaginiamo sia identificato come ‘uno' nel nostro progetto )



#uno {
scrollbar-face-color:#650B38;
scrollbar-arrow-color:#650B38;
scrollbar-track-color:#650B38;
scrollbar-shadow-color:#000000;
scrollbar-highlight-color:#000000;
scrollbar-3dlight-color:#650B38;
scrollbar-darkshadow-color:#650B38;
}



il valore ‘#650B38' con ‘#013497' ed otterremo l’effetto previsto (Volendo lo si può, ovviamente, estendere a parti diverse, secondo l’effetto che si vuole ottenere, facendo ben attenzione, per altro, quello stesso valore non identifichi sezioni che debbono restare ben in vista. Sicché il mio consiglio è quello di scegliere un colore ASSURDO, che non usereste in nessun punto del vostro template :P)

Posted on 28 Oct 2007 by Sar@

Trasparenze e opacità

Molto spesso dopo aver compilato la base grafica su cui costruire il template, ci si accorge di aver scelto colori troppo sgargianti per eventuali tabulazioni o, in ogni caso, stridenti con l’ insieme. Se si ritiene sia sufficiente un mezzo tono per evitare di dover recuperare tutto il lavoro, si può rimediare con un semplice filtro da apporre come caratteristica di stile del div. Ovvero inquadrarlo entro il

etc. etc. Non è il delirio di un sadico, non temete ! Applicando questo filtro:

filter: Alpha(Opacity=50, FinishOpacity=0)

e giocando sul valore di opacità, sarà possibile incidere sul tono finale assunto dalla sezione, coinvolgendo anche eventuali scrolls. Volendo lo si può usare anche per rendere trasparenti queste ultime, ma in questo caso bisogna calcolare che l’ intera sezione risulterà meno nitida. Essendomi trovata in questa situazione più di una volta, ho risolto senza problemi aumentando di mezzo tono il valore del codice colore del testo ed escludendo pertanto danni di leggibilità. In ogni caso se mirate solo a rendere trasparenti le scrolls vi consiglio di passare direttamente alla seconda lezione. E’ un metodo più sicuro! Sempre giocando con i filtri potete dare al layer un piacevole effetto sfocato, applicando un filtro di blur, ovvero una variabile del precedente:

filter: Alpha(Opacity=80) Blur(Add=0, Direction=90, Strength=2)

Ovviamente anche in questo caso i valori sono indicative e del tutto variabili. Questi stessi filtri, se assegnati ad altre sezioni (ad esempio ai links, come caratteristica dell’ a:hover) consentono piacevoli variazioni grafiche.

Posted on 28 Oct 2007 by Sar@

Inserimento immagini

Piuttosto seccata (lo ammetto!) d'essere continuamente sollecitata da richieste abbastanza puerili come questa, ho deciso di perdere un po' di tempo, sperando vi decidiate una volta per tutte a non farlo perdere più a me. Qualunque editor html, anche elementare come front page, vi offre infatti il modo di capire perfettamente come si inseriscano le immagini (basta guardiate, molto semplicemente, l'html della pagina che avete composto in normal mode).

L'istruzione più elementare è questa: <IMG SRC="image.gif"> in cui SRC (search) indica ovviamente quel che dovete inserire. IMG (image), specifica la tipologia di quel che dovete inserire.

Se dovete esportare l'immagine, invece (ad esempio sul vostro blog, dallo spazio in cui essa è conservata), l'istruzione deve presentare anche l'indirizzo html, ergo sarà così: <IMG SRC="http://www.yoursite.net/image.gif">

Se desiderate l'immagine in posizione centrale, l'istruzione sarà: <center><IMG SRC="http://www.yoursite.net/image.gif"></center>

Tag dell'immagine:

L'immagine, al pari di ogni altro elemento web, presenta dei tags specifici, che devono essere curati con attenzione, al fine di una migliore resa. L'istruzione più completa in assoluto avrà questa forma:

<IMG SRC="http://www.yoursite.net/image.gif" WIDTH="..." HEIGHT="..." BORDER="0" ALT="your text" ALIGN="right" HSPACE="6" VSPACE="6"> o <IMG SRC="http://www.yoursite.net/image.gif" WIDTH="..." HEIGHT="..." BORDER="0" ALT="your text" ALIGN="left" HSPACE="6" VSPACE="6"> o <IMG SRC="http://www.yoursite.net/image.gif" WIDTH="..." HEIGHT="..." BORDER="0" ALT="your text" ALIGN="center" HSPACE="6" VSPACE="6">

Nel dettaglio:
WIDTH= indica la larghezza. Deve essere espressa in pixel
HEIGHT= indica l' altezza. Deve essere espressa in pixel
BORDER= indica lo spessore del bordo assegnato all' immagine. Potete settarne il colore nello stile
ALT= riporta il testo che intendete assegnare all' immagine
ALIGN= indica l' allineamento dell' immagine. I valori sono:

left
right
top
texttop
middle
absmiddle
baseline
bottom
absbottom

HSPACE e VSPACE= indicano la distanza verticale ed orizzontale da altra grafica

... Ed è tutto. ATTENZIONE: sottrarre immagini dallo spazio altrui e postarle nel proprio rappresenta una delle più GRAVI violazioni della netiquette, oltre ad un atto stupido e scorretto. Perciò, ora che sapete come fare, preoccupatevi SEMPRE e SOLO di trovare da soli un host.
 

Posted on 28 Oct 2007 by Sar@

Basic css

Cominciamo col dare una vaga idea di cosa sono e del perché riscuotono grande successo i fogli di stile (CSS). Il foglio di stile a cascata, Cascading Style Sheet, appunto, altro non è che una semplice lista di istruzioni per la formattazione (aspetto grafico) del testo o decorazione delle immagini, scorporato - in linea di massima, salvo alcuni rari casi in cui lo script (parte del codice HTML, Java o qualsiasi altro linguaggio si usi per una pagina web) lo richiede inserito fra i tag <body> e </body> - dai contenuti della pagina, in modo da accedervi con più semplicità ed immediatezza. Il perché questo strumento sia divenuto asse portante della programmazione web è di facile intuizione: essendo una specie di puntatore a tutti gli oggetti di cui è il riferimento - es.: il CSS

h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: xx-small; font-style: italic; font-variant: normal; text-transform: capitalize; color: #999999; text-align: center;
}

farà in modo che ogni volta che nel codice html si incontrerà la coppia di tag <h1>...</h1> il testo fra essi contenuto venga formattato secondo i parametri impostati nel foglio di stile. E' facile capire, quindi, come questo permetta di velocizzare di molto le modifiche ad una pagina HTML, modifiche che, in caso non si fossero utilizzati i fogli di stile avrebbe richiesto molto più tempo.

A questo punto si immagini di aver creato un sito di notevoli dimensioni, con un numero di pagine elevato, tutte formattate allo stesso modo. E' semplice intuire come ognuna di queste pagine abbia dei fogli di stile praticamente identici a quelli di tutte le altre, e che, qualora si voglia modificare qualcosa occorra ripetere l'operazione per tutte le pagine a meno che non si ricorra a qualche stratagemma. Il trucco in questione è, banalmente, l'utilizzo di un foglio di stile esterno che verrà poi linkato a tutte le pagine. la riga di codice che si utilizza per collegare la pagina al foglio di stile è

<link rel=stylesheet href="http://yourspace.ext/style.css" type="text/css">

in cui viene chiarito al browser che:
1. si fa riferimento ad un file esterno al documento HTML, ma che ha, comunque, la possibilità di modificarlo (link)
2. il file cui si fa riferimento è un foglio di stile (rel=stylesheet)
3. si fornisce al browser l'indirizzo web del foglio di style (href="http://tuospazio.est/tuofogliodistile.css")
4. il tipo di foglio di stile utilizzato (type="text/css").

Per creare un foglio di stile esterno si proceda nel seguente modo: si apra notepad o qualsiasi altro editor di testo e si inseriscano, solo, i fogli di stile, senza i tag <style> e </style> - es.:

body {
background-color: #FFFFFF;
scrollbar-base-color:#FFFFFF;
}
.Blog {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #000000;
background-color: #FFFFFF;
background-image: url(http://tuospazio.est/stringasfondo.est);
background-repeat: repeat;
text-align: justify;
padding: 5px;
list-style-type: square;
cursor: text;
}
.Other {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #000000;
background-color: #FFFFFF;
background-image: url(http://tuospazio.est/stringasfondo1.est);
text-align: justify;
padding: 4px;
list-style-type: square;
cursor: text;
} -

e si salvi il file come "mycss.css", stando bene attenti a impostare nella casella "Salva come" di notepad l'opzione "tutti i file", altrimenti avrete un'estensione fantasma che renderà inutilizzabile il vostro lavoro. Fatto ciò avrete creato il vostro primo foglio di stile esterno che potrete editare con qualsiasi editor di testi, oppure con programmi per la programmazione web quali Dreamweaver e Frontpage.
 

Posted on 28 Oct 2007 by Sar@

<< Previous 1 2 3 4 Next >>

Content Management Powered by CuteNews

<< go back



Disclaimer

All bands, actors, anime, manga and video game related materials depicted on Graficamente belongs to their respective owners and creators. No copyright infringment is intended. They are used for educational, personal and non-profit purposes only. Graficamente is in no way associated with these parties.
All original materials (content, design and coding) belongs to Sar@, or otherwise stated. No parts of Graficamente may be reproduced in part or in whole without written permission. The layouts offered by this site may be used under the conditions written in the Terms of Service.
Questo sito non rappresenta una testata giornalistica in quanto viene aggiornato senza alcuna periodicità. Non può pertanto considerarsi un prodotto editoriale ai sensi della legge n. 62 del 7.03.2001.



home page