Inserimento di suoni, immagini e filmati Argomenti trattati: - Inserimento di suoni Come gestire l'inserimento di brani musicali in un ipertesto. - Inserimento di immagini: Come inserire immagini gestibili come la formattazione. - Inserimento di filmati: Come inserire filmati con la stessa facilità delle immagini. Premessa Per iniziare l’argomento è necessaria una premessa: per una buona riuscita dell’inserimento dei contenuti multimediali in una pagina web è bene abituarsi a posizionare gli elementi da inserire in una pagina web nello stesso ambiente. Nel concreto, quando state progettando di creare una pagina web con inserimento di suoni, immagini e filmati è bene prevedere l’uso di sottocartelle, dandogli nomi significativi, come in figura a lato, all’interno dell’ambiente dove state creando la pagina. Questo ci aiuterà molto a comprendere come impostare i link ai contenuti multimediali. Inserimento di suoni La presenza di file audio può essere una piacevole colonna sonora alla navigazione delle pagine web, oppure un fastidioso fardello capace solo di rallentare il caricamento ed innervosire il visitatore. Come spesso viene ripetuto in questa guida e' necessario considerare che sì, e' importante la piacevolezza grafica e musicale delle pagine web, ma e' fondamentale che la navigazione non risulti lenta e soprattutto l'utilizzo di musiche di facile ascolto per non infastidire l'utente e impedire loro una gradevole navigazione. Il mio consiglio e' quindi l'utilizzo di musica in tono con la tipologia di sito che si sta creando e di evitare grossi file .wav (del peso anche di una cinquantina di Mb), anche se le attuali tecnologie ADSL hanno portato a velocità di download tali da non preoccupare più il carico non eccessivo di una pagina, ma optare per il famosissimo e leggero formato mp3 (che risulta essere anche dieci volte più leggero del WAV), in quanto i pochi Mb di cui è composto possono notevolmente accelerare la navigazione. Sconsiglio inoltre vivamente i grossolani file MIDI (.mid) per via soprattutto della scarsa qualità del suono emesso. Il linguaggio HTML – prof. Maurizio Gambino | 04. Inserimento di suoni, immagini e filmati Il comando <BGSOUND>, utilizzato per inserire un suono di sottofondo nella nostra pagina, funziona solo con Internet Explorer, e questa è la sintassi da utilizzare: <BGSOUND SRC="brano.mp3" LOOP=INFINITE> Come si può vedere il tag BGSOUND è seguito dall'attributo SRC= che contiene il nome, e l'eventuale percorso, del brano utilizzato come musica di sottofondo e di un attributo chiamato LOOP= che contiene il numero di volte che il brano deve essere ripetuto. Nel nostro caso il valore INFINITE indica che il brano deve essere ripetuto finché non si abbandona la pagina. In realtà questo non è il modo migliore, né il più efficace, per inserire un file audio, perché obsoleto e compatibile soltanto con Internet Explorer. Un'altro modo obsoleto, ma crossbrowser prevede l'uso di <embed>. <embed src="url del file audio" autostart="true"> Se invece vogliamo seguire le specifiche dell'HTML 4.01, utilizziamo il tag <object>. <object data="suoni/nome del file audio.mp3" type="audio/mp3" autostart="true"> <embed src=" suoni/nome del file audio.mp3" autostart="true"> < /object> tuttavia, affinché tutto funzioni perfettamente, spesso conviene indicare il tipo di plugin da utilizzare grazie all'attributo classid. Vediamo il codice necessario ad aprire la barra del lettore multimediale RealOne (se RealOne non è presente, l'utente verrà avvisato). Notare che all'interno del tag <object> vengono espressi i parametri che indicano come devono essere visualizzati i controlli di RealOne, e la sintassi alternativa per browser obsoleti (indicata tramite <embed>): <object id="sound1" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <param name="src" value=" suoni/nome del file audio.mp3"> <param name="controls" value="All"> <param name="console" value="sound1"> <param name="autostart" value="false"> <embed src=" suoni/nome del file audio.mp3" type="audio/mp3" console="sound1" controls="All" autostart="false" name="sound1"> < /object> Ricordiamo anche che l'uso di suoni o musica di sottofondo se utilizzata in modo eccessivo può compromettere l'usabilità del sito. Inserimento di immagini. Internet, solo negli ultimi 10 anni si è affermata come media di massa. Per lunghi anni è stato un sistema di comunicazione ad esclusivo utilizzo di apparati militari prima, e universitari dopo. E' agevole immaginare quanto poco inclini alla grafica ed all'estetica fossero i vecchi navigatori della Rete. Il nuovo modo di vedere un immagine è anche merito del tag, oggi molto comune, <IMG>. Il linguaggio HTML – prof. Maurizio Gambino | 04. Inserimento di suoni, immagini e filmati Prima di trattare nello specifico il tag principale per l'inserimento di immagini negli ipertesti è bene precisare alcuni concetti di HTML. A differenza di molti editor di testo (Ms Word, per esempio) gli ipertesti non vengono "fusi" con le immagini a corredo grafico, ma si limitano a richiamarle da un percorso specifico in locale o su Web. In altre parole esiste una soluzione di continuità molto chiara tra file .htm e immagini (e, come vedremo in seguito, anche con suoni, applet ecc.). I documenti HTML si limitano a prevedere uno spazio al proprio interno entro il quale vanno inserite le immagini richiamate. Il tag <IMG> rappresenta, in un certo senso, una funzione di richiamo delle immagini e per questo motivo non necessita di chiusura. La sintassi è la seguente: <IMG SRC="immagine.gif"> L’attributo SRC è l'abbreviativo di SOURCE (sorgente). Questo attributo contiene il percorso dal quale il browser "preleva" l'immagine (in questo caso "immagine.gif"). I browser (Mozilla Firefox, MS Internet Explorer, Google Chrome, Opera, ecc.) riconoscono molti formati grafici, anche se sono tre quelli più utilizzati: GIF (Graphics Interchange Format), JPEG (Joint Photographics Experts Group) e PNG (Portable Network Graphics) essendo questi, a parità di risoluzione, i migliori per quanto riguarda peso e qualità convenienti ad essere caricati velocemente dai browser in Rete. Il tag <IMG> è corredato da diversi attributi molto utili ai fini del suo utilizzo. Vediamo insieme quali. Inserimento di immagini – l'attributo ALT L'utilizzo di commenti testuali alle immagini è una fondamentale regola da osservare nella creazione di siti Web per alcune buone ragioni: taluni browser potrebbero essere impostati per non richiamare le immagini; i browser testuali per non vedenti non riuscirebbero ad interpretare le immagini senza un commento. è possibile evitare didascalie inserendo commenti all'interno dell'immagine stessa. In tutti i casi considerati l'uso di commenti risolve il problema e consente di ottimizzare l'utilizzo di una pagina Web. La corretta sintassi per i commenti è la seguente: <IMG SRC="immagine.gif" ALT="Commento visualizzabile con il cursore"> Inserimento di immagini – gli attributi WIDTH e HEIGHT Negli esempi finora indicati non abbiamo specificato le misure dell'immagine che il browser ha provveduto a cercare automaticamente. E' possibile definire altezza e larghezza dell'immagine con gli attributi WIDTH ed HEIGHT: <IMG SRC="immagini/immagine.gif" WIDTH=178 HEIGHT=180 ALT="Commento"> Il linguaggio HTML – prof. Maurizio Gambino | 04. Inserimento di suoni, immagini e filmati dove WIDTH=178 è la dimensione orizzontale (larghezza) dell'immagine espressa in pixel, e HEIGHT=180 la dimensione verticale (altezza). Con questi attributi è possibile definire dimensioni differenti da quelle effettive dell'immagine. E', comunque, consigliabile inserire immagini di dimensioni naturali soprattutto se in formato GIF, visto che ridimensionando questo formato la qualità decade enormemente. Inserimento di immagini – l'attributo BORDER Con l'attributo BORDER è possibile assegnare un bordo all'immagine. I valori sono numerici ed espressi in pixel. Il valore BORDER impostato su 0 ha l'effetto di non visualizzare alcun bordo. Quest'ultimo è il valore di default, ma se l'immagine è anche un link viene automaticamente assegnato un BORDER=1. Questa che segue è la giusta sintassi: <IMG SRC="immagini/immagine.jpg" WIDTH=178 HEIGHT=180 BORDER=0 ALT="Commento"> Inserimento di immagini – l'attributo ALIGN L'attributo ALIGN definisce la posizione dell'immagine rispetto al testo posto immediatamente prima o dopo la stessa. Esistono varie opzioni per questo attributo: ALIGN=top: allinea la prima riga di testo sulla sinistra al top dell'immagine. ALIGN=middle: allinea la prima riga di testo sulla sinistra al centro dell'immagine. ALIGN=bottom: allinea la prima riga di testo sulla sinistra nella parte più bassa dell'immagine. ALIGN=left: allinea il testo sulla sinistra dell'immagine partendo dal top. ALIGN=right: allinea il testo sulla destra dell'immagine partendo dal top. Inserimento di filmati Anzitutto la scelta del formato, se il vostro sistema operativo è Windows potreste optare per il formato wmv, vi elenco di seguito alcune motivazioni: 1. Tutti i PC Windows dispongono di Windows Media Player; 2. a partire dalla stessa origine audio/video i filmati in formato wmv sono un po’ più compressi ed hanno una qualità video leggermente migliore rispetto ai loro equivalenti in formato .mov o .mp4; Per l'inserimento di un filmato all'interno di una pagina la procedura agli albori di HTML era quasi identica a quella di un immagine; l'unica differenza consisteva nel fatto che Il linguaggio HTML – prof. Maurizio Gambino | 04. Inserimento di suoni, immagini e filmati un'immagine non è altro che un fotogramma che ritrae una figura statica, mentre un filmato è una serie di fotogrammi illustrati dinamicamente tramite applicazioni apposite. Se ne deduce che la differenza è all'origine di questi elementi multimediali: una è statica (l'immagine) l'altra è dinamica (il filmato). Il tag <IMG>, visto finora, supportava anche il caricamento di file video in diversi formati. Ciò che permetteva tale inclusione in una pagina web era l'attributo DYNSRC (abbreviativo della parola Dynamic Source), permettendo così la visione dei filmati. Quindi la sintassi utilizzata per l'inserimento di un filmato era: <IMG DYNSRC="filmati/nomefilmato.avi" WIDTH="250" HEIGHT="150" LOOP="infinite"> Come potete notare valgono le stesse regole dell'inserimento delle immagini. Unica eccezione era l'attributo AUTOSTART il cui valore booleano "true" ci permetteva di eseguire il filmato all'apertura della pagina. Allo stato attuale la visualizzazione di un filmato, anche in streaming, utilizza, come per l’inserimento dei suoni, la definizione di un oggetto multimediale all’interno della pagina: Si consiglia, sempre per gli ovvi motivi di dimensione e tempo di caricamento, di utilizzare i formati consigliati: AVI, MPEG e WMV. Per i nostri esempi adotteremo il formato AVI. <object id=”MediaPlayer1” width=320 height=240 classid=”CLSID:22D6F312-B0F611D0-94AB-0080C74C7E95” codebase=”http://activex.microsoft.com/activex/controls/mplayer/en/nsma2inf.cab# Version=6, 4, 5, 715” type=”application/x-oleobject” standby=”Caricamento del filmato in corso…”> <param name=”Autostart” value=”true”> <param name=”FileName” value=”filmati/nome_filmato.wmv”> <param name=”ShowControls” value=”false”> <param name=”ShowStatusBar” value=”true”> <param name=”loop” value=”true”> <embed type=”application/x-mplayer2” pluginspage=”http://www.microsoft.com/Windows/MediaPlayer/ “ src=”filmati/nome_filmato.wmv” name=”MediaPlayer1” width=320 height=240 autostart=1 showcontrols=0 showstatusbar=1 showdisplay=0></embed> </object> Il linguaggio HTML – prof. Maurizio Gambino | 04. Inserimento di suoni, immagini e filmati
© Copyright 2024 Paperzz
