MICROSOFT FRONT PAGE EDITOR È un editor di pagine Web nato per costruire facilmente pagine direttamente in formato HTML. Utilizzare Front Page Editor e creare una nuova pagina. Costruzione di Pagine personali. Creare una cartella Sito personale all interno della quale salveremo tutti i file creati e poi eseguire Front Page Editor. Per creare un Sito personale si consiglia di costruire una pagina con FRAME (Menu Frame pagina con sommario), così eviteremo di inserire all interno delle singole pagine i pulsanti avanti, indietro e home. Selezionare nuova pagina sul frame sinistro e costruire l INDICE del nostro sito con i titoli delle nostre paginette personali es: informazioni, curriculum, hobbies, immagini personali, ecc. Poi ridimensionare il frame per adattarlo alla lunghezza necessaria. Ricordatevi che il contenuto del frame sinistro resterà sempre visibile perché le pagine verranno aperte SOLO nel frame destro. Selezionare sempre nuova pagina sul frame destro all interno del quale costruiremo la nostra home page (pagina iniziale). Salvare scegliendo l opzione Salva tutto e ci verrà chiesto: 1. Nome della pagina con i due frame (si apre una finestra salva come file ma dietro c è la finestra salva con nome che evidenzia l intera struttura con i due frame) e si darà il nome index.html 2. Nome della pagina del frame sinistro (per sicurezza però controllare se nella finestra in secondo piano salva con nome è evidenziato il frame sinistro in blu) a cui in genere si da il nome indice o sommario.htm 3. Nome della pagina del frame destro che corrisponde alla home_page.html Se le pagine contengono come sfondo un tema od un immagine verranno salvati anche dei file immagine (con estensione GIF). Creare nuove pagine (File nuovo pagina vuota oppure con l apposito pulsante) relative a tutti i titoli inseriti nell indice che avevamo creato nel frame sinistro e salvarle con gli opportuni nomi. Chiudere tutto. Aprire nuovamente index.html e selezionare la prima voce che deve richiamare la pagina correlata, poi selezionare Inserisci collegamento ipertestuale oppure l apposito pulsante, nella casella URL occorre inserire la pagina web che deve essere richiamata (si può sfogliare il contenuto del disco fisso nella cartella Sito personale. Utilizzare la procedura del punto precedente per collegare le altre pagine alle voci presenti nel sommario. Immagini ed effetti speciali È possibile utilizzare degli sfondi colorati per ciascuna pagina utilizzando FORMATO > tema oppure sfondo. Si possono poi inserire immagini prelevate dalle Clipart oppure da cartelle in cui sono state salvate immagini, magari scannerizzate. Effetti speciali poi si possono inserire ad esempio cercando in INSERISCI -> Componente striscione oppure testo scorrevole. 1
BREVI APPUNTI DI HTML Il linguaggio in cui l editor di pagine web traduce i propri documenti è l HTML un linguaggio standard interpretabile da tutti i Browser Web. I comandi fondamentali non sono particolarmente difficili da ricordare e soprattutto corrispondono a comandi testuali che possono essere creati facilmente anche con un semplice Editor di Testi come il Blocco notes. Quindi io potrei realizzare tranquillamente una pagina web anche con il solo Blocco notes. Diamo un occhiatina veloce ai comandi principali dell html. HTML per esempi Diamo ora un rapido ripasso degli elementi di HTML. Ricordiamo anzitutto la struttura generale di un semplice documento HTML: <HTML> <TITLE> qui va il titolo </TITLE> <BODY> <H1> titolo </H1> testo del documento <ADDRESS> indirizzo del compilatore del documento </ADDRESS> </BODY> </HTML> Titoli I titoli sono di tre livelli a seconda delle dimensioni. Ecco i marcatori per delimitarli: <H1>... </H1> <H2>... </H2> <H3>... </H3> Notate che questi marcatori definiscono le dimensioni relative e non quelle assolute del testo. Su questo tema torneremo nel seguito del tutorial Comandi vari Ecco alcuni semplici comandi di formattazione: <B>... </B> grassetto <I>... </I> corsivo <P> fine paragrafo (a capo con riga bianca) <BR> break (a capo semplice) <!-- inizio commento; fino a --> il testo non viene interpretato <PRE>... </PRE> il testo compreso tra i due comandi non viene formattato <HR> inserisce una riga orizzontale continua Link I link consentono di collegare il documento o una porzione di documento a un altro documento. Il collegamento è effettuato tramite il nome di un file (se nome di directory, si sottintende index.html). I collegamenti sono effettuati tramite "ancore", indicate con <A> e terminate con </A>. Esempio: <A HREF="curri.html">Fai clic qui per vedere il mio curriculum</a> Immagini Si includono con il marcatoriimg. E' senz'altro il comando che ha dato al WWW l'impulso maggiore perché permette il controllo dell'inserimento della grafica nelle pagine Web. La forma 2
minima, come sappiamo, è la seguente: <IMG src="nomefilegrafico.gif"> prof. D AGOSTINO GIUSEPPE In forma estesa: <IMG src="nomefilegrafico.gif"> alt="testo alternativo" align=bottom/middle/top/left/right/texttop/absmiddle/baseline/absbottom,height=valore width=valore units="unità alternativa" border=valore, lowsrc="filebassariso.gif" hspace=valore vspace=valore> Il testo alternativo (attributo alt ) è la frase che compare al posto dell'immagine a chi non ha un browser grafico. Per l'allineamento (align), fate delle prove includendo un immagine con tutti i valori possibili. Quali dei valori di allineamento sono attributi riconosciuti solo da Netscape? height e width stabiliscono la dimensione dell'immagine in pixel; ricordate che la maggioranza degli utenti tiene gli schermi impostati a 640 per 480 pixel e che la finestra del browser è sensibilmente più piccola. Units consente di specificare un'unità di miura diversa dal pixel (ad esempio in, pollici). Border inserisce un bordo attorno all'immagine, il cui spessore in pixel è dato dal valore. Lowsrc definisce il nome di un file grafico a bassa risoluzione, quindi piccolo e svelto da caricare, che viene presentato mentre si carica il file grafico finale, cioè quello indicato da SRC. Si tratta di una tecnica vitale per non perdere chi ha collegamenti lenti. Hspace e vspace definiscono (in pixel) lo spessore di uno spazio vuoto attorno all'immagine. Siamo ora pronti per seguire un esempio un po' più complicato Esaminate la pagina che segue e provate a visualizzarla in locale con il vostro browser. Capite il significato di tutti i marcatori usati? <HTML> <HEAD> <TITLE>Polo Didattico e di Ricerca di Crema</TITLE> </HEAD> <BODY> <H1>Teledidattica via Internet<BR> Main Menu</H1> <P><HR> <A HREF="people"><IMG SRC="icons/personal.gif" ALIGN=middle></A> <A HREF="people">Collaboratori</A><BR> <P> <A HREF="course "><IMG SRC="icons/corsi.gif" ALIGN=middle></A> <A HREF="course ">Corsi</A><BR> <P> <UL> <LI> <A HREF="link.html">Internet: primo livello </A><BR><BR> <LI> Internet: secondo livello<br><br> <LI> Altri corsi <BR><BR><BR> </UL> <P> <A HREF="index.html"><IMG SRC="icons/up.gif" ALIGN=middle></A> <A HREF="index.html"> Alla pagina iniziale </A> <P><HR> <ADDRESS><A HREF="internetcourse.html">corso@medusa.crema.unimi.it</A>, May. 10, 1997 </ADDRESS> </BODY> </HTML> Se le immagini e i collegamenti della pagina d'esempio non funzionano significa che mancano i file relativi o il percorso indicato è errato. 3
STRUMENTI PER LA CREAZIONE DI SITI Per la creazione di un Sito Web si può procedere mediante l utilizzo dei seguenti strumenti: 1) Editor di pagine Web: FrontPage di MS o Netscape Composer, Macromedia Flash e altri editor (lo stesso Word) con cui si preparano in locale le pagine Web più o meno complesse. Questi permettono di creare file in formato HTML visualizzabili da tutti i Browser. Per approfondimenti sull argomento dell HTML visitare il Sito www.html.it 2) Spazio web: occorre poi acquisire uno spazio web a pagamento o gratuito presso un Provider o fornitore di spazio web. Gratuitamente si può acquisire uno spazio presso Tiscali, Digilander (Libero), oppure presso Geocities, Lycos ed altri. Generalmente ci si registra e ci viene fornito un indirizzo con parte iniziale uguale per tutti e parte finale dell indirizzo corrispondente all user da noi scelto. Es: http://web.tiscali.it/user. Il costo per tali fornitori viene compensato con i Banner pubblicitari che appaiono sul Sito...rimuoverli è possibile ma solo con il pagamento di un basso compenso annuale..un OTTIMA STRATEGIA di guadagno utilizzata da tali gestori. 3) FTP: occorre poi scaricare dai numerosi Siti che offrono download gratuiti un programma di File Transfer Protocol (Wsftp, Cuteftp e numerosissimi altri) che ci occorrerà per inviare le pagine web create in locale all indirizzo su cui abbiamo acquisito lo spazio Web. Per l invio occorre impostare dei parametri molto semplici che ci identificano nel momento in cui inviamo le nostre pagine per la pubblicazione. Sempre più fornitori ultimamente richiedono però il collegamento ad Internet tramite i LORO POP ovvero chiamando uno dei loro numeri. Se si procede invece alla creazione di pagine tramite software che si trova tutto on-line (Es. con LYCOS o Geocities di yahoo) si può usufruire di creazioni guidate, di un Editor Web on-line, e di un WEB FTP senza dover installare sul nostro PC assolutamente niente. L altra faccia della medaglia è che essendo tutto on-line per qualsiasi variazione occorre essere sempre collegati..ma dato che oggi sono rimasti in pochi ad usare il modem analogico (ad esempio me) e la maggior parte delle persone ha linea ADSL il tempo del collegamento non dovrebbe più rappresentare un problema. 4
CHE COSA SONO I CMS Per risolvere le problematiche relative alla creazione tradizionale dei Siti (tramite Editor Html ed applicativo FTP che portavano alla creazione di siti essenzialmente statici ed aggiornabili da una sola persona), si sta affermando una tipologia e tecnologia diversa di manutenzione dei siti, più orientata alla dinamicità dei contenuti,in antitesi alla staticità delle pagine HTML, e alla facilità di aggiornamento. Tali metodologie si basano su "pacchetti" software per i server, detti CMS (Content Management System = Sistemi di gestione dei contenuti) e si appoggiano su piattaforme, generalmente gratuite (open source), che discendono più o meno tutte da PHP-NUKE. Proprio per risolvere queste problematiche, si sta affermando una tipologia e tecnologia diversa di manutenzione dei siti, più orientata alla dinamicità dei contenuti (in antitesi alla staticità delle pagine HTML) e alla facilità di aggiornamento. Tali metodologie si basano su "pacchetti" software per i server, detti CMS (Content Management System = Sistemi di gestione dei contenuti) e si appoggiano su piattaforme, generalmente gratuite (open source), che discendono più o meno tutte da PHP-NUKE. tratto da Guida ufficiale all installazione di Md-Pr to 1.0 http: //www.maxdev.it) Un Sistema di Gestione dei Contenuti è una applicazione che consente di aggiornare i contenuti di un sito web o portale in maniera estremamente semplice mediante il solo ausilio del browser. E' dunque possibile gestire il proprio sito da qualunque computer connesso ad internet senza alcun software specifico. Tra gli innumerevoli vantaggi segnaliamo la possibilità di creare redazioni virtuali formate da persone fisicamente lontane tra loro, ma che possono da qualunque computer creare e pubblicare i loro contenuti. Infatti per pubblicare informazioni su un normale sito web bisogna prima comporre il contenuto del sito e poi caricarlo sul server web per la pubblicazione; questo processo si ripete ad ogni aggiornamento delle informazioni. Con un Content Management System come Md-Pro l editore o il pubblicista lancia il suo browser web, compone l articolo o il documento direttamente sul server e lo pubblica con un semplice clic del mouse. Successivamente si possono rieditare e revisionare gli articoli pubblicati con un altrettanto semplice clic. Questo metodo di gestire i contenuti rende efficiente la pubblicazione e l amministrazione delle informazioni a tal punto che persino scrittori ed editori non professionisti possono utilizzarlo senza dover sostenere alti costi per la formazione e per software specifici. Si veda ad esempio il sito web del New York Times, o in Italia, del Corriere della Sera. Esistono molti prodotti CMS. Alcuni sono prodotti commerciali a codice proprietario, altri sono prodotti commerciali a codice aperto. Tra questi c è Md -Pro, open source e utilizzabile gratuitamente. I CMS quindi sono applicativi che possono essere installati facilmente su uno spazio web (per l invio si utilizza un software FTP come WSFTP, CuteFTP o altri) ed al termine dell operazione avremo un contenitore che permette la creazione di pagine standard all interno delle quali gli utenti registrati (con una propria password che 5
permettono all amministratore di concedere gli accessi con attributi diversi o anche su parti diverse del Sito) possono inserire i contenuti senza doversi preoccupare della formattazione. Vantaggi: 1. Permette che l aggiornamento avvenga on-line senza necessità che si abbia un Sito su un elaboratore locale dal quale è necessario fare le modifiche. 2. L aggiornamento può essere fatto da persone diverse che agiscono solo sulle parti di propria competenza in maniera sicura. 3. Non necessita di installazioni né di software specifico per la creazione di pagine web, né di software (con la relativa impostazione di parametri) per l invio delle nuove pagine web, su specifici elaboratori. Gli strumenti sono già tutti presenti sullo spazio web. 4. Tutte le pagine hanno un design comune che danno coerenza alla veste grafica delle varie pagine: anche se cambiano gli autori dei vari contenuti non si avverte una difformità di pagine. Gli autori inoltre non devono avere competenze informatiche elevate in quanto sono sollevati dai problemi della formattazione dei contenuti. Svantaggi: 1. Essendoci una formattazione automatica delle pagine, questa avviene al costo di una minore creatività degli autori in tema di design delle pagine web. 2. I moduli che permettono la realizzazione di oggetti quali forum, chat, sondaggi, test ecc., sono tantissimi. Vi è anche la possibilità di intervenire sulla personalizzazione delle pagine standard create automaticamente, ma tutte queste modifiche richiedono una buona conoscenza del CMS, cosa che deve essere gestita da un esperto. Quindi la personalizzazione e l introduzione di risorse particolari può essere fatta, ma a quel punto non la si può improvvisare e dovrà essere seguita da un esperto. 3. L aggiornamento del sito avviene on-line e non in locale, quindi occorre essere connessi per tutto il tempo necessario. Finchè i collegamenti avvenivano con i modem analogici o con ISDN questo costituiva un elevato costo, ma oggi che i sistemi ADSL senza limiti di tempo si stanno rapidamente diffondendo questo non costituisce più un limite alla loro diffusione. 6