Entra 

e poi clicca su...

"CONFERMA CLICK"

Mi raccomando!!!

Coccinella - Spot Band
(testo e musica: Ghigo-Soffici)
dal CD "Marco M ariani presenta: I Magnifici 8"

 clicca sulla nota

Il vero esperto è Bruno per questo rimando tutti al suo sito dove potrete trovare ulteriori spiegazioni. Per adesso mi limito a fare questa citazione. Il suo sito è:

http://spaces.msn.com/members/bberti

Citazione

MUSICA sul blog

Premetto che non è tutto oro quello che luccica. Ci sono dei limiti all'uso della musica in quanto non era prevista dai programmatori e perciò si procede per trucchi. La procedura che segue vale per Internet Explorer, chi ha un browser diverso dovrà un po' interpretare la procedura, ma otterrà gli stessi risultati.

La prima cosa che serve è un potenziamento degli strumenti del nostro browser: dobbiamo aggiungere qualcosa a Internet explorer che ci permetterà non solo di inserire musica, ma anche di formattare meglio il nostro testo. Questo qualcosa si chiama Edit It! e questa è la procedura per fare questo.

1) col pulsante destro del mouse cliccate su questo link http://www.siteexperts.com/blogging/editit.htm e dal menù che appare scegliete Apri in un'altra finestra
2) si aprirà una nuova sessione di Internet Explorer con una semplice pagina dove c'è un link che si chiama Edit It! cliccateci sopra col pulsante destro del mouse e dal menu scegliete Aggiungi a preferiti...
3) Se appare un avviso di protezione che vi chiede di continuare, scegliete Sì.
4) Nella finestra dei preferiti scegliete Collegamenti
5) A questo punto nella barra dei Collegamenti ci sarà una voce in più: Edit It!
6) Se non sapete che cos'è o dov'è la barra Collegamenti verificate se a destra di dove inserite gli indirizzi dei siti web appare in grigio la scritta Collegamenti
7) Se non la trovate andate nel menu Visualizza->Barre degli strumenti e verificate che a fianco di Collegamenti ci sia il check di visualizzazione
8) Trovata la barra, essendo questa generalmente confinata all'estrema destra, dovreste vedere al suo fianco una doppia freccina cliccando sulla quale appare una lista di link tra cui anche il nostro Edit It!
9) Essendo questo link essenziale per il futuro, dobbiamo fare in modo che sia anche comodo. Andate sul menu Preferiti->Organizza Preferiti...
10) Cliccate su Collegamenti
11) Cliccate e tenete premuto Edit It! trascinatelo lentamente fino a farlo diventare il primo della lista. Attenzione a non farlo uscire dalla cartella Collegamenti. Se vi succede ritrascinatelo dentro. Chiudete.
12) Se, a questo punto non vedete apparire Edit It! sulla barra Collegamenti, andate col mouse dove si vedono 4 puntini verticali subito a sinistra della scritta Collegamenti. Il vostro mouse cambia aspetto diventando una doppia freccia orizzontale. Cliccate e, tenendo premuto, trascinate la barra a sinistra fino a far apparire Edit It!

Per il momento mi fermo qui (anche perché è ora di pranzo).
Essendo questa parte essenziale (tranquilli la dovete fare solo una volta) è inutile che prosegua oltre. Quando avrete portato a termine questa operazione cominceremo a divertirci. Se avete problemi non esitate a contattarmi su questo blog; ci sono tutti i giorni dalle 9:00 alle 18:00. Consiglio di installare Edit It! anche a coloro che non sono interessati alla musica perché aumenta le potenzialità dell'editor del blog.

MUSICA sul blog. Seconda parte

Avete installato Edit It! ? Allora cominciamo a fare sul serio.

Prima di partire vi consiglio di aprire il blocco note del vostro p.c. e scriverci ESATTAMENTE questa riga (attenzione che c'è una maiuscola):

<P><IMG height=0 loop=infinite dynsrc=http://www.provincia.ps.it/privati/bberti/behaim/6lutepcsRin.mid width=0 border=0></P>

salvate il file con un nome a piacere in un posto del vostro computer dove potete ritrovarlo facilmente (anche sul desktop).

1) Iniziate un nuovo intervento sul vostro blog e mettete il titolo che vi pare.

2) Cliccate su Edit It! nella barra Collegamenti

3) Ta Da! Qualcosa è cambiato. Adesso nella Rich Text Bar (quella dove tra l'altro scegliete le faccine) adesso appaiono due voci in più: Stile carattere e Dimensione carattere dove potete scegliere le dimensioni e l'aspetto del vostro testo, mentre in basso (subito sopra Aggiungi foto si è inserita una casellina che dice Utilizza HTML per creare la tua pagina . Per il momento ignoriamola.

4) Scrivete e sbizzarritevi col testo, evitando in questa fase di apprendimento di fare i soliti copia/incolla ai quali siete abituati, soprattutto con le immagini, per non incasinarvi la vita prima di esservi impratichiti. Limitatevi a giocare con quello che vi offre la Rich Text Bar (faccine comprese).

5) Quando avete finito cliccate sulla casellina Utilizza HTML... e NON SPAVENTATEVI!! Vedrete una gran confusione (almeno quelli che non hanno confidenza con il linguaggio HTML).

6) Non toccate niente in questa fase. Andate in fondo alla pagina e copiateci la riga di codice che vi ho dato all'inizio e che avete salvato su file col blocco note.

7) Cliccate nuovamente sulla casellina HTML e tutto torna come prima e dopo un attimo già dovreste sentire la mia musica. Se non la sentite ritornate in modalità HTML e verificate di avere scritto tutto correttamente (maiuscole, minuscole, spazi...)

8) Potete pubblicare l'intervento.

La musica che ascoltate è un brano che si chiama 6lutepcsRin.mid ed è presente in un mio sito all'indirizzo indicato nel parametro dynsrc del codice e vi serve da test per capire bene il processo. Per sostituire questo brano con uno di vostra scelta dovrete conoscere esattamente l'indirizzo internet (completo di nome e suffisso del brano) dove questo si trova, sostituendolo a quello dell'esempio che vi ho dato. La riga dovrà diventare così:
<P><IMG height=0 loop=infinite dynsrc=indirizzoVostroBrano width=0 border=0></P>
Qui torna utile il codice che vi ho fatto salvare col blocco note: lo potete riprendere in qualunque momento sostituendo solo l'indirizzo del brano, senza riscriverlo tutto. Poi copiate il tutto e lo incollate nel vostro blog

Come i più attenti avranno notato la musica viene inserita in un intervento diventando così la colonna sonora di quell'intervento e non del vostro intero blog. Questo però non è grave perché, a meno che non pensiate di mettere altra musica negli interventi successivi, quel brano continuerà ad essere eseguito tutti i giorni finché l'intervento non verrà cancellato. Inoltre verrà ripetuto all'infinito (ricominciando automaticamente da capo) finché non decidete di chiudere la sessione o di sparare sulle casse. Oppure (e qui sono le dolenti note) finché non decidete di aprire un commento. Se decidete di leggere i commenti la musica cessa; se volete riascoltarla dovrete fare necessariamente l'aggiornamento della pagina.

Potete mettere qualunque formato di file musicale, ma fate ATTENZIONE AL COPYRIGHT!! La pirateria musicale su internet è seriamente combattuta, molto più delle immagini. Sinceratevi sempre che non ci siano vincoli DELL'AUTORE prima di usare un brano. Vi consiglio di usare esclusivamente file MIDI. Per due motivi: primo perché sono molto leggeri e non appesantiscono quindi il vostro blog (già bastano le immagini) e, secondo, i diritti sui file midi sono meno vincolanti e si trovano un'infinità di siti che ve li danno gratuitamente.

Veniamo adesso a coloro che utilizzano groups.msn per editare i propri interventi e non hanno bisogno di Edit It!
Quando hanno terminato di scrivere il proprio testo dovranno usare la stessa procedura, oppure la casellina Utilizza editor di testo normale, per inserire la riga di codice con la musica. Deselezionando la casellina torneranno in modalità di scrittura. Per portare tutto sul blog sanno già come fare; dovranno solo fare attenzione che veramente tutta la pagina sia stata selezionata prima di fare il copia/incolla. Un piccolo trattino alla fine segnalerà loro che anche il codice della musica (che non è normalmente visibile) è stato selezionato.

Ultima annotazione: se scrivete più interventi con più brani, verrà suonato sempre quello più recente.

Buona musica!

 

 

Dopo aver visto come inserire testo e immagini, non resta che affrontare l'argomento che da vita alla grande rete: i links o ancore, cioè quelle scritte interattive che se cliccate col mouse danno modo di saltare da una pagina all'altra o come spesso succede, da un intero sito all'altro. Sono proprio queste Ancore, o links ipertestuali, che hanno decretato il successo del web.

Aprite il vostro editor, qualunque esso sia, e richiamate la pagina che avevate creato, quella della lezione precedente per capirci. Posizionate il cursore nel punto esatto in cui dovrà essere inserita un'ancora, questo il TAG da adoperare:

<A> </A>

A come ancora... così da solo è inutilizzabile, ma vediamolo combinato con l'attributo: HREF per esempio.

HREF significa hypertext reference, indica che ciò che si trova fra le ancore di apertura e chiusura diventerà un collegamento ipertestuale, ovvero sarà richiamata un'altra pagina o un punto preciso della stessa pagina, quello specificato nell'attributo stesso.

Vediamo un esempio pratico, supponiamo che nella pagina web ci sia un link al mio sito: web-link.it (uno sito a caso tanto per cambiare :-) )
Sarà sufficiente specificarlo in questo modo:

<html>
<head>
</head>
<body>

<A HREF="http://web-link.it">Web-Link</A>

</body>
</html>

Notate la sintassi del comando, la parola web-link è l'unica cosa che si vedrà  sulla pagina, e si trova fra i due tags Ancora di cui il primo <A> ha l'attributo Href che indica quale URL valido richiamare nel momento in cui viene fatto clic sulla scritta, l'ultimo </A>  è la chiusura, da non dimenticare mai!

Potrei sostituire la scritta Web-Link con una qualsiasi altra frase, oppure adoperare delle immagini, il risultato sarebbe comunque lo stesso, tutto ciò che si trova fra i due tags ancora, se cliccato, porterebbe all'apertura del sito web-link.it perché è quello l'indirizzo specificato dopo HREF

Se io introducessi una immagine al posto della scritta, darei vita ad un processo chiamato nidificazione degli elementi (tags), cioè si possono inserire elementi html all'interno di altri elementi html, questo perché ogni elemento ha i suoi attributi e trovandosi all'interno di un altro elemento eredita  eventuali attributi dell'elemento che lo incorpora.

<html>
<head>
</head>
<body>

<A HREF="http://web-link.it"><img src="weblink.gif" width="64" height="128" border="0" alt="weblink"></A>

</body>
</html>

Fra le virgolette dell'attributo HREF oltre agli indirizzi URL validi come quello dell'esempio <A HREF="http://...">, è possibile specificare anche :

<A HREF="ftp://...">
<A HREF="mailto:...">
<A HREF="news:...">
<A HREF="nomefile.zip">
<A HREF="nomepagina.html">

Che servono rispettivamente per:

<A HREF="ftp://...">
Collegamento ad un sito FTP.

<A HREF="mailto: nome@server">
Indirizzo di  posta elettronica per la spedizione di una e-mail all'indirizzo specificato, facendo uso del proprio programma di posta elettronica.

<A HREF="news:...">
Collegamento ad un gruppo di discussione (newsgroup Usenet).

<A HREF="nomefile.zip">
Scaricamento (download) di un file in formato compresso.

<A HREF="nomepagina.html">
Collegamento ad altra pagina all'interno della stessa cartella.

Ci sarebbero anche altre possibili forme di links quali: gopher, nntp, telnet, wais, newsrc; ma visto il loro raro utilizzo, ritengo che possano servire soltanto per creare confusione ad un principiante.

Attenzione, la pagina richiamata dal link andrà a sostituire la pagina richiamante, se non è questo l'effetto desiderato, è possibile aggiungere un attributo che specifichi dove aprire questa pagina, o meglio su quale finestra del browser di navigazione dovrà essere aperta. Vediamo come:

target="nome della finestra"

Se avete un sito strutturato con frames, cioè diversi riquadri finestre all'interno di una finestra principale, potete specificare il nome della finestra nella quale vedere il risultato del link, oppure fare in modo che se ne possa aprire una nuova adoperando la parola riservata: _blank. Vediamo un esempio completo:

<html>
<head>
</head>
<body>

<A HREF="http://web-link.it" target="_blank">Web-Link</A>

</body>
</html>

Una nuova finestra sarà aperta in modo da mantenere anche la vostra, quella dalla quale è stato possibile fare il clic sul link, per cui ci saranno due browser aperti uno con la vostra pagina e l'altro con la pagina associata al link.

A questo punto conoscete tutto ciò che serve per creare un sito, si ho detto sito e non più pagina web, infatti con l'inserimento del tag ANCORA è possibile passare da una pagina all'altra dando vita ad un vero e proprio sito: il vostro.

Sono ancora molte le cose da sapere per fare buoni  siti, ma già con questa terza lezione potete cominciare a fare qualcosa, dalla prossima torneremo sulla struttura, sul testo e sulle immagini aggiungendo alcuni particolari e precisazioni che vi serviranno soltanto se nel frattempo avrete cominciato a fare qualcosa di vostro.

Con questa lezione siete in grado di introdurre testi, immagini e links.
Nella prossima lezione , dedicata alla cosmesi del testo e a quei caratteri "speciali", vedremo alcuni accorgimenti per la sintassi e la manipolazione di questo.

 

 chicca chi è?

Mistero...ma non poi tanto....

potrebbe essere .... o

le piacerebbe essere?...

l'intrepida....Zia Caterina.... 

 

froufrou ...che sognava di essere...nel deserto......

 

o...Miss Universo!!!!

 

oppure...semplicemente....una  signora...ormai verso gli "anta" che ama mettere la sua faccia in involucri di altri?........

   

 

che ama scrivere

poesie

racconti

che ama "paciugare"

con le immagini

con i frattali

e  .........

che ha un sogno nel cassetto:

"suonare il sax in una band a New Orleans" ??!!!

Lezione della mia amica Chicca per realizzare frattali

 
 

 

...mi preme dire che non è una guida a Fractal Explorer ...che potete trovare forse in Internet... magari in inglese.... e non è nemmeno una copia di qualcosa trovato su internet ...(come insinua spesso  "La Signora")...ma semplicemente un farvi vedere come  di solito mi regolo io... nel "paciugare"....  paesaggi ...fantastici... e altro... quindi è un tutorial del tutto personale basato su quello che può essere utile a cotruire ...mettendoci "fantasia"....

 

....dicevamo... adesso abbiamo tutto quel che ci serve.... l'icona ( un disegno in bero) ... per aprire il programma la trovate all'interno della cartella  del programma stesso dove avete szippato tutti i files ...che  chiameremo per comodità  FE ....

 

e aprendo  il programma esso  si presenta così:

 

 

e dobbiamo cliccare su....

 

 

si apre una immagine sempre la stessa... e a questo punto clicchiamo sempre dalla barra del Menu'.. su Fractal:

 

 

e dopo aver  cliccato su Fractal ...clicchiamo su  Select (edit) fractal e si apre questa finestra:

 

 

... qui ci fermaimo un momento... come vedete ..la finestra è divisa in tre parti ...la prima a sinistra ci dice che abbiamo la pobbilità di lavorare in 3 modi:

1) Implemented  ( ci sono frattali già pronti di vari tipi) ed è quella con cui si apre la finestra...

2) User formula (usare le vostre formule.... che è il sistema che uso io... ma bisogna conoscere un po' di matematica o geometria frattale)

3) Sterlingware  ( ci sono formule molto interessanti già pronte che possono essere modificate senza particolari problemi)

 

... nella parte in centro.. della finestra abbiamo... la possibilità di modificare i parametri delle funzioni delle  formule....cambiare il filtro... cambiare i "limiti" del  filtro ... e cambiare il tipo di trasformazione.... cose che sembrano complicate...ma vedremo che non è così...

 

nella terza parte della finestra...abbiamo le coordinate cartesiane... la possibilità di mutare il numero delle iterazioni... modificare la rotazione (importante..scegliere la visuale che maggiormente ci piace...)  ...e anche l'anteprima del nostro frattale...

 

continua sotto...

 

...dicevamo...

...proviamo a cliccare  su  "User Formula" sempre dalla nostra finestra... e vedrete che è vuoto...

 

 

...adesso clicchiamo su... Sterlingware .... ed appare così:

 

 

...a sinistra abbiamo una serie di formule... io ho scelto la numero  03.... che mi appare in anteprima a destra in fondo... per il resto non ho cambiato nulla... e   nel Filter Properties ... c'è "none" ... e la casella delle trasformazioni non è attiva..come la casella del limite del Filtro.... adesso io... clicchero su Filter Properties ...sceglierò un tipo di filtro....e...

 

 

...come vedete ... ho scelto il filtro Dual Bubbles.... e si è attivata la casella di trasformazione e anche quella del limite del Filtro... provo a modificarle...

 

 

....vedete ho modificato il numero del limite del filtro e ho modificato il parametro di trasformazione e il frattale si è modificato.... ma ho ancora molte possibilità... posso cioè cambiare  le Funzioni dei parametri...

 

 

... se modifico la prima funzione si modifica anche il frattale... adesso modifico anche la seconda funzione:

 

 

anche stavolta il gfratatle si è modificato...ma non è finita qui...

continua sotto....

....se voglio cambiare ancora la trasformazione...

 

 

...a questo punto potrei ancora cambiare il filtro ... le funzioni e anche il limite del filtro... ma mi fermo qui e dico che questo frattale  mi va bene... per quello che voglio provare a realizzare...  allora clicco su  "Open as new" ...e ottengo questo... in nuova finestra...

 

 

a questo punto però... decido che non tutto il frattale mi va bene... ma solo una piccola parte...in alto a sinistra... ci passo sopra la punta ...cliccando col mouse destro...e seleziono quella parte... poi  clicco dentro due volte nella parte selezionata e... ottengo questo...

 

 

...e sono pronta a trasformarlo...in qualcosa d'altro...

continua sotto...

 

....dunque ...facendo in questo modo avete anche imparato a farvi dei frattali mica male... e proprio vostri... nel senso che li modificate fino a che non arriva quello che cercate...

.... per salvare i frattali basta andare dalla barra del menu'...su  File - Save  image ...... per modificare le dimensioni del frattale... sempre dalla barra del Menu' andare su Size... e scegliere la dimensione che vogliamo...

 

...dunque riprendo... l'immagine ultima...

 

 

...se voi cliccate sull'icona indicata,,, passate alla trasformazione in  3D ...o ai paesaggi... e quello che si presenta è questo:

 

 

...questa è la trasformazione  del mio fratatle in un terreno... che riprende in 3D la sua forma...

..adesso analizziamo questa nuova parte... cominciando dalla barra ...con le icone...

 

 

e poi dalla barra laterale..degli strumenti di ...."navigazione"... che sono divisi tra quelli che riguardano propriamente il terreno e quelli che riguardano la posizione di una "telecamera virtuale" ,,,che può ruotare ...zoommare ecc....

 

 

continua sotto...

 

 

...esaminiamo ora... la finestra relativa ...agli strumenti per la modifica ...dell'acqua.... (icona del pesce)... perchè da quella sono partita per realizzare il mio terreno...

 

 

...mi offre varie possibilità... come  modifcare il colore dell'acqua....( il colore si mantiene anche se inserisco una texture...)... diminuire o ingrandire la scala della texture.... diminuire o umentare ..l'altezza dell'acqua.... diminuire o aumentare il livello di trasparenza... aggiungere una "texture"... sia dalla libreria del programma... sia prendendola dal mio computer....

.. ... ho cominciato aprendo proprio questa finestra e ho alzato il livello dell'acqua...così:

 

 

poi ho cliccato su  Apply   per rendere effettivo il mutamento... quindi ho  usato lo strumento "ruota il terreno dal basso verso l'alto" per ruotarlo leggermente... ...così:

 

 

..adesso ...ho deciso di ingrandire ... il mio terreno.... e poi di girarlo ancora dal basso verso l'alto... così:

 

 

...a questo punto ... penso possa andare... devo occuparmi quindi ... del terreno... del suo colore e se voglio metterci una texture ...o usare quelle della libreria del programma...

 

continua sotto..

 

 

...prima di continuare... con la finestra del terreno... per  vedere come modificarlo... vi metto il link ad una cartella zippata ...con alcune texture che ho preparato ... e che potete salvare dopo averla szippata ...  sempre dentro alla cartella di FE..... potrete farvene anche voi di texture...usando i programmi per fare sfondi di cui abbiamo parlato... in precedenza... ricordando chedevo avere queste misure per non creare problemi... 200x200 ....

 

il link è questo:

 

http://mattiee.altervista.org/sfondi.rar

 

...per scaricarla cartella .. dovete portare il puntatore del mouse sul link , cliccare con la parte destra del mouse... e poi dalla finestra che si pare cliccare su "Salva Oggetto come..."... è un po' pesante perchè sono 53 sfondi... è circa 1,3 Mega....

 

..continua sotto...

 

 

 

...bene continuo... adesso che avete anche altre texture.. possiamo prendere in considerazioni le opzioni della finestra "Strumenti per la modifica del terreno" (icona con la chiave inglese...)

 

 

...esaminiamola insieme... abbiamo l'anteprima... la finestra dell'origine della luce... la finestra  con le coordinate del piano...il puntino verde è il nostro terreno, che possiamo spostare anche da lì.... poi abbiamo  i parametri della luce del terreno... e poi la scala della texture... e la possibilità  di usare texture dalla libreria del programma o dal nostro computer...

vediamo io cosa ho fatto...

 

 

...ho scelto una texture dalla libreria del programma e ho cliccato OK... ho scelto poi una luce piu' chiara per l'ambiente:

 

 

...ho scelto una luce piu' chiara anche per il terreno...

 

 

...e questo è il risultato...

 

 

...non mi piaceva allora ho scelto ...una texture dal mio Computer nella caretlla Sfondi  di cui vi ho dato il link per lo scaricamento...

 

conntinua sotto...

 

...

 

 

...non mi piaceva neppure quella e ne ho scelta un'altra modificando anche alcune luci...:

 

 

...non contenta ne ho scelta un'altra ancora...

 

continua sotto...

 

...finalmente ho deciso che questa texture scelta dalla cartelli sfondi sul computer...poteva andare bene...

 

 

..adesso dobbiamo occuparci dell'acqua...vedere se vogliamo dargli una texture e un colore... apriamo quindi la finestra che ha come icona il pesce...

 

 

.... ho scelto una texture dalla libreria del programma... ho cambiato il colore... dell'acqua...(..io non uso fare come prospettiva vorrebbe ... la linea  dell'orizzonte piu' scura...ma faccio il contrario...graficamente rende effetti migliori..perchè sfalsa il piano....)... ho azzerato la scala  ...della texture.... e clicco su "Apply" per rendere effettivo il cambiamento...

...si presenta così...

 

 

...non ci resta che occuparci del cielo....apro quindi la finestra che corrisponde all'icona dell'uccellino...e ...

 

 

...anche qui ho molte possibilità... molte ormai le conosciamo... come le texture e i colori... ma qui c'è una possibilità in piu' molto interessante...se volete rendere... sfumato e magico il tutto... l'uso dello strumento "nebbia"...

...ho comiciato col scegliere una texture dalla cartella sfondi del computer e a cambiare i colori...  e poi ho cliccato "Apply"...

 

 

..ecco ...come si presenta...:

 

 

...ma non è finita...

continua sotto...

 

 

...a dir la verità... la colorazione del terreno...non mi soddisfa fino in fondo vorrei qualcosa di piu'..."magico" e inusuale.... allora faccio...così... dalla barra del Menu' clicco su OBject..e poi sulla voce: Vertical Palette...e si apre questa fimestra.... che mi permette di scegliere... alcune combinazioni di luci... già costruite da mescolare alle mie... spunto il quadratino di fianco a  Enable. (1).. e poi clicco sulla icona con del giallo (2) ....

 

 

..e scelgo la tipologia di colore che vedete...clicco su "Apply".... e....

 

 

e questo è il risultato.... se notate ...il terreno l'ho leggermente girato... da destra verso sinistra....

....

continua sotto

...sempre partendo ...dal terreno iniziale... e modificando l'altezza dell'acqua...e le texture del terreno...e del cielo . e il colore dell'acqua .. ho ottenuto questo:

 

 

...che poi ho passato... in Photoshop .... col filtro Kyoto ... e ho ottenuto dopo varie prove ...questa soluzione che mia ha soddisfatto...

 

 

.... ma adesso ...

 

continuo... sotto....

 

 

...a questo punto ci rimangono da fare due cose importanti analizzare le possibilità che ci offrono .... gli strumenti   "Options"  e  "Terrain texture".... che servono a modificare alcuni elementi del terreno o della posizione dell'immagine nello Spazio...

.....cominciamo con l'analizzare  cosa c'è all'interno di  "Options".....

 

 

...le funzioni a cui ho inserito di fianco una riga rossa ...sono quelle che ci servono e che modificano in maniera evidente ... la nostra  immagine... le altre ...non sono per ora importanti...

...osserviamo che sono;

FILL  (modalità "riempimento" che è quella di partenza)....

LINES (modalità che permette di vedere la struttura  dell'imamgine in lineee) ...

POINTS ....(modalità che permette di appiattire...l'immagine a semplici punti sul piano).... poi abbiamo due funzioni... molto interessanti:

SMOOTH  ...che significherebbe rendere..."liscio"... il terreno... e

BLUR ..che in questo caso significa "confondere...o rendere meno evidenti gli spigoli di una figura"...

...cominceremo con l'analizzare...le possibilità che ci offre la funzione

 

SMOOTH... che come vedete è posizionata di solito su : Log10   ...proviamo ora ad osservare cosa succede se la  spunto le altre possibilità... ad esempio ... Ln

 

.... osservo che il terreno ...si è alzato.... non è piu' "liscio" ...come prima...

...spunto ora  Log2   ...

 

 

la dimensione aumenta notevolmente... spunto ora  Sqrt...

 

 

la dimensione si appiattisce un po.... e nello stesso tempo... evidenzia maggiormente il piano del terreno...  adesso spunto None ....

 

 

...come  vedete... la dimensione del terreno è aumentata moltissimo....

... di solito queste porprietà di aumentare o diminuire le dimensioni del terreno servono.. per ottenere effetti particolari che vedremo in seguito...

 

continua sotto...

 

 

  

...prendiamo ora in considerazione la possibilità della funzione ...Blur

 

 

...osservate che di slito è spuntato  ...None  che la situazione "normale... vediamo cosa succede se...spunto Highest

 

...il terreno perde le sue "angolosità" e si "confonde o mescola" ... diventando meno "appuntito"... proviamo ora a spuntare... High

 

 

...la situazione non cambia di molto.... vi è solo una maggiore mescolanza...della texture... come non cambia di molto nememno attivando Small...

 

...vi è soltanto un ritorno minimo ad un maggiore  "altezza"  del terreno ....

 

 

 

...è  sparito... il cielo e anche l'acqua... praticamente  sono spariti gli elementi di fondo... ed è rimasto il terreno che ha assunto  la particolarità di essere compatto e anche piu' appuntito....

... questa possibilità è molto interesante da usare... se io  ho una parte di terreno maggiore rispetto agli altri elementi... ma lo vedremo in seguito.... ...adesso spuntiamo la funzione ... POINTS

 

...abbiamo un effetto particolare.. spariti gle elementi di fondo... (cielo e acqua).....il terreno ... è diventato quasi piatto ..e formato da tanti punti.... a volte questa funzione produce effetti molto inetressanti soprattutto se ... prima si modifica il colore del fondo...così:

 

...se io scelgo un colore sempre scuro ma che ad esempio sia vicino al blu ottengo questo effetto...

...è da tener presente che:

IL COLORE DI FONDO NON E' VISIBILE SE IL FONDO è OCCUPATO ANCHE DA CIELO E ACQUA.... E' VISIBILE SOLTANTO NELLE MODALITA'  LINES E POINTS...

 

continuia sotto...

 

...esaminiamo ora... la voce  "Terrain texture" e le sue funzioni.... prenderemo in esame solo quelle con riga rossa a fianco ..le altre per ora le lasciamo stare....

come vedete quando apro ... è spuntata la funzione  Modulate ...che è quella che si usa di solito...

 

 

...spuntando la funzione  DECAL ... schiarisco la texture del terreno...

...spuntando la funzione  BLEND ...scurisco la texture del terreno...

...vediamo ora cosa succede proseguendo verso le funzoni di  Gen mode ... quando apriamo è spunata  Object lenear ...che è quella che si usa di solito... ma vediamo cosa succede se spunto ... Sphere map

...come vedete...la texture si compatta e perde i propri contorni... diventando piu' "arrotondata"... questa funzione è molto usata e di notevole affetto..quando la texture riproduce un disegno... perchè viene visualizzato ... coeme anche nella funzione

Eye linear ....

 

 

...continua sotto....

 

 

....vi inserisco alcune  cosette fatte in assenza di luce..

e poi continuo.....

 

 

 

 

 

 

 

 

 

 

 

 

 

Lezioni di informatica

lezioni di Informatica 

Leggi trascrivi ed impara

Abbiamo visto nella lezione precedente, come creare la nostra prima pagina web, abbiamo inserito anche del testo, ma in una "bella" pagina web che si rispetti non possono mancare le immagini, ed è proprio di queste che ci occuperemo in questa lezione.

Aprite il vostro editor, qualunque esso sia, e richiamate la pagina che avevate creato, quella della lezione precedente per capirci. Posizionate il cursore nel punto in cui dovrà essere inserita l'immagine, questo il TAG o elemento, da adoperare:

<img src="xxxxxxxxx.yyy">

Dove xxxxxxxxxxx è il nome della vostra immagine e yyy la sua estensione. Le immagini consentite dal linguaggio html sono .gif .jpg e .png

Si adoperano quelle di tipo gif quando servono immagini animate o che abbiano delle trasparenze (quelle che lasciano vedere lo sfondo), mentre per tutti gli altri casi è preferibile adoperare quelle di tipo jpg essendo questo un formato compresso, risulta molto più veloce da caricare; un aspetto quest'ultimo da non trascurare mai quando si adoperano immagini. Ricordatevi che dimensioni esagerate significa anche peso esagerato; sulla rete un'immagine da 100 Kb spesso induce il visitatore ad abbandonare il sito prima ancora che questa sia stata completamente visualizzata, fate dunque in modo di evitarlo nel modo più assoluto, ed anzi, al contrario, preoccupatevi che queste siano le più "leggere possibili". Il formato .png nato ultimamente più per problemi legali che non per reali esigenze tecniche, è adoperato molto raramente in quanto non risulta poi così "ottimale", ma questo è un mio modesto parere per altro molto personale.:-)

Detto questo, passiamo ad inserire la nostra immagine. Supponiamo che questa si chiami web-link.gif, sarà inserita nel listato in questa maniera:

<html>
<head>
</head>
<body>
<p>Questa è la mia prima pagina web </p>

<img src="weblink.gif">

</body>
</html>

Notate la sintassi del comando img che è leggermente diversa da quella adoperata per inserire il testo con <p>, infatti il tag per le immagini non ha il relativo tag di chiusura, quindi non serve mettere </img>. Noterete anche che dopo la parola chiave: img, che indica appunto "immagine", c'è un: "src" che significa: source, sorgente, cioè quale immagine deve essere visualizzata. Questo nome va inserito all'interno dei doppi apici, ed è praticamente il nome dell'immagine stessa. Tutto chiaro?

Perfetto, se adesso salvate il vostro file sovvrascrivendo quello che avevate richiamato, e lo andate poi a visualizzare, noterete che l'immagine non c'è; o meglio c'è qualcosa di nuovo ma non si vede. Come mai? Semplice, vi serve un'immagine che si chiami "web-link.gif" e che si trovi nella stessa cartella dove si trova il file html, cioè questo che avete appena modificato e salvato.

A questo punto vi consiglio di lasciare perdere l'immagine web-link.gif ; procuratevi voi una qualsiasi immagine, quella che preferite a patto che sia in uno dei due formati gif o jpg, mettetela nella stessa cartella dove avete il file html e cambiate il nome all'interno di SRC=" " inserendo il nome della vostra immagine, fatto ? Adesso portatevi una riga sotto il tag servito per inserire l'immagine e scrivete: La mia prima pagina web ha finalmente anche la sua prima immagine.

Se avete fatto tutto quanto correttamente, la vostra pagina comincia a prendere consistenza, con la stessa procedura potete inserire tutti i testi e le immagini che vorrete, ricordandovi sempre di non superare mai certe dimensioni. Tante piccole immagini vengono sommate e potrebbero creare lo stesso problema di una sola immagine da molti  kb. Per evitare questo conviene suddividere in più pagine i documenti lunghi o ricchi di fotografie.

Prima di proseguire vediamo cosa potremo aggiungere al tag: <img src="weblink.gif">

Intanto se la nostra fotografia non si trovasse nella stessa cartella dove c'è il file che la richiama, dovremo necessariamente farla precedere dal "path" cioè  il percorso che specifica appunto la sua posizione, questo potrebbe essere anche un URL valido, cioè un indirizzo di un sito Internet che la contiene, l'immagine in questo caso sarà visibile solo nel caso in cui siate collegati alla rete.

Questi alcuni probabili validi percorsi:

<img src="nome_cartella/weblink.gif">
<img src="http://web-link.it/weblink.gif">
<img src="../nome_cartella/weblink.gif">

Se specifichiamo le dimensioni dell'immagine, aiuteremo il browser a visualizzare tutta la pagina con molta più rapidità, per cui sarebbe opportuno inserire sempre queste informazioni. Per farlo si adoperano i due termini in lingua inglese per larghezza e altezza:

<img src="weblink.gif" width="64" height="128">

I numeri 64 e 128 sono pixel, l'unità di misura dell'immagine stessa, rispettivamente: width per la larghezza, mentre height per l'altezza. E' anche possibile specificare se l'immagine deve avere un bordo e di quale spessore; per ottenere questo si adopera l'attributo: border dove è ammesso anche il valore zero nel caso in cui non si volesse alcun bordo.

<img src="weblink.gif" width="64" height="128" border="0">

Avrete certamente notato che tutti i vari attributi restano all'interno delle parentesi angolari, <queste> e potrebbero essere messi anche in ordine diverso da quello che ho adoperato io purché ne sia rispettata la corretta sintassi, e per sintassi intendo il segno di = uguale e le virgolette ", anzi i doppi apici". Ci sono poi molti altri attributi che potrebbero essere inseriti allo stesso modo, vi elenco quelli che a mio avviso si adoperano di più, rimandandovi alla  guida HTML nel caso si volesse conoscere l'elenco completo

alt = nome dell'immagine. Questo nome viene visualizzato passando sull'immagine stessa con il puntatore del mouse.

align = Allineamento dell'immagine: destro, sinistro, nel mezzo, sopra, sotto. Tutti questi termini vanno scritti con l'equivalente termine in lingua inglese: right, left, middle, top, bottom.

hspace = Spazio laterale destro e sinistro dall'eventuale testo, da un'altra immagine o dal bordo di una tabella se inserita al suo interno. Questo valore è espresso in pixel.

vspace = Spazio laterale sopra sotto dall'eventuale testo, da un'altra immagine o dal bordo si una tabella se inserita al suo interno. Questo valore è espresso in pixel.

Gli attributi inseribili all'interno del tag IMG sono molti di più, ma visto il loro utilizzo e considerato che queste lezioni sono destinate ai principianti, credo che quelli citati siano più che sufficienti per coprire la maggior parte delle necessità.

Questo un esempio di un richiamo ad un'immagine adoperando tutti gli attributi finora descritti.

<img src="weblink.gif" width="64" height="128" border="0" alt="weblink tutto per la tua pagina web" align="left" hspace="20" vspace="30">

Da notare che fra un attributo e l'altro si lascia uno spazio vuoto.

Nota: il nome dell'immagine deve essere scritto esattamente come è, rispettando cioè eventuali maiuscole/minuscole/spazi, questo  perché a differenza di windows che non fa distinzione alcuna, una volta trasferito il lavoro sul server l'immagine di nome Web-link.gif è considerata un'immagine diversa dalla stessa immagine che si chiamasse invece WEB-link.gif (differenza dovuta alle maiuscole)  

Anche per questa lezione credo possa bastare... Avete così imparato ad introdurre testi ed immagini, nella prossima lezione conosceremo i links, la vera forza delle pagine web. Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.

Abbiamo visto nella lezione precedente, come creare la nostra prima pagina web, mettendo al suo interno una qualunque scritta generica, allo stesso identico modo avremo potuto scrivere un intero libro se solo avessimo voluto fare quello. Ma un testo ha bisogno di essere formattato per essere facilmente leggibile. E' proprio di questo che ci occuperemo in questa lezione.

Aprite il vostro editor, qualunque esso sia, e richiamate la pagina che avevate creato e salvato, quella della lezione precedente per intenderci. Posizionate il cursore nel punto in cui avevate inserito l'elemento paragrafo <p> e precisamente fra la p e la chiusura della parentesi angolare.

Digitate uno spazio ed inserite l'attributo align="xxx" dove xxx è uno dei seguenti validi attributi: center, left, right, justify. Questi servono rispettivamente per allineare il testo al centro, al margine sinistro, al margine destro, giustificato per entrambi i margini.

Se avete eseguito correttamente le istruzioni, dovreste avere una cosa di questo tipo:

<p align="left">Questa è la mia prima pagina web</p>

Vediamo i vari risultati a video:

<p align="left">Questa è la mia prima pagina web allineata a sinistra</p>

Questa è la mia prima pagina web allineata a sinistra

<p align="right">Questa è la mia prima pagina web allineata a destra</p>

Questa è la mia prima pagina web allineata a destra

<p align="center">Questa è la mia prima pagina web allineata centrale</p>

Questa è la mia prima pagina web allineata centrale

<p align="justify">Questa è la mia prima pagina web giustificata</p>

Questa è la mia prima pagina web giustificata, la sola frase non contiene una quantità di testo sufficiente per poterne vedere l'effetto giustificato, così scrivo qualcosa in modo da aggiungerne e rendere meglio l'idea di come avviene la giustificazione, adoperata spesso per testi lunghi e ben formattati. Ecco fatto, dovrebbe essere sufficiente, guardate i due margini, sono entrambi allineati.

Digitando del testo vi accorgerete presto che a differenza degli editor normali, ogni volta che volete tornare a capo non basta la semplice pressione del tasto invio o enter. Nelle pagine web per tornare a capo si fa uso dell'elemento <br> oppure aprendo e chiudendo un nuovo paragrafo <p></p> Vi accorgerete anche che inserendo più spazi fra una parola e l'altra questi non saranno visualizzati, ignorati tutti quanti lasceranno il posto ad uno solo.

Provate voi stessi per rendervene conto. Più avanti nella lezione dedicata alla cosmesi del testo vedremo anche altre cose che non è possibile fare in html o almeno non così come siamo abituati a fare con un normale editor di testi.

Per questa lezione credo possa bastare... Avete imparato a creare una pagina web e introdurre il testo, nella prossima lezione vedremo come inserire le immagini.

 

 

Benvenuti su questa rubrica è possibile apprendere passo dopo passo, lezione dopo lezione, tutto ciò che serve per creare una propria pagina web, e perché no, un vero e proprio sito web!


Bene, dopo questa breve ma doverosa premessa possiamo iniziare; vediamo cosa serve e come si costruisce una pagina web.

Una pagina web è una sorta di ipertesto, cioè testo apparentemente "normale" generato da un editor, uno di quei programmi che permettono di scrivere il codice,  anche lo stesso che di solito si adopera per scrivere le normali lettere; la differenza consiste nello scrivere "parole"  particolari che diventano vere e proprie istruzioni e sono chiamate <TAGS> (elementi), racchiusi fra parentesi angolari < >, particolarità che ne consente poi la corretta interpretazione da parte del browser. Cos'è il browser?
E' quel programma che serve per navigare la rete, lo stesso che stai adoperando adesso per leggere quello che io ho scritto con il linguaggio HTML, questa sigla è ormai divenuta sinonimo di pagina web, il suo significato deriva dalle iniziali di: Hyper Text Markup Language. Senza html non potresti nemmeno leggere questa pagina.

Non c'è nulla di particolarmente difficile, non serve avere alcuna precedente esperienza di programmazione; devi semplicemente seguire le spiegazioni con una certa attenzione e poi provare... provare, e riprovare e alla fine il risultato é garantito.

Come ho appena detto, non si tratta di un linguaggio di programmazione vero e proprio per il quale é  richiesta una certa preparazione di base, si tratta molto più semplicemente di una combinazione di tags (elementi) molto semplici da inserire e abbastanza facili da ricordare ma soprattutto con pochissime regole da rispettare. 

Vvediamo cosa serve e quali sono gli strumenti necessari per creare la nostra prima pagina web. Abbiamo detto un editor, cioè uno di quei programmi che si adoperano per scrivere testi, il wordpad o il blocco notes di solito a corredo di windows per esempio, potrebbero andare bene, ma anche qualsiasi altro elaboratore di testi potrebbe fare al caso nostro; unica raccomandazione: ricordarsi sempre di salvare il tutto in formato ASCII, cioè puro testo senza aggiunta di formattazioni particolari. Alcuni di questi programmi infatti, word di microsoft per citarne uno, aggiungono dei caratteri che soltanto loro riescono poi a riconoscere ed interpretare, questi caratteri non vanno certo d'accordo con il codice html e relative  pagine web. Non lasciatevi ingannare dal fatto che word possa esportare in HTML, lasciate perdere, se proprio volete adoperare word e seguire questo corso, salvate in ascii e rinominate poi il file così salvato in htm o html.

Personalmente consiglio vivamente di procurarsi un editor specifico per HTML, visto che se ne trovano di potenti ed anche di gratuiti non vedo perché se ne dovrebbe fare a meno. Dovendo parlare di editor html, due sono le categorie in cui si suddividono: visuali e testuali.

Quelli visuali sono sicuramente molto più semplici da adoperare, assomigliano a dei programmi di grafica, è sufficiente trascinare al loro interno testi ed immagini per avere un'impaginazione più che soddisfacente, se avete deciso per quelli, potete smettere di continuare a leggere questa mia rubrica. Non vi servirà  a molto, arrivederci, sono infatti sicuro che ci rivedremo presto ... :-)
Presuntuosa?
No, lo so per esperienza, quella che voi stessi mi avete permesso di fare in tutti questi anni.

Gli editors testuali richiedono  invece da parte di chi li adopera una minima conoscenza di base, potrebbero sembrare più dispendiosi in termini di impegno, ma alla lunga si rivelano invece un autentico investimento. Consentono di fare cose che editors visuali non permetterebbero mai e danno la possibilità di avere il controllo assoluto su ogni parte del codice, anche di questo avremo modo di parlarne meglio quando torneremo in seguito sull'argomento.
E con questa le premesse sono davvero finite, possiamo finalmente iniziare a fare qualcosa di concreto...

Aprite il vostro editor preferito, qualunque esso sia, anche uno di quelli visuali se ha la possibilità di andare in modalità testo o html.

I TAGS, o elementi, che compongono HTML devono essere racchiusi fra parentesi angolari <queste>

Si tratta di parole chiave, termini in lingua inglese. L'elemento (tag) smette di produrre il suo effetto nel momento in cui lo stesso viene ripetuto facendolo precedere da una barra laterale / contenuta sempre all'interno delle parentesi angolari.

L'inizio di un documento HTML avrà come elemento (tag) iniziale: <HTML> e come elemento (tag) finale </html> poco importa se siano scritti in maiuscolo o minuscolo, tutto ciò che sarà contenuto all'interno di questi due elementi (tags) sarà interpretato dal browser come codice HTML.
Difficile ?
Direi proprio di no :-)

Un documento HTML è composto da due sezioni ben distinte: una testa <HEAD> ed un corpo <BODY>

Nella testa (head) vanno messi quei comandi che inviano informazioni al server o quel codice che deve essere letto con una certa priorità: script, fogli di style, ecc. ecc.
Nel corpo (body) tutto il resto. Anche questi elementi, necessitano del relativo elemento di chiusura: </head> e </body> Riassumendo, una struttura HTML tipo potrebbe essere questa:

<html>
<head>
codice per il server, scritps, fogli di style.
</head>
<body>
codice da visualizzare come documento testo ed immagini
</body>
</html>

Per il momento all'interno di <Head> non metteremo nulla, si vedrà più avanti cosa inserire, adopereremo quindi soltanto la zona <body>.

Col vostro editor create la struttura sopra e portatevi col cursore all'interno degli elementi (tags) <body> ... </body> Inseriremo del testo, per cui lo faremo precedere dall'elemento <p> che significa: paragrafo, andremo a scrivere un qualsiasi testo: "questa è la mia prima pagina web" per esempio, facciamo in modo di chiudere anche l'elemento <p> con il relativo </p>. Se tutto è stato fatto correttamente dovremo avere una struttura di questo genere:

<html>
<head>
</head>
<body>
<p> Questa è la mia prima pagina web </p>
</body>
</html>

Non importa come avete disposto le frasi del testo, potete lasciare spazi o ritornare a capo quante volte volete, poco importa; il browser ignorerà il vostro modo di scrivere limitandosi a leggere e interpretare soltanto gli elementi validi di html. (più avanti si vedrà come lasciare spazi e come andare a capo)

A questo punto non resta che salvare il tutto. Se il vostro editor non è specifico per html, fate in modo di salvare in formato ascii, cioè testo puro. Assegnategli un nome: quello che volete, e salvatelo.

Se non avete un editor che salva direttamente in html con molta probabilità il vostro file avrà un estensione di tipo .txt, ovvio direte voi, visto che è stato scritto con un normale editor per testi. Rinominate questo file in modo che abbia come estensione htm o html altrimenti il browser non riuscirà ad interpretarlo in modo corretto.

A proposito di questa operazione, dovrei fare alcune precisazioni: l'operazione di rinomina di per se è molto semplice ma chi adopera Windows potrebbe non vedere l'estensione finale del file appena salvato, in questo caso rinominarlo servirebbe a poco dal momento che windows aggiungerebbe html al nome appena assegnato, lasciando però di fatto il file in formato txt

Mi rendo conto che non sia un'operazione molto semplice, specialmente per un principiante in senso generale, per chi avesse problemi in questo tipo di operazione vi rimando ad un esempio che credo possa chiarire meglio.
Consapevole che se avessimo adoperato un editor visuale quale: "composer" per chi adopera Netscape o "Front Page Express" per chi adopera Intenrnet explorer, non ci sarebbe stato bisogno di niente altro che non fosse stato scrivere: questa è la mia prima pagina web e salvare...

 TERRAGEN

 

Ultimi lavori di Angela

CREATIVITA' al computer

L' IMMAGINAZIONE VALE PIU' DELLA CONOSCENZA

(Albert Einstein)