Frame & Embeds

« Older Newer »

flexlex

Posted on 7/3/2014, 20:00

Group: Mod

Posts: 3,751

Reputation: +53

Location: bolzano/bozen

Status: Offline

iFrame ed Embeds

Introduzione
Penso che questo topic non sarà molto lungo, vi illustro in breve cosa sono gli iframe e gli embeds. Per gli embeds non avremmo molti esempi, giorno d'oggi vengono evitati. Entrambi i tag hanno la stessa "funzione", ovvero quello di "incorporare" dei contenuti. iFrame di solito incorpora un altro sito, mentre gli embed un video o un qualcosa fatto in flash.

iFrame
Vogliamo incorporare un video di youtube? Ci basta andare sul video > condividi > codice da incorporare.
Vedremo appunto questo codice.

CODICE

Che restituisce questo risultato.

Come src possiamo definire qualsiasi sito.
L'attributo frameborder indica che non vengon disegnati bori all'iframe.
allow fullscreen mi sembra chiaro.
width e height definiscono larghezza e altezza.

Fin qui tutto chiaro no? Non sembrano molto utili se non per inserire video di YouTube. Beh, ci sono due funzioni utilissime dei iframe. Una funzione è il hidden frame trick che impareremo più avanti. E sopratutto quando dovremmo inviare form in POST in modo asincrono, o magari anche il caricamento di immagini, senza ricaricare la pagina.
Ma simile al hidden frame trick, c'è la funzione di tab.

Vi è poco chiara la cosa? Beh, nel topic dove ho spiegato i link abbiamo conosciuto l'attributo target, che principalmente viene usato per aprire link in un nuovo tab, può essere usato anche per aprire un link in un iframe. Se cliccherete questo link il video di youtube verrà sostituito da forumcommunity.

Volevo prendere google come esempio, ma purtroppo molti siti vietano l'inserimento tramite iframe. Per esempio: Facebook, Youtube, google.

Per fare questo, basta attribuire al iframe un attributo name, per esempio: name="ytvid" e al link aggiungiamo l'attributo target con il valore che equivale al nome del iframe, quindi target="ytvid". E la magia è fatta

CODICE

Esercizio P1
Commentate questo topic con un link verso il manganimeworld (con un topic, profilo o qualcosa a random) e aggiungete l'attributo target="ytvid", se avrete successo il vostro link dovrebbe aprirsi al posto del video di YouTube nel primo post.

Embeds
Gli embed di solito richiedono un plugin, il più conosciuto è Adobe-Shockwave-Flash, ma anche quicktime e Windows Media player hanno un plugin proprio. Qui potete vedere la lista dei vostri plugin.
http://jsbin.com/cakiy/1

La sintassi è questa.

CODICE

Questo tag è self-closing, però può essere chiuso anche con il tag di chiusura. Se si decide di fare così, il contenuto tra i il tag embed verrà visualizzato solo se il tag embed non è supportato.
Il type per quicktime dovrebbe essere type="video/quicktime", ma non riesco a far girare l'embed con il video, per questo poi useremo l'html5 e il tag videoche sarà molto più facile.

Intanto faccio un esempio con un applicazione flash.

CODICE

Adesso vi spiego tutti gli attributi.
width, height, src dovrebbero essere chiari.
type="application/x-shockwave-flash" dice quale plugin usare. Ovvero shockwave..
pluginspage="https://www.macromedia.com/go/getflashplayer" questo attributo è importante, se facciamo qualche errore di battitura nel type, oppure il computer non ha installato il plugin oppure il type non è definito. Il pc può scaricarsi il plugin, oppure riconoscere qual'è il plugin giusto (e se è quello giusto).

Oggi si cerca di evitare plugin e embed, perché rallenta il caricamento delle pagine.

Esercizio P2
Cercate di importare qualcosa nei commenti, usando l'embed. Per scoprire il giusto type potete fare ricerche in internet su google.

Edited by Blurick - 7/3/2014, 22:01