tag:blogger.com,1999:blog-3129665016687033102024-03-10T18:49:42.525+01:00Trendmatcher tussen ICT en Onderwijs ™Als trendmatcher legde ik verbanden tussen trends die ik tegenkwam op internet en hun mogelijk gebruik in het onderwijs.Willem Karssenberghttp://www.blogger.com/profile/10925999475847184830noreply@blogger.comBlogger7125tag:blogger.com,1999:blog-312966501668703310.post-10752919588293113082019-01-25T11:35:00.000+01:002019-01-25T11:35:14.218+01:00Audio embedden in Google Sites<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqVzbfEqkKYj9kyZCIMwhZgGsn2E2bhUXjTYCiLzswhLFKva14xdDhHVPbxXGZ0e1S3ecVzUgIsGtnFQ9XJDKdWvAmlbQzVT03AoZCA5Dm6UNdbyymctIrXvuUXCsRraBkJi1BD9vVSu0/s1600/invoegen.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" data-original-height="220" data-original-width="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqVzbfEqkKYj9kyZCIMwhZgGsn2E2bhUXjTYCiLzswhLFKva14xdDhHVPbxXGZ0e1S3ecVzUgIsGtnFQ9XJDKdWvAmlbQzVT03AoZCA5Dm6UNdbyymctIrXvuUXCsRraBkJi1BD9vVSu0/s1600/invoegen.png" /></a></div>
Wat ik de laatste tijd zie is dat Google Sites steeds meer worden gebruikt. Ze bieden dan ook een mooie manier om makkelijk en snel content te publiceren op internet. Wat me wel opvalt is dat er nog weinig met audio gedaan wordt in Google Sites, terwijl geluid prima geïntegreerd kan worden. Voor mij reden genoeg om alle (mij bekende) mogelijkheden eens op een rijtje te zetten...<br /><br />Volgens mij zijn er zes verschillende manieren om audio te embedden in Google Sites:<br /><ul>
<li>Een audiobestand embedden vanuit Google Drive, <a href="https://sites.google.com/easy2do.nl/audioembedden/vanuit-google-drive" target="_blank">zo doe je dat</a>.</li>
<li>Een map met audiobestanden embedden vanuit Google Drive, <a href="https://sites.google.com/easy2do.nl/audioembedden/google-drive-map" target="_blank">zo doe je dat</a>.</li>
<li>Een audiobestand embedden dat elders op internet beschikbaar is, <a href="https://sites.google.com/easy2do.nl/audioembedden/externe-bestanden" target="_blank">zo doe je dat</a>.</li>
<li>Het kan ook met behulp van een beetje JavaScript, <a href="https://sites.google.com/easy2do.nl/audioembedden/met-javascript" target="_blank">zo doe je dat</a>.</li>
<li>Externe embedcode gebruiken, bijvoorbeeld vanaf <a href="https://sites.google.com/easy2do.nl/audioembedden/audioplatforms/anchor" target="_blank">Anchor</a>, <a href="https://sites.google.com/easy2do.nl/audioembedden/audioplatforms/clyp" target="_blank">Clyp</a>, <a href="https://sites.google.com/easy2do.nl/audioembedden/audioplatforms/soundcloud" target="_blank">Soundcloud</a> of <a href="https://sites.google.com/easy2do.nl/audioembedden/audioplatforms/spreaker" target="_blank">Spreaker</a>.</li>
<li>En dan is er nog een "creatieve" manier via YouTube, <a href="https://www.google.com/url?q=https%3A%2F%2Fwww.trendmatcher.nl%2F2016%2F07%2Faudiobestanden-op-youtube-ja-hoor-dat.html&sa=D&sntz=1&usg=AFQjCNEkbSqjcpn_SbS4J4vmWW6f0BUhYQ">zo doe je dat</a>.</li>
</ul>
<span style="font-size: x-small;">Je kunt het eigenlijk geen embedden noemen, maar OneDrive van Microsoft biedt embedcode aan waarmee je een link kunt maken naar (geluids)bestanden die je daar hebt staan. <a href="https://sites.google.com/easy2do.nl/audioembedden/vanuit-google-drive/vanuit-onedrive" target="_blank">Hier zie je dat</a>.</span><br /><br />Ik heb alle mogelijkheden even op <a href="https://sites.google.com/easy2do.nl/audioembedden/startpagina" target="_blank">Audio embedden in Google Sites</a> op een rijtje gezet.<br />Heb je opmerkingen en/of aanvullingen, dan hoor ik dat graag!ik gahttp://www.blogger.com/profile/03693580058102189888noreply@blogger.com0tag:blogger.com,1999:blog-312966501668703310.post-24026314072178638692019-01-24T13:43:00.000+01:002019-01-24T15:55:17.904+01:00Instaudio, handige online opslag voor je audio!<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-eFDQbv0WmlA/XEmwVRJm5dI/AAAAAAABKC0/TQLEy3CU8wwp2u7ywrDxkSQjICPDbwT-ACLcBGAs/s1600/instaudio.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" data-original-height="280" data-original-width="500" height="179" src="https://2.bp.blogspot.com/-eFDQbv0WmlA/XEmwVRJm5dI/AAAAAAABKC0/TQLEy3CU8wwp2u7ywrDxkSQjICPDbwT-ACLcBGAs/s320/instaudio.png" width="320" /></a></div>
Op mijn zoektocht naar plekken op internet waar je gratis en eenvoudig audiobestanden zou kunnen opslaan kwam ik terecht bij <a href="https://instaud.io/">https://instaud.io/</a><br />
<blockquote class="tr_bq">
"Instaudio lets you share your audio creations quickly. You can upload MP3, WAV and OGG files of up to 15MB."</blockquote>
Je kunt een account aanmaken, maar dat is niet eens nodig om snel en eenvoudig een bestand te uploaden. Zodra je dat gedaan hebt krijg je een pagina te zien met het afspeelbare bestand. Ik heb de "herkenningsmelodie" van Windows95 geupload en kreeg als url: <a href="https://instaud.io/3d5o"><b>https://instaud.io/3d5o</b></a><br />
<br />
<b><span style="background-color: #cccccc; font-size: large;">UPDATE:</span></b><br />
<span style="background-color: #cccccc;">Al heel snel ontving ik via Twitter een reactie van <a href="https://twitter.com/Instaudio" target="_blank">@Instaudio</a>:</span><br />
<blockquote class="tr_bq">
<span style="background-color: #cccccc;">"Het embedden op paginas is niet echt de bedoeling, en werkt na een tijdje niet. Het geluidbestand wordt namelijk elders overgezet na een tijd, en dan werkt je embed niet meer. Plus, embedden kost Instaud.io ook hosting kosten zonder dat er iemand op de site komt."</span></blockquote>
<span style="background-color: #cccccc;">Wat hieronder verder beschreven wordt werkt dus wel, maar slechts voor een paar weken én het is helaas ook niet de bedoeling. Je maakt op deze manier gebruik van server capaciteit van Instaudio terwijl daar niets tegenover staat....</span><br />
<br />
Door even naar de broncode te kijken zag ik dat de directe url naar het bestand zelf er zo uitziet: <a href="https://instaud.io/_/3d5o.mp3"><b>https://instaud.io/_/3d5o.mp3</b></a><br />
<br />
<b>Het verschil is een underscore, een slash en de extensie!</b> Met die wetenschap is het dus heel simpel om een extern bestand te embedden in je Google Site door de volgende code te gebruiken:<br />
<audio controls src="<a href="https://instaud.io/_/3d5o.mp3">https://instaud.io/_/3d5o.mp3</a>"></audio> met dit als resultaat:<br />
<audio controls="" src="https://instaud.io/_/3d5o.mp3"></audio><br />
<a href="https://instaud.io/">Instaudio</a> bestaat al een aantal jaren en is het project van één persoon die dit ooit als alternatief voor Dropbox heeft opgezet. Er is dan ook geen enkele garantie dat de website "voor eeuwig" in de lucht blijft, maar voor niet echt kritische bestanden is dit dus echt een heel mooie en simpele optie. In feite biedt deze site precies de functionaliteit waar ik al een hele tijd naar op zoek ben!<br />
<br />
<a name='more'></a>In plaats van het HTML <audio controls> atribuut te gebruiken kan je audio ook met wat JavaScript code afspelen. Probeer de knoppen hieronder maar eens:<br />
<audio id="1" src="https://instaud.io/_/3djB.mp3"></audio><br />
<button onclick="document.getElementById('1').play()">Deze pagina beluisteren</button> <button onclick="document.getElementById('1').pause()">Pauzeren</button> <button onclick="document.getElementById('1').pause(); document.getElementById('1').currentTime = 0;">Stoppen</button><br />
<br />
De code die ik hiervoor gebruikt heb ziet er zo uit:<br />
<pre><audio id="1" src="https://instaud.io/_/3djB.mp3"></audio></pre>
<pre><button onclick="document.getElementById('1').play()">Deze pagina beluisteren</button> </pre>
<pre><button onclick="document.getElementById('1').pause()">Pauzeren</button> </pre>
<pre><button onclick="document.getElementById('1').pause(); </pre>
<pre>document.getElementById('1').currentTime = 0;">Stoppen</button></pre>
<b>Meer heb je niet nodig om audio zo af te spelen op een webpagina!</b><br />
<b><br /></b>
<b><span style="background-color: cyan; color: red; font-size: large;">Overigens werkt dit ook op Google Sites!!!!</span></b>ik gahttp://www.blogger.com/profile/03693580058102189888noreply@blogger.com0tag:blogger.com,1999:blog-312966501668703310.post-60289472612901627502019-01-21T15:24:00.003+01:002019-01-21T15:24:36.696+01:00Coördinaten puzzelSpelend met de mogelijkheden van JavaScript kwam ik op het idee om een puzzel te maken waarbij je al klikkend dichterbij de oplossing komt. Resultaat is een gewone tabel met daarin een aantal plaatjes die door ze aan te klikken veranderen. Zie ook: <a href="https://www.trendmatcher.nl/2019/01/kraak-de-kluis.html">Kraak de kluis!</a> Dit is natuurlijk een proof of concept, want je kunt het uiteraard een stuk moeilijker maken.<br />
<br />
Probeer het maar uit en begin in A1<br />
<style>
table {
border-collapse: collapse;
background-color: white;
}
table, td, th {
border: 1px solid black;
}
td {
vertical-align: middle;
text-align: center;
font-family: Arial;
width: 40px;
height: 40px;
}
</style><br />
<table><tbody>
<tr style="background-color: #f3f3f3;"><td></td><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
<tr><td style="background-color: #f3f3f3;">1</td><td><img id="1" onclick="Flip('1','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSPiIDgI_vUSra-XqOIZhXx_CmZXa_zSWOtS2qSBSSnuPJmMqj2e_AzcYkjbowZ1hhLfQ-l7iDp0IjeJnz6MU-cjVWEW7LTuG1Fi2SoEQ7ztELs4e9SH6pK2pbYJ73nCfPmDjKhZ5ruXM/s1600/vak1.png','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGQlk6iXuu0pG-xlU6bl5HO4UOxgSlxovqPgxBZvuVl3N7JmS3oe2M0tGhrmsUwDhRw_R8mSLbloqIm2vwqbAFmve2sGd9naW3Shqi1kS0CGjIFI-SjT5SEju6i2oJ6loERACB5Qtcu88/s1600/vak.png')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGU3q3db4WJqFYyR8-Ffy-UOfE_BbusQUui5vDwrz-stFt9tGNldWkfD1CXmgAERn-FHZL7gLyXDB-RAFBn0G08HMcH_ZT3n7r2sfmvExPHGRwZg7O4mAAVJ1hV6je7S8ZtsnH4h3f474/s1600/klik.png" /></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td style="background-color: #f3f3f3;">2</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td style="background-color: #f3f3f3;">3</td><td></td><td></td><td></td><td></td><td><img id="3" onclick="Flip('3','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGQlk6iXuu0pG-xlU6bl5HO4UOxgSlxovqPgxBZvuVl3N7JmS3oe2M0tGhrmsUwDhRw_R8mSLbloqIm2vwqbAFmve2sGd9naW3Shqi1kS0CGjIFI-SjT5SEju6i2oJ6loERACB5Qtcu88/s1600/vak.png','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipyVdfX0rGajVuMt9iyzin95F5QvMuPC-eiuv9EO42j3aJNBB3WYN0PxfYTxHcMTIq3eLHDRFV4YML93WXBrMgBXQ0n4x9PTSbgalDvGtsHXgSaT7xmEaL-BjEmgmTGpa7NYvWyP2sER4/s1600/vak3.png')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGQlk6iXuu0pG-xlU6bl5HO4UOxgSlxovqPgxBZvuVl3N7JmS3oe2M0tGhrmsUwDhRw_R8mSLbloqIm2vwqbAFmve2sGd9naW3Shqi1kS0CGjIFI-SjT5SEju6i2oJ6loERACB5Qtcu88/s1600/vak.png" /></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td style="background-color: #f3f3f3;">4</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td><img id="5" onclick="Flip('5','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGQlk6iXuu0pG-xlU6bl5HO4UOxgSlxovqPgxBZvuVl3N7JmS3oe2M0tGhrmsUwDhRw_R8mSLbloqIm2vwqbAFmve2sGd9naW3Shqi1kS0CGjIFI-SjT5SEju6i2oJ6loERACB5Qtcu88/s1600/vak.png','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiImQSZaSAQXV6RknHAVc9nbQ5dj-0GO-mBctJboXVsL2YkPXS2jUd_TWNBDeIqKbo-1QjrFRAAbail3EHmV9YZX2wT45gzjXrwMRbzvQF8aXgrizuBRa0bt_UZLep97J9FsGJDM293-Tw/s1600/vak5.png')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGQlk6iXuu0pG-xlU6bl5HO4UOxgSlxovqPgxBZvuVl3N7JmS3oe2M0tGhrmsUwDhRw_R8mSLbloqIm2vwqbAFmve2sGd9naW3Shqi1kS0CGjIFI-SjT5SEju6i2oJ6loERACB5Qtcu88/s1600/vak.png" /></td></tr>
<tr><td style="background-color: #f3f3f3;">5</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td style="background-color: #f3f3f3;">6</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td style="background-color: #f3f3f3;">7</td><td></td><td></td><td><img id="4" onclick="Flip('4','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGQlk6iXuu0pG-xlU6bl5HO4UOxgSlxovqPgxBZvuVl3N7JmS3oe2M0tGhrmsUwDhRw_R8mSLbloqIm2vwqbAFmve2sGd9naW3Shqi1kS0CGjIFI-SjT5SEju6i2oJ6loERACB5Qtcu88/s1600/vak.png','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiveb0GjDN5h7e-9W6tVFyDY1XSB2gbtiDlzoCvlyCiP2ZuG7Tvt4-J5FTXs-JLhUPjSS9rxXaBUIXR24Bs9n2aMsjkLL57IA4eoW8Zpgmyl1icWjF42BcU4HNItR85aicMf8hyphenhyphenesNv5VQ/s1600/vak4.png')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGQlk6iXuu0pG-xlU6bl5HO4UOxgSlxovqPgxBZvuVl3N7JmS3oe2M0tGhrmsUwDhRw_R8mSLbloqIm2vwqbAFmve2sGd9naW3Shqi1kS0CGjIFI-SjT5SEju6i2oJ6loERACB5Qtcu88/s1600/vak.png" /></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td style="background-color: #f3f3f3;">8</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td><img id="2" onclick="Flip('2','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGQlk6iXuu0pG-xlU6bl5HO4UOxgSlxovqPgxBZvuVl3N7JmS3oe2M0tGhrmsUwDhRw_R8mSLbloqIm2vwqbAFmve2sGd9naW3Shqi1kS0CGjIFI-SjT5SEju6i2oJ6loERACB5Qtcu88/s1600/vak.png','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjadD1tl9Tt0_GUDyPFC4JCwOv3GW8vR5-5X0F7Q8ofeRvO7JTzXVTTiji2_WOME3oKf_r7fX2zKSNaSiJ2W-jGHSOdOIjQ8RwCCHlYckzaaMSndju_zA8K69qbUI658u2QZFHDc0F3_8Y/s1600/vak2.png')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGQlk6iXuu0pG-xlU6bl5HO4UOxgSlxovqPgxBZvuVl3N7JmS3oe2M0tGhrmsUwDhRw_R8mSLbloqIm2vwqbAFmve2sGd9naW3Shqi1kS0CGjIFI-SjT5SEju6i2oJ6loERACB5Qtcu88/s1600/vak.png" /> </td><td></td><td></td></tr>
<tr><td style="background-color: #f3f3f3;">9</td><td></td><td></td><td></td><td><img id="6" onclick="Flip2('6','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGQlk6iXuu0pG-xlU6bl5HO4UOxgSlxovqPgxBZvuVl3N7JmS3oe2M0tGhrmsUwDhRw_R8mSLbloqIm2vwqbAFmve2sGd9naW3Shqi1kS0CGjIFI-SjT5SEju6i2oJ6loERACB5Qtcu88/s1600/vak.png','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUfnQag-e-wKcx88XoZ4e3JTaZct8II8EKJWzLpwGESOhm_Xe37dPecT10usZ8VqWWTaQMgppflAww_2DgmZ8U9UEn8dP-2epTw-9RtHIXZytjY67qkBgafLHrCK67VeExl3hsP7v4Ezo/s1600/vak6.png')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGQlk6iXuu0pG-xlU6bl5HO4UOxgSlxovqPgxBZvuVl3N7JmS3oe2M0tGhrmsUwDhRw_R8mSLbloqIm2vwqbAFmve2sGd9naW3Shqi1kS0CGjIFI-SjT5SEju6i2oJ6loERACB5Qtcu88/s1600/vak.png" /></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td style="background-color: #f3f3f3;">10</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</tbody></table>
<br />
<!-- Switch images script --> <script type="text/javascript">
function Flip(id,primary,secondary) {
src=document.getElementById(id).src;
if (src.match(primary)) {
document.getElementById(id).src=secondary;
} else {
document.getElementById(id).src=primary;
}
}
function Flip2(id,primary,secondary) {
src=document.getElementById(id).src;
if (src.match(primary)) {
document.getElementById(id).src=secondary;
} else {
document.getElementById(id).src=primary;
}
setTimeout(newPage, 1500);
}
function newPage() {
window.open('https://www.trendmatcher.nl')
}
</script><br />
<br />
Overigens werkt dit ook in <a href="https://sites.google.com/view/ontsnap/puzzel" target="_blank">Google Sites</a>, dus ook te gebruiken voor #escaperooms:-)ik gahttp://www.blogger.com/profile/03693580058102189888noreply@blogger.com0tag:blogger.com,1999:blog-312966501668703310.post-56559828555135705092019-01-18T17:31:00.000+01:002019-01-18T17:48:41.073+01:00Kraak de kluis!<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFCZXtrblN6KzGoaov8tuqbL3tXkhjM3XxacTuZlDAyPVWOMclenmg8fcc2JSo25_S2HZDYPYeXhmJ0fwVrvWi_00ZKlIbX5bKc6pzUu6tqYHcbrQdrANXqyQZzcGUxbx5M-uKBwI8vNg/s1600/kluiscode.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" data-original-height="271" data-original-width="400" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFCZXtrblN6KzGoaov8tuqbL3tXkhjM3XxacTuZlDAyPVWOMclenmg8fcc2JSo25_S2HZDYPYeXhmJ0fwVrvWi_00ZKlIbX5bKc6pzUu6tqYHcbrQdrANXqyQZzcGUxbx5M-uKBwI8vNg/s320/kluiscode.jpg" width="320" /></a></div>Al eerder heb ik gekeken naar mogelijkheden om een virtuele escaperoom te vullen. Kijk daarvoor bij <a href="https://www.trendmatcher.nl/2018/11/de-gemankeerde-qr-code.html">De gemankeerde QR code</a>.<br />
Het idee liet me niet los en deze week vroeg ik me af wat je met behulp van JavaScript kunt doen. Het blijkt namelijk dat Google Sites, waar veel van die escaperooms in gemaakt worden, ook veel JavaScript (helaas niet alles) accepteert. Dat maakt het mogelijk om gevarieerde interactievormen aan te bieden.<br />
<br />
Probeer onderstaande kluis dus maar eens te openen door de cijfercode hieronder te kraken! Ik maak hierbij gebruik van JavaScript dat plaatjes laat wisselen wanneer je erop klikt. Als uitgangspunt heb ik een scriptje genomen dat ik <a href="http://users.aber.ac.uk/ruw/misc/swapimage.php" target="_blank">hier</a> vond, maar dat heb ik wel behoorlijk aangepast. Het leuke is dat dit ook werkt op smartphones en tablets!<br />
<script type="text/javascript">
function Flip(id,primary,secondary) {
src=document.getElementById(id).src;
if (src.match(primary)) {
document.getElementById(id).src=secondary;
} else {
document.getElementById(id).src=primary;
}
}
</script><br />
Ontcijfer de code door de kluiswieltjes in de juiste stand te zetten.<br />
<br />
<img id="ID1" onclick="Flip('ID1','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIMR8D2baznqEOfqgjJKfG0nRwKuqCSjqeFjfnWkQQzFckMAHuO_FIy9bYX8KJbVxd_qgnIGYn87bU0dwpY2TpR7B07S5TfFGMSczdd93-8GjTGKn0ZBTiyzW2_-QAgqGOFsXauv9hFKg/s1600/klok2.png','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaNAYJPqX7yrV9fvAIIIHkG2qIt8KzEm7Mb5JdAVD1NVLIiWoT1fma3daDHrKwH0v2_Cm30Px1ZC54UU2zjadIpDquhgRVoIbFjhJ_mpTABZ8h7Ioa302HSr4wx4EzcmF6ixjRUEqcMwk/s1600/klok1.png')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaNAYJPqX7yrV9fvAIIIHkG2qIt8KzEm7Mb5JdAVD1NVLIiWoT1fma3daDHrKwH0v2_Cm30Px1ZC54UU2zjadIpDquhgRVoIbFjhJ_mpTABZ8h7Ioa302HSr4wx4EzcmF6ixjRUEqcMwk/s1600/klok1.png" width="120" /><img id="ID2" onclick="Flip('ID2','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdTI9YGFX8WeWR6oI113Ju7lZiC6y5-p44fnqcRNZnongq1TpKmCgj_yQTM6x_Epyabdfqf5Lsfl0nMH_FgdZ9YjHl-rmbGxXGTWHYC4LFCpc851tU4pbdsdJLJyZSqK93RDS7meP2Vr8/s1600/klok3.png','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIMR8D2baznqEOfqgjJKfG0nRwKuqCSjqeFjfnWkQQzFckMAHuO_FIy9bYX8KJbVxd_qgnIGYn87bU0dwpY2TpR7B07S5TfFGMSczdd93-8GjTGKn0ZBTiyzW2_-QAgqGOFsXauv9hFKg/s1600/klok2.png')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaNAYJPqX7yrV9fvAIIIHkG2qIt8KzEm7Mb5JdAVD1NVLIiWoT1fma3daDHrKwH0v2_Cm30Px1ZC54UU2zjadIpDquhgRVoIbFjhJ_mpTABZ8h7Ioa302HSr4wx4EzcmF6ixjRUEqcMwk/s1600/klok1.png" width="120" /><img id="ID3" onclick="Flip('ID3','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdTI9YGFX8WeWR6oI113Ju7lZiC6y5-p44fnqcRNZnongq1TpKmCgj_yQTM6x_Epyabdfqf5Lsfl0nMH_FgdZ9YjHl-rmbGxXGTWHYC4LFCpc851tU4pbdsdJLJyZSqK93RDS7meP2Vr8/s1600/klok3.png','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIMR8D2baznqEOfqgjJKfG0nRwKuqCSjqeFjfnWkQQzFckMAHuO_FIy9bYX8KJbVxd_qgnIGYn87bU0dwpY2TpR7B07S5TfFGMSczdd93-8GjTGKn0ZBTiyzW2_-QAgqGOFsXauv9hFKg/s1600/klok2.png')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaNAYJPqX7yrV9fvAIIIHkG2qIt8KzEm7Mb5JdAVD1NVLIiWoT1fma3daDHrKwH0v2_Cm30Px1ZC54UU2zjadIpDquhgRVoIbFjhJ_mpTABZ8h7Ioa302HSr4wx4EzcmF6ixjRUEqcMwk/s1600/klok1.png" width="120" /><img id="ID4" onclick="Flip('ID4','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdTI9YGFX8WeWR6oI113Ju7lZiC6y5-p44fnqcRNZnongq1TpKmCgj_yQTM6x_Epyabdfqf5Lsfl0nMH_FgdZ9YjHl-rmbGxXGTWHYC4LFCpc851tU4pbdsdJLJyZSqK93RDS7meP2Vr8/s1600/klok3.png','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPMIFT7n6eHe5j_YinA0egAFMPniz_SB5a7QiXTb5jX17L9qZn3ol6GuuMCeKI3DamVjFGMoncoAfCtR87ZKIhJpdcurLTn_Z0aSSA1hsy7GV2UaDT4wyQcs_tS93qy6ek3e6DvIm8Cjw/s1600/klok4.png')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaNAYJPqX7yrV9fvAIIIHkG2qIt8KzEm7Mb5JdAVD1NVLIiWoT1fma3daDHrKwH0v2_Cm30Px1ZC54UU2zjadIpDquhgRVoIbFjhJ_mpTABZ8h7Ioa302HSr4wx4EzcmF6ixjRUEqcMwk/s1600/klok1.png" width="120" /><br />
<br />
Vul de gevonden code in en klik op verzend:<br />
<br />
<input autocapitalize="off" autocomplete="off" autocorrect="off" id="tekst" spellcheck="false" type="text" /> <input id="knop" onclick="controleer()" type="button" value="Verzend" /><br />
<div style="font-weight: bold;" id="demo"></div><script>
function controleer() {
document.getElementById("demo").innerHTML = "Even je antwoord controleren...";
setTimeout(newPage, 3000);
}
function newPage() {
window.open('https://sites.google.com/view/ontsnap/' + document.getElementById('tekst').value)
}
</script><br />
<span style="font-size: x-small;">Het kan zijn dat je bij het verzenden van het antwoord een popup melding krijgt. Helaas ben ik er nog niet achter hoe die te omzeilen...</span><br />
<br />
Als je wilt weten hoe ik het gedaan heb moet je op z'n minst de handigheid hebben om in mijn broncode te kijken. Daar vind je alles wat je nodig hebt! :-)ik gahttp://www.blogger.com/profile/03693580058102189888noreply@blogger.com1tag:blogger.com,1999:blog-312966501668703310.post-52752739539203203242013-08-20T16:00:00.000+02:002013-08-20T16:00:12.804+02:00Makkelijk tekst selecteren<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/--jM5kDd5w04/UhN1xKzRTkI/AAAAAAAAJGE/2-cxuLh7_xo/s1600/developPHP.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="182" src="http://3.bp.blogspot.com/--jM5kDd5w04/UhN1xKzRTkI/AAAAAAAAJGE/2-cxuLh7_xo/s320/developPHP.jpg" width="320" /></a></div>
<div contenteditable="true" id="div1" onclick="document.execCommand('selectAll',false,null)">
In mijn vorige bericht bood ik wat code aan en ik wilde het mijn lezers makkelijk maken om die te selecteren. Het was even zoeken, maar de oplossing blijkt zo simpel dat ik hem graag wil delen omdat ik me kan voorstellen dat meer mensen hier wat aan hebben!</div>
<br />
<div contenteditable="true" id="div2" onclick="document.execCommand('selectAll',false,null)">
Waar het om gaat is dat je de tekst(en) die je ter selectie wilt aanbieden binnen een div container zet met een <b>unieke id</b> en de volgende toevoeging: <b>contenteditable="true" onClick="document.execCommand('selectAll',false,null)"</b></div>
<br />
Dat ziet er dan zo uit:<br />
<div contenteditable="true" id="div3" onclick="document.execCommand('selectAll',false,null)">
<pre class="prettyprint"><div id="div1" contenteditable="true" onClick="document.execCommand('selectAll',false,null)">
Tussen de div tags komt de tekst te staan die je wilt laten selecteren.
</div></pre>
</div>
<div contenteditable="true" id="div4" onclick="document.execCommand('selectAll',false,null)">
Wil je meer fragmenten apart aanbieden, dan zet je die tussen dezelfde <div> tags met telkens een andere id. Probeer het maar uit door op de alinea's hierboven of op deze tekst te klikken. Na het selecteren hoef je dan alleen nog maar Control + C (kopiëren) en Control + V (plakken) te gebruiken. Is dat makkelijk of niet?</div>
<br />
<div contenteditable="true" id="div5" onclick="document.execCommand('selectAll',false,null)">
Deze tip heb ik gevonden op <a href="http://www.developphp.com/" target="_blank">developphp.com</a> waar nog veel meer leerzame tutorials te vinden zijn over PHP en MySQL, JavaScript, HTML en CSS, Vector en 3D, Flash Actionscript, Android Dev en andere zaken.</div>
ik gahttp://www.blogger.com/profile/03693580058102189888noreply@blogger.com0tag:blogger.com,1999:blog-312966501668703310.post-44769485880798258602013-06-23T14:01:00.000+02:002013-06-23T14:08:02.252+02:00Broncode netjes weergeven<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-3K6ZTPYitEA/UcbfPKUq_EI/AAAAAAAAIxg/wTi0wpA-gfs/s1600/prettify.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://1.bp.blogspot.com/-3K6ZTPYitEA/UcbfPKUq_EI/AAAAAAAAIxg/wTi0wpA-gfs/s1600/prettify.jpg" /></a></div>Wil je broncode delen en deze op een nette manier weergeven, dan kun je gebruikmaken van <a href="https://code.google.com/p/google-code-prettify/">google-code-prettify</a>. Dat is een Javascript module met eventueel een CSS-bestand dat syntax highlighting van source code snippets in een HTML-pagina mogelijk maakt.<br />
<br />
Het enige wat je daarvoor hoeft te doen is (het pad naar) wat javascript in te voegen op je website. Dat kun je op de pagina doen, maar als je de routine vaker gebruikt is het slimmer om het in je <header> mee te geven. Dit is wat er moet staan:<br />
<pre class="prettyprint"><script src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js'/>
</pre>De code die je wilt weergeven zet je dan tussen <pre <span style="color: blue;">class</span>="<span style="color: green;">prettyprint</span>"> ... </pre> tags. Het werkt met heel veel verschillende programmeertalen, dus niet alleen met HTML.<br />
Hieronder zie je een uitgebreider voorbeeld met de default skin.<br />
<a name='more'></a><pre class="prettyprint"><html>
<head>
<title>google-code-prettify</title>
<script src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js'/>
</head>
<body>
<p>Een voorbeeld:</p>
<pre class="prettyprint">
<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ' + String(world));
}
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>
</pre>
</body>
</html>
</pre>Voorbeelden met andere skins vind je <a href="http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html" target="_blank">hier</a>.<br />
<br />
Als je wilt kun je ook nog de regelnummers laten zien. Het mooie daarbij is dat de nummers niet worden meegenomen als je de tekst selecteert en kopieert.<br />
<pre class="prettyprint linenums"><pre class="prettyprint linenums">
<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ' + String(world));
}
}
</script>
</pre>ik gahttp://www.blogger.com/profile/03693580058102189888noreply@blogger.com0tag:blogger.com,1999:blog-312966501668703310.post-2483967048985910102013-05-29T22:08:00.000+02:002013-05-29T22:11:49.285+02:00Mooie HTML tabel met vaste header<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbN75SMFQp9H_eef7N0I5OjvFhFreXS1ljuUI0Ze0RhbZ3rNwptuolZIByQ9lszS8wi_p3jNNcCqAO5GIpYH9PGwIVravhRpAzYsgQ5hLHEVHAIj1yEnPuTMUJI266JkcPvSJy7tOZEok/s1600/sticky.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="295" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbN75SMFQp9H_eef7N0I5OjvFhFreXS1ljuUI0Ze0RhbZ3rNwptuolZIByQ9lszS8wi_p3jNNcCqAO5GIpYH9PGwIVravhRpAzYsgQ5hLHEVHAIj1yEnPuTMUJI266JkcPvSJy7tOZEok/s400/sticky.jpg" width="400" /></a></div>
Dit bericht is voor de meeste lezers absoluut niet interessant!<br />
<br />
Ik heb echter een tijd lang gezocht naar een manier om de header van een lange tabel in het zicht te houden als je naar beneden scrolt. Uiteindelijk heb ik <a href="http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html" target="_blank">hier</a> gevonden waar ik naar zocht. Met wat prutsen lukte het me ook nog om de code te combineren met andere code die ik gebruik om <a href="http://www.trendmatcher.nl/2012/07/van-google-spreadsheet-naar-sorteerbare.html" target="_blank">oplopend en aflopend te sorteren</a> door op de kolomkoppen te klikken.<br />
<br />
Als voorbeeld hieronder de 10 MBO-instellingen met de meeste <br />
<a name='more'></a>verzonden tweets in de periode van 1 januari 2013 tot 27 mei 2013. Het is maar een voorbeeld natuurlijk. Ga voor het complete overzicht <a href="http://www.trendmatcher.nl/p/mbo-instellingen-op-twitter.html" target="_blank">naar deze pagina</a> waar ik dit ook toepas zodat je tijdens het scrollen door de tabel toch de koppen in beeld houdt. Het leuke is dat dit ook werkt op een iPad en Android tablet!<br />
<br />
De header van de tabel blijft staan als je naar beneden scrollt.<br />
<br />
<div id="sticky-anchor">
</div>
<table border="0" cellpadding="4" cellspacing="0" class="sortable"><thead>
<tr dir="ltr" id="sticky" title="klik om te sorteren" width="500"><td dir="ltr" width="240">Naam</td><td dir="ltr" width="80">Tweets</td><td dir="ltr" width="80">Volgers</td><td dir="ltr" width="80">Volgend</td></tr>
</thead><tbody>
<tr><td align="left" width="240"><a href="http://twitter.com/NovaCollege" target="_blank">ROC Nova College</a></td><td width="80"><div style="text-align: center;">
1226</div>
</td><td width="80"><div style="text-align: center;">
925</div>
</td><td width="80"><div style="text-align: center;">
77</div>
</td></tr>
<tr><td align="left"><a href="http://twitter.com/MBOAmersfoort" target="_blank">MBO Amersfoort</a></td><td><div style="text-align: center;">
1129</div>
</td><td><div style="text-align: center;">
1374</div>
</td><td><div style="text-align: center;">
1388</div>
</td></tr>
<tr><td align="left"><a href="http://twitter.com/heliconNL" target="_blank">Helicon Opleidingen</a></td><td><div style="text-align: center;">
1108</div>
</td><td><div style="text-align: center;">
439</div>
</td><td><div style="text-align: center;">
105</div>
</td></tr>
<tr><td align="left"><a href="http://twitter.com/KW1C" target="_blank">Koning Willem I College</a></td><td><div style="text-align: center;">
627</div>
</td><td><div style="text-align: center;">
652</div>
</td><td><div style="text-align: center;">
100</div>
</td></tr>
<tr><td align="left"><a href="http://twitter.com/mediacollege" target="_blank">Mediacollege Amsterdam</a></td><td><div style="text-align: center;">
494</div>
</td><td><div style="text-align: center;">
1278</div>
</td><td><div style="text-align: center;">
714</div>
</td></tr>
<tr><td align="left"><a href="http://twitter.com/ROCLeiden" target="_blank">ROC Leiden</a></td><td><div style="text-align: center;">
461</div>
</td><td><div style="text-align: center;">
1357</div>
</td><td><div style="text-align: center;">
73</div>
</td></tr>
<tr><td align="left"><a href="http://twitter.com/mbonijmegen" target="_blank">Helicon Nijmegen</a></td><td><div style="text-align: center;">
425</div>
</td><td><div style="text-align: center;">
475</div>
</td><td><div style="text-align: center;">
340</div>
</td></tr>
<tr><td align="left"><a href="http://twitter.com/Alfacollege" target="_blank">Alfa-college</a></td><td><div style="text-align: center;">
407</div>
</td><td><div style="text-align: center;">
1827</div>
</td><td><div style="text-align: center;">
1508</div>
</td></tr>
<tr><td align="left"><a href="http://twitter.com/Cibap" target="_blank">Cibap vakschool voor verbeelding</a></td><td><div style="text-align: center;">
370</div>
</td><td><div style="text-align: center;">
1085</div>
</td><td><div style="text-align: center;">
376</div>
</td></tr>
<tr><td align="left"><a href="http://twitter.com/nijkerkmbo" target="_blank">AOC Groenhorst Nijkerk</a></td><td><div style="text-align: center;">
346</div>
</td><td><div style="text-align: center;">
215</div>
</td><td><div style="text-align: center;">
276</div>
</td></tr>
</tbody></table>
<br />
Misschien vraag je je nog af hoe ik zo snel een HTML tabel krijg van de gegevens uit een Excel bestand? Dat doe ik altijd met behulp van <a href="http://tableizer.journalistopia.com/" target="_blank">TABLEIZER</a>, voor mij een onontbeerlijke tool!<br />
<br />
<br />
<script src="http://www.karssenberg.nl/sorttable.js">
</script><br />
<style>
#sticky {
width: 500px;
background-color: #000;
color: #fff;
font-weight: bold;
cursor: pointer;
}
#sticky.stick {
position: fixed;
top: 0;
z-index: 10000;
width: 500px;
background-color: #000;
color: #fff;
font-weight: bold;
cursor: pointer;
}
</style><br />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><br />
<script>
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>ik gahttp://www.blogger.com/profile/03693580058102189888noreply@blogger.com0