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.comBlogger3125tag:blogger.com,1999:blog-312966501668703310.post-60886250131545957592015-02-21T17:51:00.000+01:002015-02-21T17:51:25.352+01:00CODECAST, een HTML en CSS editor in je browser<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDubv2zk17c1IS8vJo53btJJzG8QmAJz4rbb41SzG1scu5Si0iOyLk8e9dQIrPVhMVVI5SJDBl_ikjNasTaYhwBGMbhyeTksa_05DZpjH26YFCcChTQKnONvp6wNUYA_YsvaY8UuWX4uk/s1600/CODECAST.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDubv2zk17c1IS8vJo53btJJzG8QmAJz4rbb41SzG1scu5Si0iOyLk8e9dQIrPVhMVVI5SJDBl_ikjNasTaYhwBGMbhyeTksa_05DZpjH26YFCcChTQKnONvp6wNUYA_YsvaY8UuWX4uk/s1600/CODECAST.png" height="266" width="400" /></a></div>
Onlangs schreef <a href="http://thenextweb.com/opinion/2015/02/10/watching-people-code-next-big-thing-live-streaming-video/" target="_blank">thenextweb</a>:<br />
<blockquote class="tr_bq">
<span style="color: red;"><b>"Watching people code could be the next big thing in live streaming video"</b></span></blockquote>
En nu kan dat ook dankzij <a href="http://codecast.me/" target="_blank">CODECAST</a>:<br />
<blockquote class="tr_bq">
<b>"The simplest HTML & CSS editor in your browser with instant previews, for those teaching and learning how to code."</b></blockquote>
Lekker veel Engels allemaal hè? Nou, <a href="http://codecast.me/" target="_blank">CODECAST</a> is gewoon gemaakt door een Nederlander, namelijk Karim Amrani (aka <a href="https://twitter.com/Jibly" target="_blank">@jibly</a>)<br />
Deze week lanceerde hij de tool die hij in twee dagen heeft geschreven. Een paar dagen later hadden al meer dan 10.000 mensen de tool gevonden. Terecht, want het blinkt uit door zijn eenvoud.<br />
Het scherm in je browser wordt gesplitst in tweeën. Aan de linkerkant de HTML code en aan de rechterkant zie je "on the fly" het resultaat verschijnen terwijl je aan het typen bent. Zo kun je dus heel mooi screencasts maken van je coderingswerk, maar het is dus ook goed bruikbaar om HTML en CSS te leren. Karim gaat het nog mogelijk maken dat je ook met Javascript kunt werken, dus het wordt nóg mooier!<br />
Hieronder <a href="https://www.youtube.com/watch?v=kLiaI0lleUA" target="_blank">een screencast</a> waarin ik laat zien hoe CODECAST werkt.<br />
<a name='more'></a><br />
<iframe allowfullscreen="" frameborder="0" height="360" src="https://www.youtube.com/embed/kLiaI0lleUA?rel=0" width="640"></iframe>ik gahttp://www.blogger.com/profile/03693580058102189888noreply@blogger.com0tag:blogger.com,1999:blog-312966501668703310.post-4011240175089273682013-09-24T14:02:00.000+02:002013-09-24T14:02:33.019+02:00Netjes coderen met behulp van CodePen<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-bJXy1KVbUSY/UkF-Gt9388I/AAAAAAAAJPo/FjCmvS4CteQ/s1600/CodePen.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="257" src="http://1.bp.blogspot.com/-bJXy1KVbUSY/UkF-Gt9388I/AAAAAAAAJPo/FjCmvS4CteQ/s400/CodePen.jpg" width="400" /></a></div>
Wanneer je (je leerlingen) wilt leren om op een nette manier HTML pagina's te schrijven, dan weet je waarschijnlijk dat je het beste de HTML, CSS en JS code gescheiden kunt houden. Dit maakt het programmeren zuiverder en overzichtelijker.<br />
Vind je het lastig om daarvoor telkens van omgeving en/of editor te wisselen, dan is <a href="http://codepen.io/" target="_blank">CodePen</a> absoluut een uitkomst. In één overzichtelijk scherm heb je alle code bij elkaar en zie je gelijk wat er gebeurt als je iets aanpast of verandert.<br />
<a name='more'></a><br />
Je kunt een gratis account aanmaken en dan gelijk aan de slag gaan met het maken van een nieuwe Pen, of je bladert door de bijdragen van anderen. Er zitten juweeltjes van stukjes code bij! Pens zijn natuurlijk te delen en ook te embedden op webpagina's. Dat ziet er dan bijvoorbeeld zo uit:<br />
<br />
<div class="codepen" data-default-tab="result" data-height="266" data-slug-hash="nEmdw" data-theme-id="1386" data-user="trendmatcher">
See the Pen <a href="http://codepen.io/trendmatcher/pen/nEmdw">Show/hide</a> by Willem Karssenberg (<a href="http://codepen.io/trendmatcher">@trendmatcher</a>) on <a href="http://codepen.io/">CodePen</a></div>
<script async="" src="http://codepen.io/assets/embed/ei.js"></script><br />ik gahttp://www.blogger.com/profile/03693580058102189888noreply@blogger.com0tag:blogger.com,1999:blog-312966501668703310.post-16055492818129878142013-07-13T16:11:00.000+02:002013-07-15T23:38:44.450+02:00Is het een plaatje? Nee hoor, gewoon HTMLHet is natuurlijk een leuke uitdaging om te zien of je een poster ook volledig in HTML kunt maken.<br />
Met behulp van <a href="http://www.google.com/fonts/" target="_blank">Google fonts</a> kan je fonts gebruiken die je niet perse op je computer hoeft te hebben. Lastigste was nog om de bullets van de opsomming ook in het wit te krijgen, maar een beetje CSS doet dan wonderen. Onderstaande kun je dus gewoon als tekst selecteren (en eventueel hergebruiken).<br />
<link href="http://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet" type="text/css"></link><br />
<div style="font-family: 'Permanent Marker', cursive; text-transform: uppercase;">
<table bgcolor="#808080"><tbody>
<tr><td colspan="2"><div style="text-align: center;">
<span style="color: white; font-size: x-large;"><b><i>Wat wil je dat docenten<br />
doen met ICT?</i></b></span><br />
<hr style="background-color: white; height: 5px; width: 90%;" />
</div>
</td></tr>
<tr><td><div style="text-align: center;">
<span style="color: white; font-size: large;"><b><i>Foute antwoorden</i></b></span><br />
<hr style="background-color: white; height: 4px; width: 80%;" />
</div>
</td><td><div style="text-align: center;">
<span style="color: white; font-size: large;"><b><i>Goede antwoorden</i></b></span><br />
<hr style="background-color: white; height: 4px; width: 80%;" />
</div>
</td></tr>
<tr><td valign="top"><ul class="wit">
<li><span style="color: white;"><i>Een Prezi maken </i></span></li>
<li><span style="color: white;"><i>Beginnen met bloggen </i></span></li>
<li><span style="color: white;"><i>Wordles creëren </i></span></li>
<li><span style="color: white;"><i>Animotos online zetten </i></span></li>
<li><span style="color: white;"><i>Flipcharts ontwerpen </i></span></li>
<li><span style="color: white;"><i>Videos produceren </i></span></li>
<li><span style="color: white;"><i>Bericht op Edmodo plaatsen </i></span></li>
<li><span style="color: white;"><i>Een digibord gebruiken </i></span></li>
<li><span style="color: white;"><i>Apps ontwikkelen</i></span></li>
</ul>
</td><td valign="top"><ul class="wit">
<li><span style="color: white;"><i>Bewustwording vergroten </i></span></li>
<li><span style="color: white;"><i>Gesprekken beginnen </i></span></li>
<li><span style="color: white;"><i>Antwoorden vinden<br />
(op <u>hun </u>vragen) </i></span></li>
<li><span style="color: white;"><i>Samenwerken met anderen </i></span></li>
<li><span style="color: white;"><i>Ideeën uitwisselen </i></span></li>
<li><span style="color: white;"><i>Het verschil maken </i></span></li>
<li><span style="color: white;"><i>Aktie ondernemen </i></span></li>
<li><span style="color: white;"><i>Verandering aansturen</i></span></li>
</ul>
</td></tr>
<tr><td colspan="2"><div style="text-align: center;">
<span style="color: white; font-size: x-large;"><i>ICT is een middel, geen doel!</i></span></div>
</td></tr>
</tbody></table>
</div>
<style type="text/css">
ul.wit {
list-style: disc;
color: white;
}
</style>ik gahttp://www.blogger.com/profile/03693580058102189888noreply@blogger.com0