Archivio per la tag 'webdesign'

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.

Il Metropolitan Museun of Art di New York mette a disposizione quasi 400.000 immagini gratuite sotto licenza CC

Il Metropolitan Museun of Art di New York mette a disposizione quasi 400.000 immagini gratuite sotto licenza Creative Commons senza vincoli di copyright.

Ovviamente si trovano foto e immagini bellissime che possono essere scovate attraverso un apposito motore di ricerca interno al sito in base ad alcuni criteri: autore, tipo, periodo storico, localizzazione geografica, materiale, tipo di oggetto.

Una volta trovata l’immagine da scaricare, oltre alla descrizione dell’opera, sarà possibile effettuare il download con un semplice click e riutilizzarla liberamente per i nostri progetti (vedi immagine sopra).

Si tratta di un catalogo di immagini digitali anche di alta qualità molto importante, davvero imperdibile anche e soprattutto per la scuola e gli insegnanti.

Thinglink: annotare e condividere immagini e video

Thinglink è uno strumento che permette di annotare e condividere immagini e video già residenti nel web oppure foto caricate dal nostro computer o device.

E’ un servizio gratuito che consente di condividere i nostri lavori e utilizzare quelli elaborati da altri utenti.

Thinglink  è disponibile anche come app iOS e Android.

Si tratta dunque di uno strumento in grado di offrire numerosi spunti didattici agli insegnanti e non solo.

Vedi video tutorial in italiano di App per prof e quello di Laura Cimetta .

Fotor: editor di foto online e potente strumento per creare grafiche digitali di qualità

fotor

Molti utenti di smartphone Android e iOS già conosceranno l’app Fotor, una dei più diffusi editor di immagini del Play Store e dell’Apple Store.

Tuttavia Fotor offre anche un editor foto online da utilizzare con un semplice navigatore web tramite un computer.

Il software non sarà certo Photoshop ma di sicuro è uno dei migliori, più completi e più facili da usare via web. Inoltre non c’è bisogno di installare nessun programma e può tornare utile quindi per modificare immagini e foto al volo in qualunque circostanza, disponendo semplicemente di una connessione ad internet.

Fotor presenta gli strumenti grafici tipici di questo genere di applicazioni (ritaglio, rotazione, ombre, luminosità, contrasto, saturazione, ecc.) ma include anche l’opzione resize per ridurre il peso di un file e funzioni HDR.

Ci sono inoltre un’infinita gamma di effetti e di filtri fotografici, una nutrita serie di funzionalità di foto ritocco per migliorare la bellezza di un viso, una generosa collezione di cornici e di adesivi (watermark) già pronti, la possibilità di inserire scritte di testo in vari font e colori.

Questa fantastica piattaforma, come se non bastasse, aggiunge le funzioni Collage e Design.

La prima, come ben si intuisce, permette di creare magnifici collage al volo in tutta semplicità con le nostre foto e un’infinita varietà di grafiche e template già pronti.

La funzione Design invece consente di creare grafiche a partire da schemi pre impostati: testate per siti internet e social network, post da pubblicare nei social, banner, cartoline, poster, copertine, locandine da personalizzare e tanto altro ancora.

In definitiva abbiamo a che fare non solo con un semplice editor di immagini ma anche di un potente mezzo per creare grafiche digitali di qualità senza troppo sforzo.

Fotor è uno strumento gratuito super completo, che può essere usato anche senza doversi registrare gratuitamente

Da marcare assolutamente tra i nostri siti preferiti.

 

 

Logaster: creare loghi professionali in modo semplice e rapido

logaster

Logaster è un’interessante applicazione web che consente di creare loghi professionali in modo semplice e rapido, senza usare complicati e costosi software di grafica digitale.

Il processo di realizzazione di un logo avviene attraverso una procedura guidata in in quattro passi.

Inizialmente si digita una scritta e si sceglie una tipologia selezionando una delle tante categorie di loghi a disposizione.

A questo punto dobbiamo scegliere uno tra le centinaia di loghi già pronti proposti. La scelta è davvero enorme e vengono messe a disposizione un’infinità di grafiche davvero accattivanti e di notevole impatto visivo.

Il terzo passo ci consente di entrare in un apposito editor web per personalizzare il design, in particolare i colori della scritta, dell’immagine e lo sfondo del logo. Il tutto avviene con un semplice click del mouse scegliendo una grafica  già pronta tra quelle proposte.

Concluse tutte le facili procedure non resta che scaricare il nostro logo. Purtroppo solo i loghi di piccole dimensioni sono gratuiti.

Emaze: software per creare presentazioni online con funzionalità avanzate

emaze

Emaze è un’eccellente applicazione web che permette di creare sofisticate presentazioni di nuova generazione online con funzionalità avanzate che fornisce anche un’apposita area per insegnanti e studenti chiamata Emaze Education.

Si pone come alternativa a Prezi, Powtoon e a tutti gli strumenti similari presenti ormai a decine in internet.

Emaze offre degli straordinari template da cui partire per realizzare fantastiche presentazioni con caratteristiche particolarmente accattivanti, capaci di attrarre l’attenzione del pubblico o degli studenti di una classe durante una lezione, con effetti 3D, animazioni, grafiche particolari pensate per ogni contesto, evento e situazione.

Scelto un template si accede all’editor e si può procedere alla modifica e alla creazione della presentazione.

Come detto Emaze offre una incredibile varietà di personalizzazioni della grafica: si possono modificare le immagini inserite, le scritte, la disposizione degli elementi, aggiungere link, foto, video, forme, grafici e tanto altro.

Le slide offerte da ciascun template offrono una vasta gamma di soluzioni con immagini e formattazioni precaricate che possono essere facilmente modificate ed adattate a qualsiasi esigenza comunicativa.

Le presentazioni possono essere rese pubbliche o mantenute private,  salvate in HTML5, video in  mp4, PDF o nel formato proprietario di Emaze e visualizzate con apposito viewer gratuito, inserite in una pagina web tramite codice embed, condivise nei social network o con persone che invitiamo a collaborare.

Emaze offre anche uno strumento per importare presentazioni Powerpoint chiamato Emazify ed è una vera e propria community dove esplorare e utilizzare i lavori creati da altri utenti

Emaze può essere usato gratuitamente con limitazioni ma educatori e studenti certificati possono usufruire di un piano premium pro a prezzi agevolati.

Ecco una bozza di presentazione come esempio fatta da me:

Powered by emaze


albertopiccini.it

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

Seguimi

Fanpage: