Archivio per la tag 'html'

Come inserire una galleria di foto e un elenco di file di Google Drive in una pagina web

Per quanti usano le Google App ed in particolare Google Drive, per le aziende che usano le Google Apps for Work o le Google Apps for Education (ora semplicemente chiamate G Suite e G Suite for Education), per i webmaster in generale e per gli insegnanti in particolare che si occupano del sito web della scuola, può tornare comodo questo breve tutorial su come inserire una galleria di foto e un elenco di file residenti in Google Drive in una pagina web.

Dal momento che i file non risiederanno direttamente sul nostro sito, questa pratica è molto opportuna per non sovraccaricare la pagina web  rendendola lenta nel caricamento e per non consumare lo spazio acquistato dall’hosting provider, generalmente limitato, evitando eventuali costi aggiuntivi di abbonamento.

La procedura è piuttosto semplice e non richiede grande conoscenza dei linguaggi di programmazione. Eccola:

  1. creare una cartella in Google Drive e assegnarle un nome
  2. inserire i file o le immagini da mostrare dentro la cartella e concludere l’upload
  3. renderla pubblica cliccandoci sopra con il tasto destro del mouse, condividi>avanzate>Pubblico sul Web – Chiunque abbia accesso a Internet può trovare e visualizzare
  4. procurarsi l’ID della cartella aprendola, si tratta di una striscia di caratteri che si trova nella URL della barra di navigazione del browser dopo la scritta folders e lo slash (vedi sotto):

https://drive.google.com/drive/folders/ID

A questo punto non vi resta che copiare ed incollare nella vostra pagina web questa striscia di codice opportunamente modificata nella parte in grassetto e salvare:

<iframe style="width: 500px; height: 500px; border: 0;" src="https://drive.google.com/embeddedfolderview?id=IDFOLDER#grid" width="300" height="150">&lt;br /&gt;</iframe>

Oppure, se usate G Suite o G Suite for Education, quest’altra striscia dove mettere anche il nome a dominio del sito su cui sono installate le G Suite:

<iframe style="width: 100%; height: 600px; border: 0;" src="https://drive.google.com/a/NOMEDOMINIO/embeddedfolderview?id=IDFOLDER#grid" width="300" height="150">&lt;br /&gt;</iframe>

In questo modo, con l’attributo grid, otterrete una cornice iframe a griglia.

Se invece volete una visione a lista basta cambiare l’attributo grid con list.

Si può infine modificare la dimensione della cornice intervenendo sul numero di pixel in altezza e larghezza o sostituendo px con il simbolo della percentuale che ovviamente non deve superare il 100%.

Vedi sotto un esempio di codice di una lista di file con percentuale:

<iframe src="https://drive.google.com/embeddedfolderview?id=IDFOLDER#list" style="width:100%; height:600px; border:0;"></iframe>

Ecco un esempio di una serie di gallerie di immagini a griglia inserite nel mio blog didattico qui.

Cliccando su una di esse si aprirà in una nuova finestra del browser dove potrà essere zoomata e scaricata.

Statsgram: analisi statistiche di qualsiasi sito web, HTML info, Whois, ranking e tanto altro

Statsgram è un eccellente servizio web in grado di offrire analisi statistiche di qualsiasi sito web, HTML info, Whois, ranking e tanto altro.

Offre infatti anche le principali search query, pagerank, reputazione nel paese di provenienza, Alexa, indicizzazioni dei motori di ricerca, link in uscita, un elenco dei siti simili, i DNS, il tempo di carica della pagina, il valore stimato eccetera.

Per accedere ai risultati basta incollare un URL e procedere nell’apposito campo.

Statsgram è gratuito e non richiede registrazione.

Onepager: creare splendidi siti web facilmente senza conoscere i linguaggi di programmazione

Onepager è un’ottima applicazione web che consente di creare splendidi siti web facilmente senza conoscere i linguaggi di programmazione.

Si accede e in pochi minuti, attraverso un pratico editor visuale, è possibile personalizzare layout grafico e contenuti del sito.

Perfetto per pubblicizzare un business, un azienda, un marchio, un prodotto in modo davvero semplice ed intuitivo.

Una volta concluse le operazioni di creazione si può salvare il progetto in un dominio di proprietà o usare il link proposto dall’applicazione.

Onepager è uno strumento che costa circa 10 dollari al mese.

Adobe Muse: software gratuito per disegnare e pubblicare siti web senza conoscere HTML

muse

Adobe Muse è un software gratuito per disegnare e pubblicare siti web senza conoscere HTML.

Sviluppato in Adobe AIR può essere scaricato ed usato liberamente durante la fase beta in tutte le piattaforme (Windows, Linux e Mac), poi passerà a pagamento.

Adobe Muse segna un importante primo passaggio di Adobe da Flash verso HTML5, privilegiando la sicurezza e il risparmio delle risorse di sistema nella programmazione di pagine web.

Completo di guida e di servizio di web hosting, Muse (code name) potrebbe essere una soluzione per chi vuole gestire eleganti siti web senza troppe complicazioni.

Intuitivo e facile da utilizzare, con un interfaccia simile a un Photoshop semplificato, vale la pena approfittarne.

Smore: creare pagine web gratis online senza conoscere l’HTML

smore

Smore è un’applicazione web che permette di creare pagine web gratis online senza conoscere l’HTML.

Il suo funzionamento è semplicissimo. Ci si connette via FaceBook, si sceglie un titolo, si scrive il contenuto attraverso un semplice editor visuale, si sceglie un tema grafico e si pubblica la pagina in internet.

Le pagine pubblicate possono essere condivise nei social network con un click.

Smo.re è un servizio del tutto gratuito.

Chop: condividere codice online

chop

Chop è un ottimo sistema per condividere codice online.

Si tratta di un’applicazione molto semplice da usare, pensata per programmatori, blogger, webmaster, web designer, gestori di siti web ma che può essere usata comodamente da chiunque.

Accedendo al servizio e otterremo una campo bianco in cui digitare o incollare una porzione di codice HTML, PHP, JavaScript, CSS, Ruby…

Il codice può anche essere inserito tramite URL.

Otterremo un link da condividere via internet dove il codice sarà mostrato tramite un editor con le righe numerate che può a sua volta essere modificato e commentato da altri utenti.

Il link può essere condiviso con altri programmatori, con colleghi e amici in modo da ottenere informazioni online, per correggere il codice da errori o per trasferirlo da una persona all’altra senza dfficoltà.

Chop è uno strumento collaborativo gratuito che non richiede registrazione.

Perfetto per ottenere consigli e feedback da altre persone esperte di linguaggi di programmazione.


albertopiccini.it

Se stai cercando notizie e contenuti sul mondo della Scuola Primaria, clicca sul banner sopra.

Seguimi

Fanpage: