Objecten verplaatsen op een webpagina

Nadat ik de ganzenbordspelen van Herman van Schie en van Tiny Rossar met verplaatsbare pionnen beschikbaar had gesteld kreeg ik veelvuldig de vraag: Hoe doe je dat?

Laat ik voorop stellen: Dit is niets nieuws, maar kan al jaren! Ik maak gebruik van een Javascript, voor het eerst beschikbaar gesteld door Walter Zorn in 2002, maar daarna wel sterk verbeterd.
Wanneer je het Javascript bestand online zet kun je het met allerlei parameters aanroepen waardoor je heel veel mogelijkheden krijgt. Zo kun je niet alleen plaatjes verplaatsen, maar ook tekst of andere objecten die je tussen <div> tags plaatst.

CODECAST, een HTML en CSS editor in je browser

Onlangs schreef thenextweb:

"Watching people code could be the next big thing in live streaming video"

En nu kan dat ook dankzij CODECAST:

"The simplest HTML & CSS editor in your browser with instant previews, for those teaching and learning how to code."

Lekker veel Engels allemaal hè? Nou, CODECAST is gewoon gemaakt door een Nederlander, namelijk Karim Amrani (aka @jibly)
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.
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!
Hieronder een screencast waarin ik laat zien hoe CODECAST werkt.

Maak het makkelijk met een startscherm!

Ik hou van interactie met mijn gehoor en wil in mijn presentaties graag een aantal tools hands-on laten ervaren door ze direct in te zetten. Wat dan altijd veel tijd kost is het doorgeven van al die verschillende url's die je gebruikt. Daarvoor maak ik tegenwoordig per presentatie even snel een startscherm dat als menu kan dienen. Ik zorg ervoor dat het menu er ook goed uitziet op een smartphone en ik maak het wat herkenbaar voor de deelnemers door iets van de huisstijl te pakken van de school waar ik te gast ben. Dat levert me veel tijdwinst op en maakt het voor deelnemers veel makkelijker om snel van de ene tool naar de andere te gaan.
Tenslotte zet ik er ook mijn presentatie zelf neer en het evaluatieformulier. Natuurlijk zorg ik ervoor dat de url nog een tijdje beschikbaar blijft zodat deelnemers ook na de presentatie nog toegang hebben tot de behandelde tools.

Het lijkt veel werk, maar de pagina bestaat uit wat simpele HTML. Gelukkig heb ik een lekker kort domein beschikbaar dat ik hiervoor kan gebruiken. Zo is het startscherm dat ik afgelopen donderdag op de mini-conferentie over mediawijsheid bij het Koning Willem 1 College gebruikte beschikbaar via: easy2do.nl/kw1c
Natuurlijk kan je zo'n menu ook aanmaken in een blogpost en die beschikbaar maken via een verkorte url. Zet die url in de pagina's van je presentatie en je voorkomt veel zoek-ellende bij je publiek!

Statische HTML tabel interactief maken

Microsoft stelt code beschikbaar waarmee je iedere HTML tabel heel makkelijk interactief kunt maken door op de groene Excel Interactive View knop te klikken.

Boven de tabel plaats je de volgende code:
<a href="#" name="MicrosoftExcelButton"></a>
Onder de tabel voeg je dit scriptje toe:
<script src="http://r.office.microsoft.com/r/rlidExcelButton?v=1&amp;kip=1" type="text/javascript"></script>

Meer is er niet nodig om een HTML tabel interactief te maken. Probeer maar uit!
Vermeldenswaard is verder nog dat de routine ook werkt op iPad en Androïd tablet.

Netjes coderen met behulp van CodePen

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.
Vind je het lastig om daarvoor telkens van omgeving en/of editor te wisselen, dan is CodePen 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.

Makkelijk tekst selecteren

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!

Waar het om gaat is dat je de tekst(en) die je ter selectie wilt aanbieden binnen een div container zet met een unieke id en de volgende toevoeging:  contenteditable="true" onClick="document.execCommand('selectAll',false,null)"

Dat ziet er dan zo uit:

<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>

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?

Deze tip heb ik gevonden op developphp.com 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.

Websites hosten bij Google Drive

Ik weet dat het al een tijdje kan, maar in deze screencast wil ik toch even laten zien hoe makkelijk het is en wat de mogelijkheden zijn van het tonen van HTML bestanden via Google Drive.

De instructie die Google zelf geeft betreft het tonen van één HTML bestand, maar ik laat zien dat je een hele map met alle bestanden daarin kunt aanbieden.

Je begint met het maken van een nieuwe map in Google Drive waarbij je bij: delen kiest voor: Openbaar op het web. Iedereen kan daarmee de bestanden in die map zien. Zorg ervoor dat het startbestand de naam index.html heeft en deze zal automatisch getoond worden wanneer de url van de map gebruikt wordt. Vervolgens kun je ook submappen aanmaken met daarin plaatjes, javascript- en stylesheetbestanden.

Maar het mooiste komt nog!

Tabel Import Wizard van PDF naar Google Spreadsheets

Een tabel vanuit een PDF bestand kopiëren en plakken in een Google Spreadsheet gaat niet zo maar. Als je dat probeert komt alles in één cel terecht.

Ik heb nu een tool gevonden bij GoogleAppsTips en vertaald die de gegevens uit een PDF tabel - die gescheiden worden door spaties of tabs - converteert naar een HTML tabel die correct geïmporteerd wordt in Google Spreadsheets.

Kopieer en plak de inhoud van een tabel vanuit het PDF bestand simpelweg naar het tekstkader op deze pagina en klik dan op Maak HTML.
Klik daarna op Selecteer alles en plak het resultaat in je Spreadsheet.

NB: De tool werkt helaas alleen goed als er geen spaties gebruikt worden in de cellen en is daarmee vooral interessant voor het overnemen van getallen. Workaround is om daar waar nodig spaties te vervangen door streepjes.

Is het een plaatje? Nee hoor, gewoon HTML

Het is natuurlijk een leuke uitdaging om te zien of je een poster ook volledig in HTML kunt maken.
Met behulp van Google fonts 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).

Wat wil je dat docenten doen met ICT?
Foute antwoorden	Goede antwoorden
Een Prezi maken  Beginnen met bloggen  Wordles creëren  Animotos online zetten  Flipcharts ontwerpen  Videos produceren  Bericht op Edmodo plaatsen  Een digibord gebruiken  Apps ontwikkelen	Bewustwording vergroten  Gesprekken beginnen  Antwoorden vinden (op hun vragen)  Samenwerken met anderen  Ideeën uitwisselen  Het verschil maken  Aktie ondernemen  Verandering aansturen
ICT is een middel, geen doel!

Broncode netjes weergeven

Wil je broncode delen en deze op een nette manier weergeven, dan kun je gebruikmaken van google-code-prettify. Dat is een Javascript module met eventueel een CSS-bestand dat syntax highlighting van source code snippets in een HTML-pagina mogelijk maakt.

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:

<script src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js'/>

De code die je wilt weergeven zet je dan tussen <pre class="prettyprint"> ... </pre> tags. Het werkt met heel veel verschillende programmeertalen, dus niet alleen met HTML.
Hieronder zie je een uitgebreider voorbeeld met de default skin.

Mooie HTML tabel met vaste header

Dit bericht is voor de meeste lezers absoluut niet interessant!

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 hier 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 oplopend en aflopend te sorteren door op de kolomkoppen te klikken.

Als voorbeeld hieronder de 10 MBO-instellingen met de meeste