Embedded Files
1 Wat is embedding?
1 Wat is embedding?
Embedding is een techniek waarmee je binnen een website een "venster" creëert dat toegang biedt tot andere websites, bronnen, toepassingen of data.
Google streeft ernaar het embedden te vergemakkelijken, vaak door simpelweg een link als bron te gebruiken, waarna Google de rest regelt.
Dit is van toepassing op verschillende elementen zoals Google- en Microsoft-documenten, externe websites, PDF's, presentaties, tekeningen, foto's, spreadsheets, mappen, video's, YouTube en meer.
Google biedt automatisch een "viewer" aan voor verschillende soorten documenten, waardoor ze zichtbaar worden in je site.
Soms is het echter noodzakelijk om code te gebruiken voor het inbedden, vooral voor bepaalde functionaliteiten.
Google biedt ook hier de mogelijkheid voor, waarbij externe content zoals simulatoren, webapplicaties of andere educatieve technologieën zoals Kahoot en Quizlet perfect kunnen draaien op een Google Site.
2 Toepassingen
2 Toepassingen
2.1 Standaard documenten
2.1 Standaard documenten
Google Sites biedt een breed scala aan mogelijkheden om documenten in te voegen. Je kunt zowel Google-documenten als documenten van andere providers invoegen.
Om een document in te voegen, ga je naar de pagina waarop je het document wilt invoegen.
Klik vervolgens op Invoegen en selecteer het type document dat je wilt invoegen.
Als je een document van een andere provider wilt invoegen, klik je op Uploaden en selecteer je het bestand.
Google Sites voegt het document vervolgens in op de pagina.Google kiest automatisch de juiste viewer voor het document.
Conclusie
Embedding is een krachtige functie die je kunt gebruiken om je Google Sites te verbeteren.
Met embedding kun je informatie delen, je site interessanter en aantrekkelijker maken en samenwerking bevorderen.
2.2 Simulator integratie via link
2.2 Simulator integratie via link
Om een simulator via een link in Google Sites te integreren, doe je het volgende:
Open de pagina waarop je de simulator wilt invoegen.
Klik op Invoegen en selecteer Via URL.
Voer de URL van de simulator in.
Klik op Invoegen.
Google Sites zal de simulator vervolgens invoegen op de pagina.
Je kunt de grootte en positie van de simulator aanpassen door deze te slepen en te verplaatsen.
Voorbeeld
In het volgende voorbeeld is een simulator van de weerstandsimulator van Phet in Google Sites geïntegreerd.
De simulator is ingesteld om de hele pagina te gebruiken.
Opties
Wanneer je een simulator via een link in Google Sites invoegt, heb je de volgende opties:
Hele pagina:
De hele simulator wordt ingesloten in je site.Voorbeeld:
Er wordt een link met een voorbeeld van de simulator ingesloten in je site.
Je kunt de gewenste werking selecteren door op de gewenste optie te klikken in het dialoogvenster Via URL invoegen.
Toepassingen
Simulatoren kunnen op een verscheidenheid aan manieren in Google Sites worden gebruikt.
Ze kunnen bijvoorbeeld worden gebruikt om:
Leerstof te illustreren
Experimenten uit te voeren
Interactieve inhoud te creëren
Simulatoren kunnen een waardevolle aanvulling zijn op je Google Sites-sites.
1 Voorbeeld keuze
1 Voorbeeld keuze
2 Hele pagina keuze
2 Hele pagina keuze
2.3 Andere websites
2.3 Andere websites
Sommige websites kunnen eenvoudig worden ingebed in Google Sites door de URL van de website te kopiëren en te plakken op de pagina waar je de website wilt invoegen.
Een voorbeeld
Een voorbeeld van een website die op deze manier kan worden ingebed is mapnificent.
Deze website kan worden gebruikt om afspraken te maken door gebruik te maken van het openbaar vervoer.
Aanpassen van de grootte
De grootte van het ingesloten venster van de website kun je aanpassen door het venster te slepen en te verplaatsen.
De automatische aanpassing van de inhoud aan je schermgrootte (responsief) werkt hierbij meestal niet, waardoor er schuifbalken zichtbaar kunnen worden.
2.4 Voorbeeld 'Kaart'
2.4 Voorbeeld 'Kaart'
Opmerking:
wat hier als 'Kaart' wordt benoemd is eigenlijk een website.
rare vertalingskronkel valt niet te vermijden.
Je ziet dat bij deze link Google je enkel een Voorbeeld laat zien.
De reden kan zijn dat de site eigenaar het embedden niet toe laat.
Toch tracht Google er een zo goed mogelijke presentatie van te maken.
Wat er in het voorbeeld getoond wordt kan je nog aanpassen in de Kaartkoppeling , zoals je in de 3 onderstaande voorbeelden kan zien.
1 Afbeelding tonen
1 Afbeelding tonen
2 Afbeelding en Titel tonen
2 Afbeelding en Titel tonen
2.5 Embedding HTML code
2.5 Embedding HTML code
Wanneer de automatische embedding niet het gewenste resultaat geeft, kun je gebruik maken van de HTML embedding code.
Deze code geeft je meer controle over de weergave van de ingebedde content.
Voorbeeld: een diagram van Draw.IO
Als voorbeeld gaan we gebruik maken van een diagram gemaakt met Draw.IO (Diagrams.net), een add-on ontwikkeld in HTML5 en JavaScript.
De interface kan worden gebruikt om diagrammen te maken, zoals stroomdiagrammen, wireframes, UML-diagrammen, organigrammen en netwerkdiagrammen.
1 Insluit met URL
1 Insluit met URL
Wanneer je een diagram van Draw.IO wilt invoegen in je Google Site door de URL van het diagram te kopiëren en te plakken, krijg je de melding dat de pagina niet kan worden ingesloten vanwege siterechten van de provider.
Dit komt omdat Draw.IO zijn eigen viewer gebruikt voor het weergeven van diagrammen.
Google Sites ondersteunt niet automatisch het invoegen van diagrammen die gebruikmaken van een externe viewer.
Het is niet mogelijk om op een eenvoudige manier een diagram van Draw.IO in te voegen in je Google Site door de URL van het diagram te kopiëren en te plakken.
Er zijn wel oplossingen om een diagram van Draw.IO in te voegen in je Google Site.
Een van deze oplossingen is om de HTML5 code te gebruiken die in de app wordt gegenereerd.
Deze code kun je vervolgens invoegen in je Google Site.
2 HTML code aanmaak
2 HTML code aanmaak
De methode om een HTML code te genereren is, is verschillende en specifiek voor iedere toepassing.
Bij sommige toepassingen zal het zelfs helemaal niet lukken
Dit wordt hier niet behandeld maar een procedure voor Draw.IO kan je vinden in drawio.com/embed-diagrams-google-sites, waarvan je hier het scherm ziet.
3 Invoegen
3 Invoegen
We maken gebruik van de mogelijkheid "Code insluiten" in het Insluiten menu.
In het vak kan je de HTML code plakken die je uit de applicatie hebt verkregen.
Druk op Volgende om het voorbeeld te zien.
Indien het voorbeeld correct wordt getoond, druk je op Invoegen om het te plaatsen in je site.
De grootte van het venster kan aangepast worden, zodat dit diagram mooi zichtbaar wordt op de site.
4 Voorbeeld
4 Voorbeeld
Met HTML embedding kun je complexe applicaties in je cursussite integreren.
Dit biedt heel wat extra mogelijkheden.
Opmerking:
Als je Draw.IO als toepassing in je Drive Apps hebt staan, kun je een URL genereren voor een diagram.
Deze URL kun je vervolgens in je site invoegen.
Andere toepassingen hebben andere mogelijkheden.
Er is dus geen algemene procedure voor alle toepassingen.
Diagram Demo.drawio5 Aandacht
5 Aandacht
Deze techniek maakt gebruik van een "iframe" (venster).
Dit betekent dat alle toegangsrechten en bewerkingen plaatsvinden op een externe server.
Deze gegevens zijn dus niet beschermd door de privacy/data protectie richtlijnen van VDAB.
Alle gegevens die de cursist op deze manier verstrekt, worden niet bewaard op VDAB-servers.
Houd hier rekening mee, omdat dit mogelijk privacy problemen kan veroorzaken voor je cursisten.
Page updated
Report abuse