Archivio per la tag 'html'
Quando ho ascoltato questa parole nella presentazione ufficiale sono rimasto stupito,e ho subito apprezzato il lavoro che era stato svolto da adobe per sviluppare questo programma.
Adobe Labs ha rilasciato il programma(fase beta) che permette di convertire i contenuti flash in HTML5,ovviamente essendo una versione beta del programma,il suo funzionamento non è sempre efficiente.
Durante la visualizzazione dei contenuti convertiti infatti il browser può andare in crash o non visualizzare bene tutte queste opzioni che sono state effettuate.
In futuro sicuramente Adobe Labs riuscirà a trovareuna soluzione pulita a questi problemi.
Il nome del programma è Wallaby,ed è possibile visualizzare le conversione in tutti i browser che supportano WebKit
Per non permette al proprio browser di salvare nella cache le pagine web bisogna utilizzare una specie di filtro che vieta al browser di salvare le pagine.
E’ possibile utilizzare due metodi per ovviare questo problema , utilizzare una soluzione in php oppure una in html.
Per utilizzare la soluzione in html includere nella propria pagina i seguente tag meta.
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
Utilizzando invece la soluzione in php dobbiamo inserire nella pagina principale il seguente codice php,che vieta al browser di salvare le pagine nella memoria cache.
<?
session_start();
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Data passata
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // sempre modificato
header("Cache-Control: no-store, no-cache, must-revalidate"); // HTTP/1.1
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache"); // HTTP/1.0
if($_SESSION["alive"] != "1") {
header("Location: error.php");
}
?>
Ricorda Windows 3.11 ?? Il precedente sistema operativo di Windows 95??
Ehehe vecchissimi ricordi di circa 20 anni fa..ihihi,moltissimi sono stati gli utenti ad utilizzare questo sistema operativo,ma non tutti ricordano com’era,quali funziona aveva,e cosa era possibile fare su di esso!
Oggi è possibile rivivere quest’emozione nel tuo browser grazie all’applicazione online sviluppata da Michaelv.org,che permette di riutilizzare Windows 3.11 nel tuo browser!
Link applicazione online : michaelv.org
Avete un blog con WordPress,ma il vostro provider vi limita le connessioni al DB(query) ?? Bhè..non vi preoccupate!Potete sempre salvare tutti i vostri articoli in formato HTML 
Le operazioni per trasformare i nostri articoli in HTML sono abbastanza difficili,ma semplice se si utilizza un plugin esterno da installare direttamente wu WordPress!
Il plugin che utilizzeremo si chiama Wp-Cache e permette di trasformare tutti i nostri articoli in formato HTMl,in modo da essere letti in maniera veloce e sempre 
E’ possibile scaricare il plugin direttamente dal nostro pannello amministrativo di WordPress.
Vogliamo abbellire la nostra pagina web inserendo una canzone o anche solamente un midi all’apertura della pagina??
Inserire un suono all’interno di una pagina web è una cosa molto carina,e può essere definito come un buon biglietto da visita per chi ci sta visitando..
Inserirlo è molto semplice, basta inserire il seguente tag seguito dall’url della nostra canzone,ovviamente la canzone deve essere presente nel nostro spazio per essere ascoltata e non sul nostro pc 
<object data="url del file audio" type="audio/wav" autostart="true">
<embed src="url del file audio" autostart="true">
</object>
Una pagina Web può essere suddivisa in finestre multiple dette frame(cornici),per rendere più ordinata e immediata per l’utente la presentazione delle informazioni.Il contenuto di frame diversi può cambiare in momenti diversi.
Il caso più comune è la suddivisione dello schermo in due frame : a sinistra un frame laterale stretto per contenere un sommario o una guida del sito internet,a destra il frame coni l contenuto delle varie pagine.Facendo click su una parola o su un’icona nel frame di sinistra,il contenuto del frame di destra viene cambiato: in questo modo l’utente consulta le diverse pagine avendo sempre disponibile sul video il sommario o la guida del sito.
La struttura generale del codice HTML,che definisce una pagina con due frame è la seguente:
<html>
<head>
<title>Esempio di pagina con Iframe</title>
</head>
<frameset cols="25%,75%">
<frame src="sommario.html" name="sinistra">
<frame src="pagina1.html" name="destra">
<noframes>
La pagina corrente viene visualizzata dai browser che non supportano gli iframe -.-
</noframes>
</frameset>
</html>
E’ opportuno assegnare un nome ai frame attraverso l’attributo NAME,in modo da impostare il valore dell’attributo TARGET nei link alle altre pagina. Per esempio nella pagina del sommario:
<a href="pagina2.htm" target="destra">Pagina 2</a>
I moderni siti Web non sono più solamente pagine web statiche,ma sono un vero e proprio strumento per interagire con gli utenti.
Ad esempio un’azienda oltre a pubblicizzare i suoi prodotti,può anche venderli.Per questo in molte pagine web sono presenti moduli o questionari da compilare.
I form in HTML sono racchiusi tra i tag <form>..</form> , e all’interno del form si possono inserire oggetti per la scelta dell’utente,e possono essere :
- Caselle di testo
- Caselle di testo per campi speciali come password
- Selezione Multipla
- Selezione Singola
- Area di testo
- Caselle di selezione combinata
- Bottoni per inviare dati come submit & reset
Caselle di testo
Per campi normali di input standard bisogna impostare la proprietà type=”text” nel tag di <input>
es. <input type=”text” name=”nome” size=”100″ maxlength=”20″ value=”valore di default”>
E’ possibile impostare la grandezza del’input con la proprietà SIZE,è possibile specificare di quanti caratteri massimi deve essere composto il valore da inserire,il nome dell’input,e il valore da visualizzare di default quanto viene creato il form.
Questi valori vengono utilizzati anche per tutte le altre scelte!
Casello di testo per campi speciali
Caselle di testo per campi speciali come password con il tag <input> e la proprietà type=”passowrd” , es.
<input type="password" name="pwd" size="20" maxlength="10">
in questo caso i caratteri inseriti dall’utente saranno sostituiti da una sequenza di asterischi,ecco il significato di speciale
Area di Testo
L’area di testo viene inserita con il tag <textarea> ed è un grande contenitore di informazioni, dove è possibile inserire molte più righe rispetto a una normale input text.
La proprietà Rows indica il numero di Righe,mentre la proprietà Cols indica il numero di colonne. es.
<textarea name="msg" rows="3" cols="10">Scrivi il tuo messaggio</textarea>
Selezione Multipla
La selezione multipla viene effettuata con il tag <input> e la proprietà type=”checkbox” (caselle di controllo)
E’ possibile anche selezionare una casella in modo prefenito impostando il valore checked.
Esempio :
<input type="checkbox" name="c1" value="ita" checked>Italiano<br>
<input type="checkbox" name="c2" value="mat" checked>Matematica<br>
<input type="checkbox" name="c3" value="inf" checked>Informatica<br>
<input type="checkbox" name="c4" value="geo" checked>Geografica<br>
Selezione singola
La seleziona singola viene definita con una serie di tag <input> e la proprietà type=”radio”
Esempio :
<input type="radio" name="colore" value="rosso">Rosso<br>
<input type="radio" name="colore" value="verde">Verde<br>
<input type="radio" name="colore" value="giallo">Giallo<br>
Casella Combinata
Viene rappresentata con il tag <select>(linea di selezione),per i guali è possibile scegliere dei valori con il tag <option>.
Esempio pratico :
<select name="Regione">
<option value="napoli">Napoli</option>
<option value="roma">Roma</option>
<option value="milano">Milano</option>
</select>
E’ ovviamente anche qui selezionare un valore per default impostando l’attributo selected.
Bottoni per Inviare Dati
Per inviare tutti i dati che abbiamo registrato nei form dobbiamo usare il tag input con type=”submit” ,mentre per cancellare automaticamente tutto quello che abbiamo inserito bisogna impostare type=”reset”.
Esempio :
<input type="submit" name="send" value="Invia">
<input type="reset" name="canc" value="Annulla">
Ovviamente quando cliccheremo su questi pulsanti ,la nostra pagina verrà aggiornata per l’invio.
Un pagina form può avere 3 attributi principali :
Action serve per definire dove inviare i dati,ad esempio ad una nuova pagina che li salva,oppure ad un’indirizzo mail,es action=”mailto:prova@prova1.it”.
Method non è utilizzato per il momento ,e può assumere i valori post e get.
E Name può assumere un qualsiasi valore
L’Html mette a disposizione alcuni codici per definire le liste.Una lista è simile ad un elenco di righe,ed è possibile rappresentarla graficamente le righe in modo puntato o numerato.
Gli esempi delle liste con relativa immagine verrà inserita subito dopo la spiegazione.
Per ottenere una lista puntata si usa la seguente sintassi :
<ul>
<li>Elenco1</li>
<li>Elenco2</li>
<li>Elenco3</li>
</ul>
Mentre per ottenere una lista numerata,basta sostituire al tag ul il tag ol :
<ol>
<li>Puntato1</li>
<li>Puntato2</li>
<li>Puntatoo3</li>
</ol>
Oltre alle liste in Html è possibile definire anche una tabella,in modo da disporre le informazioni su righe e colonne.
Con le tabelle è possibile anche organizzare una pagina Web,ma bisgona utilizzare una lista con bordo assente.
I tag per definire una tabella iniziano con <table>..</table> , per definire una riga di intestazione di una colonna si usa <th>..</th>,per definire una riga si usa <tr>..</tr> ,mentre per definire ogni cella bisogna usare il tag <td>..</td>.
Se qualcosa non vi è chiaro basta consultare l’immagine di esempio.
Clicca qui per ingrandirla
Per impostare un sito in modo ordinato con le tabelle abbiamo parlato di impostare il bordo assente,ma come si può impostare?Per impostare un bordo assente basta impostarlo a o , es. <table border=”0″>.
Ovviamente siccome stiamo utilizzando le tabelle per creare una pagina Web,al loro interno possiamo anche inserire immagini,video,musica,testo ect..
Poi nelle tabelle è possibile anche impostare una percentuale di grandezza,che ci indica la grandezza della tabella nella pagina.
Prossimo capito : Iframe e successivamente i Form
Nei precedenti articoli abbiamo presentato il notepad++,un editor per i nostri sorgenti di programma o semplici pagine web.
Oggi vi presentiamo un editor online che ci permette di modificare/creare le nostre pagine web con html e css.
Il servizio che offre tutto questo si chiama Render ed è un servizio gratuito.
Editare i tuoi documenti non è stato mai cosi facile
Prova subito questo editor collegandoti al portale da qui
Una pagina web priva di immagini non è graficamente accettabile.
I browser per internet sono in grado di visualizzare immagini che sono state memorizzate sul proprio computer.
I formati grafici più utilizzati sono : GIF,JPEG,PNG,BMP.
Le immagini possono essere inserite all’interno di un documento HTML,ma ogni immagine richiede un tempo di elaborazione differente,in base alla propria dimensione.
Nel progettare pagine web è preferibile utilizzare immagini di dimensioni contenute(20-30Kbyte).
Per includere un’immagine si usa il tag :
<img src="indirizzo immagine" parametri>
L’indirizzo dell’immagine normalmente può essere omesso,se l’immagine è presenta nella stessa cartella del documento.
Vedere l’immagine di esempio per capire il funzionamento generale e le varie opzioni.
La scritta parametri è ovviamente opzionale,ma possiamo utilizzarla per modificare la visualizzazione delle immagini.
Elenco dei parametri più utilizzati :
- Align
- Border
- Alt
- Width
- Height
Align indica la posizione in cui deve essere inserita l’immagine e può assumere i seguenti valori :
- Top = Se si vuole allineare rispettivamente al bordo superiore
- Middle = Centrare immagine al centro
- Right & Left = Per posizionare rispettivamente a destra e sinistra.
Esempio :
<img src="logo.jpg" align="left">
Border viene utilizzato principalmente per rimuovere il bordo di un immagine linkabile.Vedere i seguenti codici per notare la differenza.
<a href="page.html"><img border="0" src="logo.jpg"></a>
<a href="page.html"><img src="logo.jpg"></a>
Alt viene utilizzato in sostituzione al caricamento iniziale dell’immagine.Ad esempio se un’immagine richiede un tempo di elaborazione elevato,viene mostrato il messaggio presente in alt. Utilizzo alt=”Messaggio” .
Se un immagine è molto piccola,e vogliamo ingrandirla possiamo modificarla direttamente nella pagina web usando WIDTH & HEIGHT,seguito ovviamente dalla lunghezza che si vuole impostare.
<img src="logo.jpg" width="50%">
Attenzione!Modificando la dimensione delle immagini perdiamo la qualità effettiva
Esempi per capire meglio l’utilizzo delle immagini.
Quando ho ascoltato questa parole nella presentazione ufficiale sono rimasto stupito,e ho subito apprezzato il lavoro che era stato svolto da adobe per sviluppare questo programma.
