tag:blogger.com,1999:blog-62746131984164007882024-02-19T06:37:43.049+00:00Collaborative Tools ProjectCollaborative Tools ProjectTom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.comBlogger108125tag:blogger.com,1999:blog-6274613198416400788.post-73402962922814793732020-07-29T13:52:00.007+01:002020-08-01T13:39:42.477+01:00How To Create An Android App That Posts Pictures To Google Sheets<font face="helvetica"><br /></font><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica">I used the <a href="http://appinventor.mit.edu/">MIT App Inventor site</a> to create an Android app that...</font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><ul style="text-align: left;"><li><font face="helvetica">Uses the camera to take a picture and saves it to the device's gallery</font></li><li><font face="helvetica">Let's you select a picture from the gallery</font></li><li><font face="helvetica">The image is converted into base64 and uploaded to a web app</font></li><li><font face="helvetica">Additionally, it also sends rotation and lat/lng coordinates and lets you add a textual comment as well.</font></li></ul><div><font face="helvetica"><br /></font></div><div><font face="helvetica">This Android app sends it to an Apps Script web application inside a Google Spreadsheet <a href="https://docs.google.com/spreadsheets/d/1LjhC0lEgjT9UGeoqRIVeTstRuuO9ljsO4NlakNbRorY/edit?usp=sharing" target="_blank">here</a>.</font></div><div><font face="helvetica"><br /></font></div><div><font face="helvetica">The web application saves the image to Google Drive, makes a thumbnail of the image then gets the latest 3 thumbnails from the sheet and returns it. </font></div><div><font face="helvetica"><br /></font></div><div><font face="helvetica">Inside the Android app is a WebViewer component that displays those images, that gets updated once the image is uploaded.</font></div><div><font face="helvetica"><br /></font></div><div><font face="helvetica">It's not pretty but it works. This app wouldn't be possible without the TaifunFile, TaifunTools and SimpleBase64 extensions. Thanks, all.</font></div><div><br /></div></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJnAzN43bxzwBuybRolg2eHSEBt7r6MKRZrEF2k4Yq1hCkU8nUlyphsROi9tI6UIeQosQYQdB0aMoNoOnDHTbvI93SnBr7i0B4NE4JNTvW88CB4EpuUwBJGggwpibSMuXec34pW-D-jRE/s1280/app.png" style="margin-left: 1em; margin-right: 1em;"><font face="helvetica"><img border="0" data-original-height="1280" data-original-width="768" height="625" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJnAzN43bxzwBuybRolg2eHSEBt7r6MKRZrEF2k4Yq1hCkU8nUlyphsROi9tI6UIeQosQYQdB0aMoNoOnDHTbvI93SnBr7i0B4NE4JNTvW88CB4EpuUwBJGggwpibSMuXec34pW-D-jRE/w375-h625/app.png" width="375" /></font></a></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica">The <b>App Inventor code is <a href="http://www-users.york.ac.uk/~tas509/imageToSheetsUploader%20(2).aia">here</a></b>. You can import an .aia file directly into MIT App Inventor.</font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica">There was some tricky stuff, having to move the Camera image onto the device, and I found most other base64 extensions encoded the path to the image, and not the actual image data - which was confusing. </font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><font face="helvetica"><br /></font><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyiC6bZhn2Y0zxFDurMDFz50iZ23LqZ21gbx0f-UK_8jfqOM_mGCR-d5y2vQXmtS_G-vR_QqH3tD36V8sFlz50RuqLopYnZ9qmYjcy_NIdlnPjIjVsO7RyGgzSPjHl9yA-HoRFXHkQ5PM/s2048/code.png" style="margin-left: 1em; margin-right: 1em;"><font face="helvetica"><img border="0" data-original-height="1307" data-original-width="2048" height="499" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyiC6bZhn2Y0zxFDurMDFz50iZ23LqZ21gbx0f-UK_8jfqOM_mGCR-d5y2vQXmtS_G-vR_QqH3tD36V8sFlz50RuqLopYnZ9qmYjcy_NIdlnPjIjVsO7RyGgzSPjHl9yA-HoRFXHkQ5PM/w781-h499/code.png" width="781" /></font></a></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica"><br /></font></div><div><font face="helvetica"><br /></font></div><div><font face="helvetica"><br /></font></div><div><font face="helvetica">This Android app sends its data to an Apps Script web application inside a <b>Google Spreadsheet <a href="https://docs.google.com/spreadsheets/d/1LjhC0lEgjT9UGeoqRIVeTstRuuO9ljsO4NlakNbRorY/edit?usp=sharing" target="_blank">here</a></b>. </font></div><div><font face="helvetica"><br /></font></div><div><font face="helvetica">It's a bit slow. I could reduce the size of the image before I sent it to make uploading quicker, b</font><span style="font-family: helvetica;">ut didn't want to do that for my purposes. I also could have made it a lot prettier but didn't want to clutter up the project with lots of components that are only there for graphical reasons. You can figure it out... hopefully.</span></div><div><font face="helvetica"><br /></font></div><div><font face="helvetica">Use menu <b>File > Make a copy</b> if you want to make your own version. You will need to know how to Publish Apps Script apps to recreate this project for yourself.</font></div><div><font face="helvetica"><br /></font></div><font face="helvetica"><br /></font><div class="separator" style="clear: both; text-align: center;"><a href="https://docs.google.com/spreadsheets/d/1LjhC0lEgjT9UGeoqRIVeTstRuuO9ljsO4NlakNbRorY/edit?usp=sharing" style="margin-left: 1em; margin-right: 1em;" target="_blank"><font face="helvetica"><img border="0" data-original-height="852" data-original-width="2571" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijOybx1PEBstFnqRR0GdIXjZ9PmTxjG4FVFTU8j4O_pgWSP5cm_fg7P0yYcB4WzTzqvLhzPnhdC2W2ncuky-cNCFOvJRSP4ehu0B5bBXSNzg9ZXkbq91Pzi7HmEOjoOayH4vFGNNJ4XCI/w625-h208/spreadsheet.png" width="625" /></font></a></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica">I've discovered there is a Google Sheet API extension in development, but it isn't quite ready yet. This is a workaround for now.</font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica">I have another painting MIT App Inventor app with <a href="https://everythingability.com/red-blue">source available here</a>.</font></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><br /></div>Tom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.com0tag:blogger.com,1999:blog-6274613198416400788.post-52811905823331528732020-06-08T14:01:00.000+01:002020-06-08T14:01:10.609+01:00Using Google Sites As Portfolio ProjectsJust completed another project where 40 students used (old) Google Sites (because they are Apps Scriptable) as Portfolio Sites.<div><br /></div><div>Each student gets a copy of a template site. After they have worked on it, and the deadline has arrived, they are given a COPY of their site (and made EDITOR), and they are removed from their original site.</div><div><br /></div><div>If the student wants to invite a personal Gmail account to this new site, and then that personal Gmail account makes a Copy of it, it is removed completely from the york domain - meaning when the student leaves, it won't be deleted. They can keep it forever.</div><div><br /></div><div>They THEN can, if they choose, upgrade their site to New Sites and make it look a bit fancier.</div><div><br /></div><div>If you want to do this, make your Template Site in Classic Sites, then...</div><div><br /></div><div><b>File > Make a copy</b> , fill in your students</div><div><br /></div><div><a href="https://docs.google.com/spreadsheets/d/1qojHKcmaMyxyzHd8HNxgm2OEMSgBbg_i4PmYT53qkQU/edit?usp=sharing" target="_blank">https://docs.google.com/spreadsheets/d/1qojHKcmaMyxyzHd8HNxgm2OEMSgBbg_i4PmYT53qkQU/edit?usp=sharing</a> </div><div><br /></div><div>edit the code <b>Tools > Script Editor</b> where it says CHANGE_THIS </div><div><br /></div><div>Here are the <a href="https://sites.google.com/york.ac.uk/g-sites-for-portfolio/home">instructions for students</a>.</div>Tom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.com0tag:blogger.com,1999:blog-6274613198416400788.post-66094033940320710462020-06-05T11:15:00.005+01:002020-06-05T11:28:09.486+01:00What's Going On?<div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><a href="https://everythingability.com/about" target="_blank">About me</a> </font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><h1 style="clear: both; text-align: left;"><font face="helvetica" size="6">My Work At University of York</font></h1><div><font face="helvetica" size="6"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="6"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/proxy/AVvXsEim2G2SkefTrQBaVA_wLI62ql_5oQ7TRl5uVPB_tr-BD6N7G1Uuvd7wCYxb81n5QWpp1-uA1DfwAzQ91nOBnLi-lKOw0GTBOlruqnq3Nja7yQPLL_k9LaEsDqn9Bnt4XWVg4m0-Po8Li2oL5mGAX1ACuLySpqpjd7ZxQlPuX0h5BNfX6-RD0037c_7IbrsCMXMKSeSfbYVn6r8Zz4l0TAIpioRfj6GlHpRmoOiIfnD2NzevEjmTqK9S_S2vP567l3oWH0c_CgxogwJQjQ=s2048" style="margin-left: 1em; margin-right: 1em;"><font face="helvetica"><img border="0" data-original-height="995" data-original-width="2048" height="312" src="https://blogger.googleusercontent.com/img/proxy/AVvXsEim2G2SkefTrQBaVA_wLI62ql_5oQ7TRl5uVPB_tr-BD6N7G1Uuvd7wCYxb81n5QWpp1-uA1DfwAzQ91nOBnLi-lKOw0GTBOlruqnq3Nja7yQPLL_k9LaEsDqn9Bnt4XWVg4m0-Po8Li2oL5mGAX1ACuLySpqpjd7ZxQlPuX0h5BNfX6-RD0037c_7IbrsCMXMKSeSfbYVn6r8Zz4l0TAIpioRfj6GlHpRmoOiIfnD2NzevEjmTqK9S_S2vP567l3oWH0c_CgxogwJQjQ=w640-h312" width="640" /></font></a></div><font face="helvetica" size="6"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn8luVSnuzNUK42R6obg5pGMsQRdqZLjknx2Thxhe1od3ROlkiga7EaHeZeKLMVDJEfyCuHSQu6RolxW1Ygy55TxnJgNGB15RRcsatR1F4p-dgsBLj8rylkxyGGTR0s1dGSS4rqJy0xlI/s640/iPad+Booking+System.png" style="margin-left: 1em; margin-right: 1em;" target="_blank"><font face="helvetica" size="4"><img border="0" data-original-height="426" data-original-width="640" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn8luVSnuzNUK42R6obg5pGMsQRdqZLjknx2Thxhe1od3ROlkiga7EaHeZeKLMVDJEfyCuHSQu6RolxW1Ygy55TxnJgNGB15RRcsatR1F4p-dgsBLj8rylkxyGGTR0s1dGSS4rqJy0xlI/w640-h426/iPad+Booking+System.png" width="640" /></font></a></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica" size="4">A <a href="https://sites.google.com/a/york.ac.uk/tom-smith/2014-2015-projects" target="_blank">list of old projects</a> here including a Marking App, an iPad app and 3Sixty installation.</font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4">Scraping "Sugar Tax" information from UK Government sites then running with semantic and sentiment analysis.</font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4">Playing with scraping Box of Broadcast transcripts, and automatic MoviePy editing.</font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"> </font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica" size="4"><iframe allowfullscreen="" class="BLOG_video_class" height="266" src="https://www.youtube.com/embed/yRrlFusnprU" width="320" youtube-src-id="yRrlFusnprU"></iframe></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: center;"><a href="https://chapbooks.glitch.me/" style="margin-left: 1em; margin-right: 1em;" target="_blank"><font face="helvetica"><img border="0" data-original-height="674" data-original-width="1304" height="330" src="https://blogger.googleusercontent.com/img/proxy/AVvXsEiZ8nALoKCWWsASbOzOJ2hO5NakoGcBycVD4Q8dfL-78h9SP6OCEYzbJYXN0kXA3NNPqA81XdBDbNtVq8i26HeWrkCw8-6CKrtb46Gtu0eOxHYGTahgP5a2ekzUQGB6RfXjPPtpcWlKgLPd3FfQda32IonVBUM6c9I5cL1jNQ=w640-h330" width="640" /></font></a></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica" size="4"><a href="https://chapbooks.glitch.me/" target="_blank">Chapbooks in the Borthwick</a> on Glitch in Django</font></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica"><font size="4">Remix here: </font><a href="https://glitch.com/edit/#!/chapbooks" style="text-align: left;">https://glitch.com/edit/#!/chapbooks</a></font></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica" size="4" style="margin-left: 1em; margin-right: 1em;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4fuWT-XNNux4ScgLN-1ZwVz5wHzYCh5HUUjsbBH1oiFrvy8gfu3Zf0z5iSms19UJ4FPCt30XEaT-Xc6dKSb3bG7rcRd_vpTAVz2dBpo7P1RU0vh452Fqx5rVsyUirdoBJNOCn7Qxoyss/s886/AR_UoY.jpg" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" data-original-height="524" data-original-width="886" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4fuWT-XNNux4ScgLN-1ZwVz5wHzYCh5HUUjsbBH1oiFrvy8gfu3Zf0z5iSms19UJ4FPCt30XEaT-Xc6dKSb3bG7rcRd_vpTAVz2dBpo7P1RU0vh452Fqx5rVsyUirdoBJNOCn7Qxoyss/s320/AR_UoY.jpg" width="320" /></a></font></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica"><a href="https://sites.google.com/york.ac.uk/augmented-reality-at-york/christmas-jumper-orchestra" target="_blank">Including the Augmented Reality Christmas Jumper Orchestra.</a></font></div><div class="separator" style="clear: both; text-align: center;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><span><font face="helvetica" size="4"><a name='more'></a></font></span><h1 style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font><font face="helvetica" size="6">My Work Outside The University</font></h1><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="6"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-TsXMyefrG4wqh0zHNQ_DI6pg-IY2BQutBKABNTu9ppTjRzGbNNQBPyoPkrUp1WYdycVNO34PNcKjOnL0rbK2bgkrT4zOrnET20_7WyavfC4QHpLieruNsKx4D6zhH8xqWxFR9pXjsOI/s1000/1.+The+Zonk+small.jpg" style="margin-left: 1em; margin-right: 1em;"><font face="helvetica"><img border="0" data-original-height="653" data-original-width="1000" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-TsXMyefrG4wqh0zHNQ_DI6pg-IY2BQutBKABNTu9ppTjRzGbNNQBPyoPkrUp1WYdycVNO34PNcKjOnL0rbK2bgkrT4zOrnET20_7WyavfC4QHpLieruNsKx4D6zhH8xqWxFR9pXjsOI/s320/1.+The+Zonk+small.jpg" width="320" /></font></a></div><font face="helvetica" size="6"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><div class="separator" style="clear: both; text-align: center;"><font face="helvetica"><iframe allowfullscreen="" class="BLOG_video_class" height="266" src="https://www.youtube.com/embed/t3Fu_R0DNwQ" width="320" youtube-src-id="t3Fu_R0DNwQ"></iframe></font></div><font face="helvetica" size="6"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4">Drawing and paintings. <a href="https://tom9434.wixsite.com/shop" target="_blank">Zonk The Gnu</a></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><h1 style="clear: both; text-align: left;"><font face="helvetica" size="6">Symphony For A Post Justification Engine</font></h1><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: center;"><a href="https://everythingability.com/middlesbrough-art-weekender-2018" style="margin-left: 1em; margin-right: 1em;" target="_blank"><font face="helvetica"><img border="0" data-original-height="1102" data-original-width="1106" src="https://blogger.googleusercontent.com/img/proxy/AVvXsEiu38JYVJyxWreE9VjIbasFO2_9hrYQF9p_An-FGfmk8a0hiGrUI4jMhbUgc1uAZAeT68IDXRKdqgTNiSALp__xzy2e73F4VUWp_2P13bSGLu04Z3vkRLxAX1mROqLCJ7GepMtX69pDmAC9Xk8AtIR7T5Z0MKqpLZXuc2DnkGHyO1L-XCbQFcwuNwu2-Le6FNVWriIRj12MZOKhYSifrF8_=s320" width="320" /></font></a></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><h1 style="clear: both; text-align: left;"><font face="helvetica" size="6">York Mediale 2018 - The Fake News Kaleidoscope</font></h1><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4">Sonification.</font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><div class="separator" style="clear: both; text-align: center;"><font face="helvetica"><iframe allowfullscreen="" class="BLOG_video_class" height="266" src="https://www.youtube.com/embed/aICR_3qXClQ" width="320" youtube-src-id="aICR_3qXClQ"></iframe></font></div><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><h1 style="clear: both; text-align: left;"><font face="helvetica" size="6">Infinite Cow</font></h1><div class="separator" style="clear: both; text-align: left;"><div class="separator" style="clear: both; text-align: center;"><font face="helvetica"><iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.blogger.com/video.g?token=AD6v5dy3sW4NrjRRbGc2qvLPQh1GvG3yUTwET3796yOa-rma7m4DipA7ZAgtpoC8UNcJE3YZjiu3oEeXBa6vTU3-ZA' class='b-hbp-video b-uploaded' frameborder='0'></iframe></font></div><font face="helvetica" size="6"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="6"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="6"><br /></font></div><h1 style="clear: both; text-align: left;"><font face="helvetica" size="6">Music of the Trees</font></h1><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="6"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGLbtysmtLDS9jGPOKctxHbbfkfqWRmxM-ohlvIiOEZieyziKEKgaa_biqORQb5RXJVAUDQSTLJkPBRIVJ-XXey9qM5In_lUHLAo74wObA2JljzI5efRvCAfJRYL-9Z_S6Ao7ULRn3QIQ/s2375/MusicOfTheTrees.png" style="margin-left: 1em; margin-right: 1em;"><font face="helvetica"><img border="0" data-original-height="1523" data-original-width="2375" height="410" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGLbtysmtLDS9jGPOKctxHbbfkfqWRmxM-ohlvIiOEZieyziKEKgaa_biqORQb5RXJVAUDQSTLJkPBRIVJ-XXey9qM5In_lUHLAo74wObA2JljzI5efRvCAfJRYL-9Z_S6Ao7ULRn3QIQ/w640-h410/MusicOfTheTrees.png" width="640" /></font></a></div><font face="helvetica" size="6"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4">All <a href="https://editor.p5js.org/tom.smith/sketches/mp0Wk5yhf" target="_blank">trees into parameterized sounds</a>.</font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="6"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><div class="separator" style="clear: both; text-align: center;"><font face="helvetica"><iframe allowfullscreen="" class="BLOG_video_class" height="266" src="https://www.youtube.com/embed/ihv-wz2Ky-0" width="320" youtube-src-id="ihv-wz2Ky-0"></iframe></font></div><font face="helvetica" size="6"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><a href="https://anchor.fm/everythingability/episodes/Betula-Pendula-ec2to2" target="_blank">Betula Pendula</a> - Silver Birch but also </font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4">Version 1 - made in Processing - <a href="http://www-users.york.ac.uk/~tas509/MidiTrees.zip">code here</a>.</font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><a href="http://projects.everythingability.com/local/musicofthetrees2/" target="_blank">Version 2</a> - made in p5js... slowly disintegrates</font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><a href="https://www-users.york.ac.uk/~tas509/pianotrees3/" target="_blank">Version 3 </a>- p5js, Tone.js, piano sample.</font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><h1 style="clear: both; text-align: left;"><font face="helvetica" size="6">Teenage Art School - York Art Gallery</font></h1><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><div class="separator" style="clear: both; text-align: center;"><font face="helvetica"><iframe allowfullscreen="" class="BLOG_video_class" height="266" src="https://www.youtube.com/embed/QOmX4GRSMRg" width="320" youtube-src-id="QOmX4GRSMRg"></iframe></font></div><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><h1 style="clear: both; text-align: left;"><font face="helvetica" size="6">Red Blue Drawing App</font></h1><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="6"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/proxy/AVvXsEg8_m5WwPcg1sEZmtW3J0AJ_2tikK2hhNqG3J_KEgZwk_EXvDomPIt0ZBgoqJVpGuLmX5dZNbmBSV5Zzg7JGewSUD-Q22iCBaKzs4hyphenhyphencdHePJdfOdMt3wjyszofiKkHZRLhMcWD4mJd132Zn51zT2CRuCi3F1Te_QFFKDwJ4TjZA5kKkJs81J8vbwXm5K0Z9QbbL6hIBRwSjbAnWUXxr-6varMtV_qLVca5d4ox2a6_=s920" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="613" data-original-width="920" height="426" src="https://blogger.googleusercontent.com/img/proxy/AVvXsEg8_m5WwPcg1sEZmtW3J0AJ_2tikK2hhNqG3J_KEgZwk_EXvDomPIt0ZBgoqJVpGuLmX5dZNbmBSV5Zzg7JGewSUD-Q22iCBaKzs4hyphenhyphencdHePJdfOdMt3wjyszofiKkHZRLhMcWD4mJd132Zn51zT2CRuCi3F1Te_QFFKDwJ4TjZA5kKkJs81J8vbwXm5K0Z9QbbL6hIBRwSjbAnWUXxr-6varMtV_qLVca5d4ox2a6_=w640-h426" width="640" /></a></div><font face="helvetica" size="6"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><font size="4">"Moving Texts" optical illusions in p5js </font><a href="https://editor.p5js.org/remarkability/sketches/Gp13lIm1Y">https://editor.p5js.org/remarkability/sketches/Gp13lIm1Y</a></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><a href="https://www.instagram.com/p/B6Y-VXXnPM5/" target="_blank">Video here</a> of animation</font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><a href="http://projects.everythingability.com/local/redblue/" target="_blank">Online web-based app example</a>. and </font><a href="http://projects.everythingability.com/local/tompaint/">http://projects.everythingability.com/local/tompaint/</a></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><a href="https://everythingability.com/red-blue" target="_blank">MIT App Inventor version</a>.</font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBMvvtQldvSjfya-xI8VOIjsTTDMgf1zHMcSiBckpaM0Q-uvGDLWQuiDM6jJ2UxpdW9pbKPSi33r_lzZlIN6n4ZuP3mVzshyphenhyphenA9lnR96nkoxYv7nhIz6ddfuTktnuWr_ZZ5aPLPTRCyW2E/s3110/MIT-APP-Inventor-Painting-Code.png" style="margin-left: 1em; margin-right: 1em;"><font face="helvetica"><img border="0" data-original-height="1726" data-original-width="3110" height="356" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBMvvtQldvSjfya-xI8VOIjsTTDMgf1zHMcSiBckpaM0Q-uvGDLWQuiDM6jJ2UxpdW9pbKPSi33r_lzZlIN6n4ZuP3mVzshyphenhyphenA9lnR96nkoxYv7nhIz6ddfuTktnuWr_ZZ5aPLPTRCyW2E/w640-h356/MIT-APP-Inventor-Painting-Code.png" width="640" /></font></a></div><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><h1 style="clear: both; text-align: left;"><font face="helvetica" size="6">Runway ML vs Watmap vs Processing </font></h1><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="6"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><div class="separator" style="clear: both; text-align: center;"><font face="helvetica" style="margin-left: 1em; margin-right: 1em;"><a href="https://blogger.googleusercontent.com/img/proxy/AVvXsEjwgRAneDBUSgW8WAJmv9HNEGlXZdaEwTnH6VQrRa-MNfxp2e9rC2KPb7NuuWyZI6IAD_qxmboQliTqe7wi33uGLTT2p8oL5yNXTcqigW8r0GVaPFMdLHNUAQAOjqMbN_JWCg_46OgLbcltM-hKk7F1t7_WA6-TxCYNxYclYNc4arGIJhsHdudUXqXm9vZoRD-Sb-zEpJP0wR4Qn0oU8hbOhEs9j3b6AntN0LmDLfl5=s920" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="920" data-original-width="920" height="400" src="https://blogger.googleusercontent.com/img/proxy/AVvXsEjwgRAneDBUSgW8WAJmv9HNEGlXZdaEwTnH6VQrRa-MNfxp2e9rC2KPb7NuuWyZI6IAD_qxmboQliTqe7wi33uGLTT2p8oL5yNXTcqigW8r0GVaPFMdLHNUAQAOjqMbN_JWCg_46OgLbcltM-hKk7F1t7_WA6-TxCYNxYclYNc4arGIJhsHdudUXqXm9vZoRD-Sb-zEpJP0wR4Qn0oU8hbOhEs9j3b6AntN0LmDLfl5=w400-h400" width="400" /></a></font></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/proxy/AVvXsEhxs43NXsGvomDSVDY5Y3C9xt05nlo3F8NFmah1v2j0eGbCYdhRqs0r_yaASPHtiUl2LTrNoYGNyucvJ-jDvXaIhPM-vgikdMwI40Y6CqbeAEQ3WeMBSNLk5dJOcmalY8dMmZqWQVrBN9aWorrAQoKu63dwycxSfU643bkH39Oard5aagybdp4dAdyfTwbpSnGyCxID902RGRc1hyphenhyphenP-m5cvXBNgrVda1RUzJSKnPcNsloA6=s1080" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1080" height="320" src="https://blogger.googleusercontent.com/img/proxy/AVvXsEhxs43NXsGvomDSVDY5Y3C9xt05nlo3F8NFmah1v2j0eGbCYdhRqs0r_yaASPHtiUl2LTrNoYGNyucvJ-jDvXaIhPM-vgikdMwI40Y6CqbeAEQ3WeMBSNLk5dJOcmalY8dMmZqWQVrBN9aWorrAQoKu63dwycxSfU643bkH39Oard5aagybdp4dAdyfTwbpSnGyCxID902RGRc1hyphenhyphenP-m5cvXBNgrVda1RUzJSKnPcNsloA6=s320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><font face="helvetica" size="6"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="6">Politicians made from pig's ears...</font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia7_559miqtYQhyphenhyphen7hm0rVpkl2ej7gyJ7LhKzp8vF5cYUX-4R5-cw2eq1M5EX7EMj-0416jia1JJHMjhCuwaZJE-JoCKzsKw1uK8SsKeETOxdeNu1azK9oDGKgb0jC75tctGmoaFVWs23M/s920/cameron_pig.jpg" style="margin-left: 1em; margin-right: 1em;"><font face="helvetica"><img border="0" data-original-height="920" data-original-width="685" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia7_559miqtYQhyphenhyphen7hm0rVpkl2ej7gyJ7LhKzp8vF5cYUX-4R5-cw2eq1M5EX7EMj-0416jia1JJHMjhCuwaZJE-JoCKzsKw1uK8SsKeETOxdeNu1azK9oDGKgb0jC75tctGmoaFVWs23M/w476-h640/cameron_pig.jpg" width="476" /></font></a></div><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica">More <a href="https://everythingability.com/prints">here</a>.</font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/proxy/AVvXsEij8iAOIbpKI05GEkLOiNMQagAhSdXXmUwpeOiK56oiLRe07KyS-mUra5DTkzoBUhyphenhyphenvSq9StTEf0m2MSMJFQ4-qrcodB5wWaS5CpdTWckMWY4eiBcnCZ1JnXh7J0IERkMIREjKnjUGPVAgUI1EUZg424LX1HWFaCo9SX8k2YBdVWo1Nrkuu-yjD5Ye0pGD-sxARmsrDU7z56Rc-Fcm_wRiVHH_PuT9tyXhcJArOIam5AOo-sLriWK0I=s1488" style="margin-left: 1em; margin-right: 1em;"><font face="helvetica"><img border="0" data-original-height="854" data-original-width="1488" height="368" src="https://blogger.googleusercontent.com/img/proxy/AVvXsEij8iAOIbpKI05GEkLOiNMQagAhSdXXmUwpeOiK56oiLRe07KyS-mUra5DTkzoBUhyphenhyphenvSq9StTEf0m2MSMJFQ4-qrcodB5wWaS5CpdTWckMWY4eiBcnCZ1JnXh7J0IERkMIREjKnjUGPVAgUI1EUZg424LX1HWFaCo9SX8k2YBdVWo1Nrkuu-yjD5Ye0pGD-sxARmsrDU7z56Rc-Fcm_wRiVHH_PuT9tyXhcJArOIam5AOo-sLriWK0I=w640-h368" width="640" /></font></a></div><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><a href="https://runwayml.com/">https://runwayml.com/</a></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica">Halfway between a politician and a black and white cow. <a href="https://www.instagram.com/p/B8R3sKRH1qv/">https://www.instagram.com/p/B8R3sKRH1qv/</a></font></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><br /></div><h1 style="clear: both; text-align: left;"><font face="helvetica" size="6">Currently</font></h1><div class="separator" style="clear: both; text-align: left;"><font size="6"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/proxy/AVvXsEjWJYSu_vowuZlMPry9dtDWp5kIv7wvZbuYkvTuudU5SMX41kjzpnq9LkV588XdC4XwQiF-5AGjsT7U03KkVtsZffjPvo00fc1eFM2KIfwWKO5ZqqGH_kzo3nIaA015UxoHRwLy7lDZODQqPUG0P5iqraWXOn89ZrC1sVS4PCDRm36w9stXMH_hKyrBlbc=s1354" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1284" data-original-width="1354" height="606" src="https://blogger.googleusercontent.com/img/proxy/AVvXsEjWJYSu_vowuZlMPry9dtDWp5kIv7wvZbuYkvTuudU5SMX41kjzpnq9LkV588XdC4XwQiF-5AGjsT7U03KkVtsZffjPvo00fc1eFM2KIfwWKO5ZqqGH_kzo3nIaA015UxoHRwLy7lDZODQqPUG0P5iqraWXOn89ZrC1sVS4PCDRm36w9stXMH_hKyrBlbc=w640-h606" width="640" /></a></div><font size="6"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><a href="https://digitalcreativitytools.glitch.me/">https://digitalcreativitytools.glitch.me/</a> which contains a list of Inspirational sites, worth a look and a <a href="https://digitalcreativitytools.glitch.me/activities/tools" target="_blank">list of digital creativity tools</a>.</font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/proxy/AVvXsEikemkYjY1BCVBfPxrxG-RdIGwVprFyXFGnxShPJup6tnzqFj4fdEJKZFQW6sKv2QHidI81Lm5lqZ63_duqrtUgBfRxBQU3XBOgte4b31FhlCrDc7OkB8fCRyluJHm2rn5GW5VoG7XFMyTe3e9LkzOCKDqrYnwJb8KoFl3STYuYH_KENN9mzPU1fsNHTmz2POKNyWc6cxJm7LjGUGfc9VwX-Q=s404" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="256" data-original-width="404" src="https://blogger.googleusercontent.com/img/proxy/AVvXsEikemkYjY1BCVBfPxrxG-RdIGwVprFyXFGnxShPJup6tnzqFj4fdEJKZFQW6sKv2QHidI81Lm5lqZ63_duqrtUgBfRxBQU3XBOgte4b31FhlCrDc7OkB8fCRyluJHm2rn5GW5VoG7XFMyTe3e9LkzOCKDqrYnwJb8KoFl3STYuYH_KENN9mzPU1fsNHTmz2POKNyWc6cxJm7LjGUGfc9VwX-Q=s320" width="320" /></a></div><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4">Currently recording dozens of screencast creativity exercises like this <a href="http://yorkfestivalofideas.com/2020-online/discovery-zone/glitch-art/" target="_blank">Let's Make Glitch Art</a> for the Festival of Ideas.</font></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCprAXMZ2V2Uf37JrG59oxZrNXEr4el0RNzFHD20HTO7rMDsYlLQsGIcPPCvgpaimX4aOef34f1k-LNqgmTyceNTaQfZ7XHUTIj-xEXFg_XhFEgB8soNOJrHJiHBx9FG_7FBNwhyE-r_Q/s1024/SplashScreen_1024x768.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCprAXMZ2V2Uf37JrG59oxZrNXEr4el0RNzFHD20HTO7rMDsYlLQsGIcPPCvgpaimX4aOef34f1k-LNqgmTyceNTaQfZ7XHUTIj-xEXFg_XhFEgB8soNOJrHJiHBx9FG_7FBNwhyE-r_Q/w640-h480/SplashScreen_1024x768.png" width="640" /></a></div><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><a href="https://anchor.fm/everythingability/episodes/Theme-From-Marion-Sparkle-ef0m2m" target="_blank">Theme from Marion Sparkle</a>. Uses Spitfire Discover BBC Orchestra free sounds. A "game" assembled almost entirely from generated and found components. Characters, Plots, etc.</font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><a href="https://watabou.itch.io/medieval-fantasy-city-generator"><font face="helvetica">https://watabou.itch.io/medieval-fantasy-city-generator</font></a></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><div class="separator" style="clear: both; text-align: left;"><a href="https://anchor.fm/everythingability/episodes/The-Opening-Riff---Welcome-to-Hostornmer-eeulj9" target="_blank">Welcome To Hostormer</a></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><a href="https://anchor.fm/everythingability/episodes/Within-Insistent-Molecules-Lies-The-Lie-eeum0v">Within Insistent Molecules Lies The Lie</a></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><a href="https://anchor.fm/everythingability/episodes/The-Mansion-of-Fire-and-Spit-eeune4" target="_blank">The Mansion of Fire and Spit</a></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">https://www.spitfireaudio.com/shop/a-z/bbc-symphony-orchestra-discover/</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><br /></div><h1 style="clear: both; text-align: left;"><font size="6">Things I'd Play With More If I Had More Time</font></h1><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><br /></div></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica">Orca</font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="266" src="https://www.youtube.com/embed/93v3J4W-Uao" width="320" youtube-src-id="93v3J4W-Uao"></iframe></div><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4">Adobe Characterizer </font></div><div class="separator" style="clear: both; text-align: left;"><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="266" src="https://www.youtube.com/embed/E7PsFD8nAV0" width="320" youtube-src-id="E7PsFD8nAV0"></iframe></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="http://rubble.heppell.net/learnometer/" target="_blank">Learnometer</a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"> https://rive.app/ Formerly Flare.</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><br /></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><ul style="text-align: left;"><li><font face="helvetica" size="4">Mosaic . Like TouchDesigner of Isadora - visual tools</font></li><li><font face="helvetica" size="4">Score - for sequencing media and devices</font></li><li><font size="4"><font face="helvetica">Make my own visual language for Google Suite processes with https://nodered.org/ or </font><a href="https://developers.google.com/blockly"><font face="helvetica">https://developers.google.com/blockly</font></a></font></li><li><font face="helvetica" size="4">Runway ML and StyleGans with Python notebooks</font></li><li><font face="helvetica" size="4">MIT App Inventor or block coding in general, tools like WayScript.</font></li><li><font face="helvetica" size="4">Twine and Eko Studio</font></li><li><font face="helvetica" size="4">Studio One - Modular Synthesis (free)</font></li><li><font face="helvetica" size="4">Sonic Pi</font></li><li><font face="helvetica" size="4">Spark AR</font></li><li><font face="helvetica" size="4">A Little Livecode (perhaps)</font></li><li><font face="helvetica" size="4">Make my own version of SoundPlant now it doesn't work on a Mac (Catalina)</font></li><li><font face="helvetica" size="4">Do I need to learn Unity?</font></li><li><font face="helvetica" size="4">Understand more about Git and Glitch</font></li><li><font face="helvetica" size="4">A-Frame</font></li></ul></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><font face="helvetica" size="4"><br /></font></div><div class="separator" style="clear: both; text-align: left;"><br /></div>Tom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.com0tag:blogger.com,1999:blog-6274613198416400788.post-83337894157379630892020-06-03T10:04:00.003+01:002020-06-03T10:10:22.482+01:00A Working Booking System In Google Sheets<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjh8qnYWX-gfTdtxEvRrbYVNQczScxVKvYuaE8F59axasaSMFhD-xbihRLpzpIKnWr8-wk4JZhCixaS8F31WHwQ8cNdJpqJXzk_x-2FgSMFYgFpK3H76OC3w4ZveMtJyQlkJze70nj4Q53/s1600/iPad+Booking+System.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1066" data-original-width="1600" height="425" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjh8qnYWX-gfTdtxEvRrbYVNQczScxVKvYuaE8F59axasaSMFhD-xbihRLpzpIKnWr8-wk4JZhCixaS8F31WHwQ8cNdJpqJXzk_x-2FgSMFYgFpK3H76OC3w4ZveMtJyQlkJze70nj4Q53/s640/iPad+Booking+System.png" width="640" /></a></div>
<br />
<br />
Working with Andras Sztrokay we had another go at a booking system. This time it was to enable staff to book out a number of iPads over a number of days. You select the days you want, then select the Booking menu.<br />
<br />
Andras did an amazing job. It even creates a daily bookings sheet so you can see who has which iPads.<br />
<br />
To see this in action, go <a href="https://docs.google.com/spreadsheets/d/1lWiM-78692O1srgJ_AiEhNBa9gA4JsO1h5FxoRcdiec/edit?usp=sharing" target="_blank">here</a> and <b>File > Make a Copy</b><br />
<b><br /></b><i>(I won't be able to support you this is just provided to maybe give someone else a leg up, good luck!)</i>Tom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.com0tag:blogger.com,1999:blog-6274613198416400788.post-85985914888428799682018-11-21T12:33:00.003+00:002018-11-21T12:34:07.018+00:00Coding with Livecode<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="true" frameborder="0" height="480" mozallowfullscreen="true" src="https://docs.google.com/presentation/d/e/2PACX-1vSMsJFylC4xTI3St0LQa_tk9Z8YZnmh0yLWbJbU3cALsDheoSzzqVCVi1dOiimZdNLAggqF0goM9at9/embed?start=true&loop=false&delayms=3000" webkitallowfullscreen="true" width="600"></iframe>
</div>
<br />
<br />
I'm feeling a shade nostalgic today, because later I'm running a digital creativity session on coding with Livecode, which could be said to be an evolved descendent of my first geek love, HyperCard.<br />
<br />
<a href="https://docs.google.com/presentation/d/e/2PACX-1vSMsJFylC4xTI3St0LQa_tk9Z8YZnmh0yLWbJbU3cALsDheoSzzqVCVi1dOiimZdNLAggqF0goM9at9/pub?start=false&loop=false&delayms=3000">https://docs.google.com/presentation/d/e/2PACX-1vSMsJFylC4xTI3St0LQa_tk9Z8YZnmh0yLWbJbU3cALsDheoSzzqVCVi1dOiimZdNLAggqF0goM9at9/pub?start=false&loop=false&delayms=3000</a><br />
<br />
The ideas and values I originally fell for, its ease of use, a "you can too" approach to coding, open sauciness and a community of edu-focussed sharing, and it being free (or cheap) still hold true today.<br />
<br />
There are still enough of the things I remember in Livecode to make it worth sharing with the world, make Livecode worth learning even today. Like a cult movie, it's always a pleasure to return to.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />Tom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.com1tag:blogger.com,1999:blog-6274613198416400788.post-86037529815020200222018-11-05T12:37:00.003+00:002018-11-05T12:39:28.664+00:00SOLUTION: Blogger losing images when a user leaves<div style="text-align: center;">
<span style="color: red;">PLEASE DON'T ASK ME TO DO THIS FOR YOU :-)</span></div>
<div style="text-align: center;">
<span style="color: red;"><br /></span></div>
<div style="text-align: center;">
<span style="color: red;">THIS IS JUST PROVIDED FOR INFO...</span></div>
<div style="text-align: center;">
<span style="color: red;"><br /></span></div>
<br />
At the University of York we have had an issue with Blogger for <b>years</b>, in that, when a user leaves the university and their account is deleted, although a blog post's text remains, and the blog itself, every blog post's image is LOST because they are stored somewhere in that user's account.<br />
<br />
I tried using command-line based scraping tools, like <a href="http://www.httrack.com/page/2/en/index.html" target="_blank">HTTrack</a> to get a blog as static HTML files, but could never quite configure them to get all the content, the local images, the remote images but control the crawler enough not for them to wander off and try and download the entirety of YouTube.<br />
<br />
I tried <a href="https://linuxhint.com/top_20_webscraping_tools/" target="_blank">scraping tools</a>.<br />
<br />
I tried half a dozen aggregator tools.<br />
<br />
I tried process-oriented tools like IFTT. No joy.<br />
<br />
I tried writing my own scraper in python and failed. They moved the oAuth goalposts.<br />
<br />
I tried using Google Picasa (which they then shut down).<br />
<br />
I wanted to maybe use another service, like Flickr to re-host the images but that would mean that anyone using this would need their own FlickAPI account, or I'd have to create a semi-serious service (beyond me).<br />
<br />
I tried to figure out the Blogger API and repeatedly fell at the oAuth hurdle until Martin Hawksey helped me out.<br />
<br />
<b>So, what this is not a tool to fix up your blog, but it's a description of how I did it.</b><br />
<b><br /></b>
<br />
<h2>
First</h2>
<div>
Create a Blogger blog with a different account to the user that is going to leave. Go to <b>Settings > Email </b>and create a SECRET_EMAIL_ADDRESS and set it to <b>publish immediately</b>.</div>
<div>
<br /></div>
<h2>
Second</h2>
<div>
<br /></div>
<div>
I created a script that has Blogger API access ( no mean feat ), I created a Web App that does this...</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">var email = "SECRET_EMAIL_TO_YOUR_BLOG@blogger.com"</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">function doGet(e) {</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> if (e.parameter.name == "" | e.parameter.name == undefined){</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var name = null</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> }else{</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var name = e.parameter.name</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> }</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> Logger.log("id: " + e.parameter.id)// The file has to shared with the public of course so this web server can read it.</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"><br /></span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> if (e.parameter.src != "" & e.parameter.src != undefined){ //an image has been provided...</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> try{</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var src = e.parameter.src</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> Logger.log( "Getting image:" + src )</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var blob = UrlFetchApp.fetch(src).getBlob()</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> if (name == null){</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var name = blob.getName()</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> }</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var options = {name: name,attachments: [ blob]}</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> MailApp.sendEmail(email, name, "", options) //Sends to the secret blog address.</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> Logger.log( "Mail sent")</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> Utilities.sleep(4500)</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var blog_id = 'YOUR_BLOG_ID' // UoY Image Hosting</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var result = get_posts( blog_id )</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> Logger.log( result )</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var post = result.items[0] //Is this the latest one? Will it have got there?</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var id = post.id</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var author_name = post.author.displayName</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var author_id = post.author.id</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var title = post.title</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var content = post.content</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var regex = /<img.+?src=\"(.*?)\".+?>/ig </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var images = []</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> while ( m = regex.exec(content)){ // this gets out the right regex group</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> images.push( m[1] )</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> }</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> Logger.log (images)</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> //sheet.appendRow( [blog_id, id, author_name, author_id, title, content])</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"><br /></span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var appData = {</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> "status": "ok",</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> "src": images[0],</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> "postLink": post.url,</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> "doAnother": "URL TO THIS APP?src="</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> };</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"><br /></span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var JSONString = JSON.stringify(appData);</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var JSONOutput = ContentService.createTextOutput(JSONString);</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> JSONOutput.setMimeType(ContentService.MimeType.JSON);</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> return JSONOutput</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> }catch(e){</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var appData = {" status":"error", "message": e + ": " + e.stack }</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var JSONString = JSON.stringify(appData);</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var JSONOutput = ContentService.createTextOutput(JSONString);</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> JSONOutput.setMimeType(ContentService.MimeType.JSON);</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> return JSONOutput</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> }</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> }</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> //If they haven't supplied a src, then show the info page</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> // Default Home Page</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var template = HtmlService.createTemplateFromFile('info.html');</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> template.this_url = ScriptApp.getService().getUrl()</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> return template.evaluate();</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">}</span></div>
</div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"><br /></span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">function get_posts( blog_id ){</span><br />
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var url = 'https://www.googleapis.com/blogger/v3/blogs/' + blog_id + "/posts"</span><br />
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var scope = 'https://www.googleapis.com/auth/blogger';</span><br />
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var name = 'Blogger';</span><br />
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var fetchArgs = googleOAuth_(name,scope);</span><br />
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span><br />
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var blogObj = JSON.parse( UrlFetchApp.fetch(url, fetchArgs).getContentText() )</span><br />
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> return blogObj</span><br />
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">}</span><br />
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">function test_get_posts(){</span><br />
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var blog_id = 'YOUR_BLOG_ID' // </span><br />
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> Logger.log( get_posts( blog_id ))</span><br />
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span><br />
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">}</span></div>
<div>
<br /></div>
<br />
So, after publishing it, I now can call this app's URL with <span style="font-family: "courier new" , "courier" , monospace;">?src=myimageurl.jpg</span> on the end and it will re-host it in another user's account and return some JSON with the new src in it. Handy eh?<br />
<br />
<h2>
Third</h2>
So now I can download an XML backup file from Blogger > Settings > Other and add it to my Google Drive.<br />
<br />
<br />
<h2>
Fourth</h2>
<div>
<br /></div>
<div>
Now some scripts can read that file, find the images, and call the API that rehosts the images.</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">function fixUpBloggerXMLFile(){</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var xmlFileID = "LONG DRIVE ID HERE" //Your export xml file</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var xmlFile = DriveApp.getFileById(xmlFileID)</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var xmlFileName = xmlFile.getName()</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var xmlText = xmlFile.getBlob().getDataAsString()</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var ss_id = "YOUR SPREADSHEET ID"</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var ss = SpreadsheetApp.openById(ss_id) </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var sheet = ss.getSheets()[0]</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var range = sheet.getRange( "A2:B" + sheet.getLastRow())</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var values = range.getValues()</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> for (v in values){</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var row = values[v]</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var oldurl = row[0]</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var newurl = row[1]</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> if (newurl.indexOf("http") != -1){</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> xmlText = xmlText.replace(new RegExp(oldurl, 'g'), newurl);</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> }</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> }</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> DriveApp.createFile("FIXED-" + xmlFileName, xmlText)</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">}</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"><br /></span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"><br /></span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">function processNextImage(){</span></div>
<div>
</div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"><br /></span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var ss_id = "</span><span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">YOUR SPREADSHEET ID</span><span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">"</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var ss = SpreadsheetApp.openById(ss_id) </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var sheet = ss.getSheets()[0]</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var range = sheet.getRange( "A2:B" + sheet.getLastRow())</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var values = range.getValues()</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var i = 2</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> for (v in values){</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var row = values[v]</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var oldurl = row[0]</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var newurl = row[1]</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> if (newurl == ""){</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var newurl = getAlternativeImage(oldurl)</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> sheet.getRange(i, 2).setValue( newurl)</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> sheet.setRowHeight(i, 40)</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> }</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> i = i + 1 </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> } </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">}</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"><br /></span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">function getAlternativeImage(src){</span></div>
<div>
<br /></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var api = "URL TO YOUR API APP/exec?src="</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"><br /></span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> try{</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var url = api + src</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var text = UrlFetchApp.fetch(url).getContentText()</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var json = JSON.parse(text)</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var status = json['status']</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var new_src = json['src']</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> Logger.log( status, new_src)</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> return new_src</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> }catch(e){</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> return e + " " + e.stack</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> }</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"><br /></span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">}</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"><br /></span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">function getBlogsImages(){</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var ss_id = "</span><span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">YOUR SPREADSHEET ID</span><span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">"</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var ss = SpreadsheetApp.openById(ss_id)</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var sheet = ss.getSheets()[0]</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var images = readBloggerExportFile() </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> for (i in images){</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var image = images[i]</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> sheet.appendRow([image])</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> }</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">}</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"><br /></span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">function readBloggerExportFile() {</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var xmlFileID = "YOUR BLOGGER EXPORT XML FILE" //phil's</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var xmlFile = DriveApp.getFileById(xmlFileID)</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var xml = xmlFile.getBlob().getDataAsString()</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> //Logger.log( xml )</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var posts = BloggerExportFile_to_JSON(xmlFileID) /// This should be a list of [id, title, content ]</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var allImages = []</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var imageCount = 0</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> for ( p in posts){</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var post = posts[p]</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var id = post[0] </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var title = post[1]</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var content = post[2]</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"><br /></span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var images = findImages(content)</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> Logger.log( id + " " + content.length + " " + imageCount )</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> </span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> imageCount += images.length</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> //Logger.log( "---------------------------------------")</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> allImages = allImages.concat(images)</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> }</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> Logger.log( "There are " + imageCount + " images in this blog")</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> return allImages</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">}</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"><br /></span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">function findImages(text){</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var regex = /<img.+?src=\"(.*?)\".+?>/ig //var regex = /([^\s]+(?=\.(jpg|gif|png))\.\2)/gm; // ALL images including URLs in links</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> var images = []</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> while ( m = regex.exec(text)){ // this gets out the right regex group</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> images.push( m[1] )</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> }</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"> return images</span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">}</span></div>
</div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"><br /></span></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"></span><br />
<div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">function BloggerExportFile_to_JSON(drive_id) { </span></div>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">
<div>
</div>
<div>
var doc = DriveApp.getFileById(drive_id) // This is the XML file you get when you go to Blogger and use Settings > Other > Backup content that has been uploaded to Google Drive. </div>
<div>
var xml = doc.getBlob().getDataAsString() </div>
<div>
var xmldocument = XmlService.parse(xml);</div>
<div>
</div>
<div>
var items = []</div>
<div>
var result = {};</div>
<div>
var root = xmldocument.getRootElement();</div>
<div>
//Logger.log( root.getName())</div>
<div>
result[root.getName()] = elementToJSON(root); //SO much easier to debug and traverse</div>
<div>
</div>
<div>
var entries = result.feed.entry</div>
<div>
</div>
<div>
for (var e in entries){</div>
<div>
var entry = entries[ e ]</div>
<div>
var id = entry.id.Text</div>
<div>
</div>
<div>
if (id.indexOf("post") > -1){</div>
<div>
//It's a blog post and not a setting. Why do Blogger do that? Is it just to re-use the atom format?</div>
<div>
var regex = /post-([0-9])*/g;</div>
<div>
var found_id = id.match(regex)[0].replace("post-", "") //hack;</div>
<div>
items.push( [found_id, entry.title.Text, entry.content.Text])</div>
<div>
}</div>
<div>
}</div>
<div>
Logger.log( "There are " + items.length + " blog posts") </div>
<div>
</div>
<div>
return items;</div>
<div>
}</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
/**</div>
<div>
* Converts an XmlService element to a JSON object, using logic similar to </div>
<div>
* the sunset method Xml.parse().</div>
<div>
* @param {XmlService.Element} element The element to parse.</div>
<div>
* @returns {Object} The parsed element.</div>
<div>
*/</div>
<div>
function elementToJSON(element) {</div>
<div>
var result = {};</div>
<div>
// Attributes.</div>
<div>
element.getAttributes().forEach(function(attribute) {</div>
<div>
result[attribute.getName()] = attribute.getValue();</div>
<div>
});</div>
<div>
// Child elements.</div>
<div>
element.getChildren().forEach(function(child) {</div>
<div>
var key = child.getName();</div>
<div>
var value = elementToJSON(child);</div>
<div>
if (result[key]) {</div>
<div>
if (!(result[key] instanceof Array)) {</div>
<div>
result[key] = [result[key]];</div>
<div>
}</div>
<div>
result[key].push(value);</div>
<div>
} else {</div>
<div>
result[key] = value;</div>
<div>
}</div>
<div>
});</div>
<div>
// Text content.</div>
<div>
if (element.getText()) {</div>
<div>
result['Text'] = element.getText();</div>
<div>
}</div>
<div>
return result;</div>
<div>
}</div>
<div>
<br /></div>
</span></div>
<div>
<br /></div>
If you add this formula, <span class=" default-formula-text-color" dir="auto" style="background-color: white; font-family: "inconsolata" , monospace , "arial" , "sans" , sans-serif; font-size: 14px; white-space: pre-wrap;">=</span><span class=" default-formula-text-color" dir="auto" style="background-color: white; font-family: "inconsolata" , monospace , "arial" , "sans" , sans-serif; font-size: 14px; white-space: pre-wrap;">IMAGE</span><span class=" default-formula-text-color" dir="auto" style="background-color: white; font-family: "inconsolata" , monospace , "arial" , "sans" , sans-serif; font-size: 14px; white-space: pre-wrap;">(</span><span dir="auto" style="background-color: white; color: #f7981d; font-family: "inconsolata" , monospace , "arial" , "sans" , sans-serif; font-size: 14px; white-space: pre-wrap;">A2</span><span class=" default-formula-text-color" dir="auto" style="background-color: white; font-family: "inconsolata" , monospace , "arial" , "sans" , sans-serif; font-size: 14px; white-space: pre-wrap;">,</span><span class=" default-formula-text-color" dir="auto" style="background-color: white; font-family: "inconsolata" , monospace , "arial" , "sans" , sans-serif; font-size: 14px; white-space: pre-wrap;"> </span><span class="number" dir="auto" style="background-color: white; color: #1155cc; font-family: "inconsolata" , monospace , "arial" , "sans" , sans-serif; font-size: 14px; white-space: pre-wrap;">4</span><span class=" default-formula-text-color" dir="auto" style="background-color: white; font-family: "inconsolata" , monospace , "arial" , "sans" , sans-serif; font-size: 14px; white-space: pre-wrap;">,</span><span class=" default-formula-text-color" dir="auto" style="background-color: white; font-family: "inconsolata" , monospace , "arial" , "sans" , sans-serif; font-size: 14px; white-space: pre-wrap;"> </span><span class="number" dir="auto" style="background-color: white; color: #1155cc; font-family: "inconsolata" , monospace , "arial" , "sans" , sans-serif; font-size: 14px; white-space: pre-wrap;">40</span><span class=" default-formula-text-color" dir="auto" style="background-color: white; font-family: "inconsolata" , monospace , "arial" , "sans" , sans-serif; font-size: 14px; white-space: pre-wrap;">,</span><span class=" default-formula-text-color" dir="auto" style="background-color: white; font-family: "inconsolata" , monospace , "arial" , "sans" , sans-serif; font-size: 14px; white-space: pre-wrap;"> </span><span class="number" dir="auto" style="background-color: white; color: #1155cc; font-family: "inconsolata" , monospace , "arial" , "sans" , sans-serif; font-size: 14px; white-space: pre-wrap;">50</span><span class=" default-formula-text-color" dir="auto" style="background-color: white; font-family: "inconsolata" , monospace , "arial" , "sans" , sans-serif; font-size: 14px; white-space: pre-wrap;">) i</span>t creates a spreadsheet that looks like this... with the old url to the image and the new image's url.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguMl2FKxbS6tW4oeYe0K96X48hg2_isYQT37mle75-dJ7QoFLgyVfNEDg1jpxlSQF9UJmsC4juDybIeliRUkeuMq0lvC-YL1sza7Y4NBx_l-mNAWmNX8fIAPFeox6J3gKkm5w2KHYCmZ8/s1600/Screen+Shot+2018-11-05+at+12.22.49.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="635" data-original-width="1600" height="252" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguMl2FKxbS6tW4oeYe0K96X48hg2_isYQT37mle75-dJ7QoFLgyVfNEDg1jpxlSQF9UJmsC4juDybIeliRUkeuMq0lvC-YL1sza7Y4NBx_l-mNAWmNX8fIAPFeox6J3gKkm5w2KHYCmZ8/s640/Screen+Shot+2018-11-05+at+12.22.49.png" width="640" /></a></div>
<br />
And generates a new Blogger export XML file that when you import it, doesn't duplicate the posts and replaces them with the images fixed up to be re-hosted on a different blog.<br />
<br />
<br />
<h2>
<br />In Conclusion</h2>
<div>
<br /></div>
<div>
I've complained (several times) to Google about this, and their response is kind of, "hey, blogging's dead you know", which is a shame.</div>
<div>
<br /></div>
<div>
The only "real" solution is to make a point of loading your images somewhere else first, then just using the URLs to those images, rather than uploading them into the Blogger interface, which is a real pain... but if you want your posts to live longer than your position, then that's the only way as far as I can see. But this method is some sort of potential "fix me up" of sorts.</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<br />
<br />
<br />
<br />
<br />
<br />Tom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.com2tag:blogger.com,1999:blog-6274613198416400788.post-52350537561248998332018-10-17T13:02:00.003+01:002018-10-17T13:15:38.852+01:00Coding Free Visualisation - WOW!<div class="gmail_default" style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: large;">
<div class="gmail_default" style="font-size: small;">
<span style="font-size: medium;">Today I stumbled across some similar tools that really help with visualisation. They take the approach that you start drawing and then attach attributes of your drawing to data (typically an uploaded .csv file).</span></div>
<div class="gmail_default" style="font-size: small;">
<span style="font-size: medium;"><br /></span></div>
<div class="gmail_default" style="font-size: small;">
<span style="font-size: medium;">To get an idea of the field, Adobe have Project Lincoln, which is fun to watch, but with Adobe products I often discount them because they aren't cheap and readily available as a teaching resource. The video has lots of whooping, but shows the concept well.</span></div>
<div class="gmail_default" style="font-size: small;">
<span style="font-size: medium;"><br /></span></div>
<div class="gmail_default" style="font-size: small;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/lX1BBMyY1bc/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/lX1BBMyY1bc?feature=player_embedded" width="320"></iframe></div>
<div class="gmail_default" style="font-size: small;">
<br /></div>
<div class="gmail_default" style="font-size: small;">
<span style="font-size: medium;"><br /></span></div>
<div class="gmail_default" style="font-size: small;">
<span style="font-size: medium;">The tool that has blown my socks off is <a href="https://charticulator.com/" target="_blank">Charticulator</a> </span><span style="font-size: medium;"> because I was able to upload .csv of trees that contains lat/long information and make this. Not only can you "see" the line of trees along University Road, the trees are coloured according to species and the heights are mapped to the heights in the data.</span></div>
<div class="gmail_default" style="font-size: small;">
<span style="font-size: medium;"><br /></span></div>
<div class="gmail_default" style="font-size: small;">
<span style="font-size: medium;"><br /></span></div>
</div>
<div style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small;">
<div class="gmail_signature" dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div>
<br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge7FxkUilToq_ZqIaFh9TB1AyA3giRN5iDv4g7GeU_4YNdYbZKTqZ8ZxWpwemUeCZ2qPzttNMQFjTkWuVzhgxPtxxdVSSrv9AucCXgXzsLd3YZwO_F74qX0l5RGrNjBKG0sB1EbC3xyDI/s1600/charticulator+%25285%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1022" data-original-width="1600" height="408" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge7FxkUilToq_ZqIaFh9TB1AyA3giRN5iDv4g7GeU_4YNdYbZKTqZ8ZxWpwemUeCZ2qPzttNMQFjTkWuVzhgxPtxxdVSSrv9AucCXgXzsLd3YZwO_F74qX0l5RGrNjBKG0sB1EbC3xyDI/s640/charticulator+%25285%2529.png" width="640" /></a></div>
<div class="gmail_default" style="font-size: large;">
<br /></div>
<div class="gmail_default" style="font-size: large;">
Still a novice with the tool, I wondered how I might create a key, so I created a new visualisation that mapped the Y value to species and the X value to maturity of the tree and the height to height, and got this, which turned out to be an interesting visualisation in its own right, revealing different aspects about the distribution of age ranges of trees.</div>
<div class="gmail_default" style="font-size: large;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwLLxhJwv70xt5jGl794PpCHPaPHrsKRHfLXwobXghoZypKxtLXbmGFVlBcuo8BFNuYvwv_WVG-VAWTasR5LvTehFDDeAn2UfPVdJP5txyZF5TpdFSRTtc-qevK7bmYmKcE30Fr7mrsk0/s1600/charticulator+%25286%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="356" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwLLxhJwv70xt5jGl794PpCHPaPHrsKRHfLXwobXghoZypKxtLXbmGFVlBcuo8BFNuYvwv_WVG-VAWTasR5LvTehFDDeAn2UfPVdJP5txyZF5TpdFSRTtc-qevK7bmYmKcE30Fr7mrsk0/s1600/charticulator+%25286%2529.png" /></a></div>
<div class="gmail_default" style="font-size: large;">
<br /></div>
<div class="gmail_default" style="font-size: large;">
<br /></div>
<div class="gmail_default" style="font-size: large;">
<br /></div>
</div>
<div class="gmail_default" style="font-size: large;">
Other tools in a similar vein, but with which I had less success, but to be fair, I haven't spent much time with were:</div>
<div class="gmail_default" style="font-size: large;">
<br /></div>
<div class="gmail_default" style="font-size: large;">
<br /></div>
<div class="gmail_default" style="font-size: large;">
<br /></div>
<div>
<div class="gmail_default" style="font-size: large;">
<b><a href="http://www.data-illustrator.com/index.php" target="_blank">Data Illustrator</a></b></div>
<div class="gmail_default" style="font-size: large;">
<br /></div>
<div class="gmail_default" style="font-size: large;">
...and...</div>
<div class="gmail_default" style="font-size: large;">
<br /></div>
<div class="gmail_default" style="font-size: large;">
Data Driven Guides. Here's an <a href="https://medium.com/@namwookkim/data-driven-guide-designing-expressive-information-graphics-e068a0c552e9" target="_blank">article</a> about it and here is the <a href="https://hyecoo.namwkim.org/" target="_blank">tool</a> (beta I believe)</div>
<div class="gmail_default" style="font-size: large;">
<br /></div>
<div class="gmail_default" style="font-size: large;">
<h4>
<b>Conclusion</b></h4>
<div>
All of these tools have the same concept behind them, and after minutes of testing they all look worthy of deeper exploration. I'd recommend you watch the introductory videos, they're short and explain how to get started. I tried without the videos intros and failed to make anything useful. </div>
</div>
<div class="gmail_default">
<br /></div>
<div class="gmail_default">
<span style="font-size: medium;"><br /></span></div>
<div class="gmail_default">
<br /></div>
<div class="gmail_default" style="font-size: large;">
<br /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Tom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.com0tag:blogger.com,1999:blog-6274613198416400788.post-90437725324286956712015-10-27T10:10:00.000+00:002015-10-27T10:10:30.770+00:00My Recent ProjectsRather than blog about my recent work, I thought I'd try Google Sites. I'm not exactly sure why, but a Site does have the ability to break things down into pages, rather than creating ONE HUGE blog post, or an unconnected stream of related posts.<br />
<br />
There's stuff about Google Apps to create web applications or improve processes, Livecode multimedia authoring and a little visualisation stuff.<br />
<br />
Anyway, here it is:<br />
<br />
<a href="https://sites.google.com/a/york.ac.uk/tom-smith/2014-2015-projects">https://sites.google.com/a/york.ac.uk/tom-smith/2014-2015-projects</a><br />
<br />
<br />Tom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.com0tag:blogger.com,1999:blog-6274613198416400788.post-37230954805205650122015-10-13T20:50:00.000+01:002015-10-13T20:50:56.830+01:00Reflections on Wuthering BytesA week or so ago I went to the <a href="http://wutheringbytes.com/days/festival/talks.html" target="_blank">Wuthering Bytes</a> conference in Hebden Bridge. The event had a maker/hacker/thinker angle I was keen to snoop into, to find out what people were up to in this strange world that seems to have blossomed whilst I wasn't looking.<br />
<div>
<br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUwvFhMxgf5Ww3m_HdwdnQvNg-UAhJanWNnIKZ7Ws-99AsXyvkoEITaq8HIj56xSTiJJ9Y-9jaGjgiWjtuVBd1PU8mCd24iqbuIPOeqQdl37iQzLCVXTWd6jW_pQTtOOjSg6SsVIa7GfU/s1600/photo+2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="275" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUwvFhMxgf5Ww3m_HdwdnQvNg-UAhJanWNnIKZ7Ws-99AsXyvkoEITaq8HIj56xSTiJJ9Y-9jaGjgiWjtuVBd1PU8mCd24iqbuIPOeqQdl37iQzLCVXTWd6jW_pQTtOOjSg6SsVIa7GfU/s400/photo+2.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The presentations began with <b>Prof. Danielle George</b>, who I heard being interview on Radio 4 on the way in to work about her work with radio engineering... from looking deep into space, to controlling jet engines to monitoring field moisture levels for effective agriculture.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizEtmbsIbjlpUZoiXvcUNLZS6VyJa_IKqz8SoW2yFYT7JwKk9eLv8dOszBSfGoH78N3XHET21pWrZfh1FIrLUI-pHN7InJxBXkPlyss5EUMXHom0jDKKH1rGt2oq5IRM86R0FwOxoMPwo/s1600/photo+1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="298" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizEtmbsIbjlpUZoiXvcUNLZS6VyJa_IKqz8SoW2yFYT7JwKk9eLv8dOszBSfGoH78N3XHET21pWrZfh1FIrLUI-pHN7InJxBXkPlyss5EUMXHom0jDKKH1rGt2oq5IRM86R0FwOxoMPwo/s400/photo+1.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Next up <b>Stephen Jagger</b>, gave us an amusing history of an audio engineering company, making microphones and mixer desks for the BBC. My favourite part was about the white lie they told to get their biggest gig. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijAGrIR1NXlDjbZz9ykEVPOq3HtP9kXfAbRN1xBigZse6jYQhrhw1f44WVz-jMjlRrRZYV3958ehI8jjo8bvJoJzEd25aJnvR-R0Y53SzMdrRFaTzmZGXmhx_3rp9StvrkuWvZWiYIwTA/s1600/photo+3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="298" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijAGrIR1NXlDjbZz9ykEVPOq3HtP9kXfAbRN1xBigZse6jYQhrhw1f44WVz-jMjlRrRZYV3958ehI8jjo8bvJoJzEd25aJnvR-R0Y53SzMdrRFaTzmZGXmhx_3rp9StvrkuWvZWiYIwTA/s400/photo+3.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Leila Johnston</b>, in unbelievable shoes, shared her work with Hack Circus, a publication that tackles a "geek" subject, but strangley, before it is published always mutates into an art event, and focal point for "community outsiders". </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Towards the end, Leila started drifting into startup self mode, which I loved... including nuggets such as "PUT YOURSELF OUT OF CONTEXT" ... and "USE WHAT YOU HAVE GOT NOT WHAT YOU WISH YOU HAD". I found these messages strangely profound. The mantras kept coming, "BE SUSPICIOUS OF ALL DELAYS".</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz7ikR5HkpXRO26pWbM_75QGsx55h9tlLoAzA3u-SeT-qxvW1pnmt15v131dCT36B1ATWvSf-4jPAKDvfaJf9gGBI3SiaC6gn2DqBcAWwGjp1XUh7lFFXgk-56J_gSKLoUGhmnObmop_I/s1600/photo+5.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="325" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz7ikR5HkpXRO26pWbM_75QGsx55h9tlLoAzA3u-SeT-qxvW1pnmt15v131dCT36B1ATWvSf-4jPAKDvfaJf9gGBI3SiaC6gn2DqBcAWwGjp1XUh7lFFXgk-56J_gSKLoUGhmnObmop_I/s400/photo+5.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br />
<div>
<b>Jeremy Ruston</b>, the inventor of TiddlyWiki, was a hoot. Like Will Self in voice and laconic langour ( get me trying to use big words Will Self stylee) , he shared a sort hippy take on the last few decades of computing I liked. "NOT EVERYBODY IS LIKE US". ... and "TECHNOLOGY IS CUNNING MADE CONCRETE".<br />
<br />
I liked his schtick, the title of his presentation was "Hackability as a Human Right", and he explained how part of the power of "the hack" is that the cost of failure, both in emotional and fiscal terms is minor. You may lose some time and effort, but that's all and when "the hack" works it can be beautiful and flourish. And, to "not hack" is an abdication of "what matters".<br />
<br />
Good schtick.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbNc279EvYBEjFWS39TzdKvAWJ9xd16U9xrZ3uDsz-DOjNMsFv8HgTFazpJ_9WCcmeYTzgdZ9VGRL7osSPlOyre3iWRrfSH7tfdODh0LJu-8gm9wNbRtj03g8LB90NaVF5e0IifOusuuI/s1600/aphoto+1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="337" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbNc279EvYBEjFWS39TzdKvAWJ9xd16U9xrZ3uDsz-DOjNMsFv8HgTFazpJ_9WCcmeYTzgdZ9VGRL7osSPlOyre3iWRrfSH7tfdODh0LJu-8gm9wNbRtj03g8LB90NaVF5e0IifOusuuI/s400/aphoto+1.JPG" width="400" /></a></div>
<br />
<br />
<b>Christine Farion</b>, "the bag lady" demoed her anxiety reducing handbag that shows when the right RFID tagged items are in it and shared some of the history of attempts to use technology to be an aid to our everyday lives. Her research has taken her down the road of ever simpler designs, to the point where they sort of just work the way you'd expect they would. She finished with the line "EVERYTHING IS POSSIBLE - I JUST DON'T KNOW HOW RIGHT NOW".<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFT1kSiYMDxs3sfGcIC5kbZ7tFuQUIH6H9yNguiz88os6xxmI0G-KDYc7jOQGiXeP2YXe-qPtO1Nl6_Sn92jmyT9Tl-qr92ZzkD3ClZ8bGYZ2CM71YIqcIlzFp4h0o8uWDZgz44LmGAcI/s1600/aphoto+3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="326" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFT1kSiYMDxs3sfGcIC5kbZ7tFuQUIH6H9yNguiz88os6xxmI0G-KDYc7jOQGiXeP2YXe-qPtO1Nl6_Sn92jmyT9Tl-qr92ZzkD3ClZ8bGYZ2CM71YIqcIlzFp4h0o8uWDZgz44LmGAcI/s400/aphoto+3.JPG" width="400" /></a></div>
<br />
<b>David Hayward</b> shared his journey through and beyond the world of making video games. There seemed to be a route emerging whereby people aim to be part of big (and literally very bad) industries, get battered whilst making a life and then find more artistic and event-oriented careers.<br />
<br />
David shared video games that just didn't make sense revealing a sub culture of people who don't care about shoot 'em ups or driving games, and whose shaping cultural influences weren't Star Wars and Lord of the Rings.<br />
<br />
He gets asked "What's your business model?" a lot.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjJkiRDPWA9oKzBK0SXYmlDWhpDyPt4n_ZD56HIUoL2FtWlpeg4IH5nVjRmL5a-zdGb9FhX_mtI6zY7c2uyBb5hf0r0ZmjwMy_xZW92_JvowraPAY8jRtHRajnL-D0KR0g7FFqThmhJHg/s1600/pahoto+5.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="298" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjJkiRDPWA9oKzBK0SXYmlDWhpDyPt4n_ZD56HIUoL2FtWlpeg4IH5nVjRmL5a-zdGb9FhX_mtI6zY7c2uyBb5hf0r0ZmjwMy_xZW92_JvowraPAY8jRtHRajnL-D0KR0g7FFqThmhJHg/s400/pahoto+5.JPG" width="400" /></a></div>
<br />
<br />
<b>Jennifer Crawford</b> shared battle stories of working with victorian printing machines, and cracking out startup ideas and approaches. So, using the old hot metal typesetting slugs, they now emboss moleskine notebooks, or they utilize Etsy to make prints etc.<br />
<br />
But again, they're actually taking an old 2 tonne typesetting machine out on the road as an event/experience. Catch them at the next Ideal Home show apparently. <br />
<br />
I reckon they'll get asked about their business model too.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHcwjPwJ_DeTsdgf-GKN4TG4dh_EVfL4k6LvQvLHGXEHAlNO5MiMvhwxlRILqW2jdH3mdE3QihOA8FVndR1ercoTXteHqttx5zTS_XgOqt9BcKXmAHHLbrk5JqFkody-IpemqK0PVvX80/s1600/photo+1+copy.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="291" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHcwjPwJ_DeTsdgf-GKN4TG4dh_EVfL4k6LvQvLHGXEHAlNO5MiMvhwxlRILqW2jdH3mdE3QihOA8FVndR1ercoTXteHqttx5zTS_XgOqt9BcKXmAHHLbrk5JqFkody-IpemqK0PVvX80/s400/photo+1+copy.JPG" width="400" /></a></div>
<br />
<b>David Mills </b>is a guy who can take a rolled up and stuck together parchment scroll, and using a CT scanner take "slices" through the photo, measure the thickness of the ink. The clever bit is using software to take these spirals, flip them around and thus be able to ACTUALLY READ THE WRITING ON THE SCROLL. Incredible. You may have seen this on the BBC a while ago.<br />
<br />
He also X rays his lunch every day and posts it on Twitter.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_foPPA5Fa5t55eqRDxf_f9zxs9jk5diY9SsjZ7s6_lB-MLo53bLyu1YUmLc24d8wxoCsyVTHjYUpHMkC7PHzb9Q3UNpaIt3B15UycWZAp9xh2aBg7vOnkQho4YWFPJpyvVStLoQM7S9w/s1600/photo+2+copy.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="298" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_foPPA5Fa5t55eqRDxf_f9zxs9jk5diY9SsjZ7s6_lB-MLo53bLyu1YUmLc24d8wxoCsyVTHjYUpHMkC7PHzb9Q3UNpaIt3B15UycWZAp9xh2aBg7vOnkQho4YWFPJpyvVStLoQM7S9w/s400/photo+2+copy.JPG" width="400" /></a></div>
<br />
From I CAN MAKE, Chris Thorpe shared their educational 3D printing projects, but most interestingly defined the difference between hackers or makers or geeks or whatever you want to call them, and NORMALS. I loved their print a working Tower Bridge project, which they run as a lesson IN Tower Bridge. I loved how they created lesson plans and not just 3D models and had a philosophy of "DISRUPT TEDIUM". </div>
<div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS8ACnkPO44HGA9HuGSeAQiYu7BoycbVLCvt9E-w0YIAeLsy8Nzfb6xtxoLob4jArvZt-Hd_0fa3b4RjbOGiuqgfcAEQGqUHFF6ZXTAiaYdKQds8D1-mxUq2xPrZbQEYjYPrkD-06Ltb4/s1600/photo+4+copy.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="307" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS8ACnkPO44HGA9HuGSeAQiYu7BoycbVLCvt9E-w0YIAeLsy8Nzfb6xtxoLob4jArvZt-Hd_0fa3b4RjbOGiuqgfcAEQGqUHFF6ZXTAiaYdKQds8D1-mxUq2xPrZbQEYjYPrkD-06Ltb4/s400/photo+4+copy.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The day ended with <b>Eva Pascoe</b>, who I didn't know I knew ( of ). She was behind Cyberia, the internet cafes way back in prehistoric times. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I liked it when she spoke of the important of Trust, got everyone to get their phone out, mentioning privacy and Facebook then told everyone to pass their phone to the person beside them and let them have a rummage around. Ha! </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Eva had battle scars from the Cookie wars and sang songs of how the commercial world defeated the engineers, and lamented how everyone seems to "be resigned to it". She continues to work fighting for who gets access to data, and is contributing to a World Magna Carta / Bill of Rights for the internet world. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br /></div>
</div>
Tom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.com0tag:blogger.com,1999:blog-6274613198416400788.post-55809728268016583532015-09-17T11:56:00.000+01:002015-09-17T11:56:00.952+01:00Apps Used in York's Archaeology Data Service<span style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;">Following a short presentation about online apps we're looking at at York, Michael Charno got in touch and said..</span><br />
<span style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;"><br /></span>
<br style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;" /><i><span style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;">The following are apps that we use at the Archaeology Data Service:</span><br style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;" /><br style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;" /><span style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;">* Asana [</span><a href="https://asana.com/" style="background-color: white; color: #0078dc; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px; text-decoration: none;" target="_url_in_desc">https://asana.com/</a><span style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;">]: Its a really simple task management app</span><br style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;" /><span style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;">that enables task allocation, commenting, prioritising, creating</span><br style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;" /><span style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;">deadlines, etc. Its free for use amongst 10 colleagues, so we've</span><br style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;" /><span style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;">been fine with it so far.</span><br style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;" /><span style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;">* New Relic [</span><a href="http://newrelic.com/" style="background-color: white; color: #0078dc; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px; text-decoration: none;" target="_url_in_desc">http://newrelic.com/</a><span style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;">]: Systems analytics software for</span><br style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;" /><span style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;">understanding where problems exist in servers/web</span><br style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;" /><span style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;">applications/interfaces. Obviously more useful for people managing</span><br style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;" /><span style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;">servers or web applications, so might not be widely useful. However</span><br style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;" /><span style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;">if the university was going to get a license we'd happily join in!</span><br style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;" /><span style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;">* Slack [</span><a href="https://slack.com/" style="background-color: white; color: #0078dc; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px; text-decoration: none;" target="_url_in_desc">https://slack.com/</a><span style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;">]: We used the free version but quit after</span><br style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;" /><span style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;">we found ourselves moving to the 10,000 message limit quickly and</span><br style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;" /><span style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;">didn't want to purchase a license. We haven't replaced it, but would</span><br style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;" /><span style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;">certainly start using it again if the university was going to get it.</span></i><br />
<span style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;"><br /></span>
<span style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;"><br /></span>
<span style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;">It's not the first time someone at York has mentioned Asana to me. I went to the tool, logged in with my York account and it tells me that <b>277 York members are already there</b> (including Dan and Paul from the Web Office). After a quick look, I do like the simplicity of Asana.</span><br />
<span style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;"><br /></span>
<span style="background-color: white; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 16.0029983520508px;">Slack is like a<b><i> twitter for your team</i></b> application. Anyone else tried it or like it?</span>Tom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.com4tag:blogger.com,1999:blog-6274613198416400788.post-49118202131604648862015-09-16T15:17:00.000+01:002015-09-16T15:19:27.888+01:00My Reflections on ALTC 2015<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD6-_B8ka10wbFDQb3K58z4XSgIUUC9Vw7PCNFc4GhDKFC6JFF2VeqvwrKmK97Q564l_O9I8FVjld-tb6YFxSQrzAy_gn8xMJldVvELN6vj31mvv6YV84a92bprBAkx0UXr0u6ewbzlcU/s1600/ALT.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD6-_B8ka10wbFDQb3K58z4XSgIUUC9Vw7PCNFc4GhDKFC6JFF2VeqvwrKmK97Q564l_O9I8FVjld-tb6YFxSQrzAy_gn8xMJldVvELN6vj31mvv6YV84a92bprBAkx0UXr0u6ewbzlcU/s640/ALT.jpg" width="640" /></a></div>
<h2 class=" meta-field photo-desc " id="yui_3_16_0_1_1442411578055_1885" style="background-color: white; clear: both; color: #212124; font-family: 'Proxima Nova', 'helvetica neue', helvetica, arial, sans-serif; font-weight: 400; line-height: 18px; margin: 0px; min-height: 18px; padding-bottom: 0px;">
<div style="text-align: center;">
<span style="font-size: xx-small;">Photo credit : Chris Bull</span></div>
<div style="text-align: center;">
<a data-rapid_p="43" href="http://www.chrisbullphotographer.com/" rel="nofollow" style="color: #006dac; cursor: pointer; text-decoration: none; transition: color 150ms ease;"><span style="font-size: xx-small;">www.chrisbullphotographer.com</span></a></div>
<div style="text-align: center;">
<span style="font-size: xx-small;">pictures@chrisbullphotographer.com</span></div>
<div style="text-align: center;">
<span style="font-size: xx-small;">+44 (0)7968440920</span></div>
<div style="font-size: 14px;">
<br /></div>
</h2>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Last week I spent three days at the Association for Learning Technology Conference (#altc) in Manchester. </span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">It’s been a good few years since I’ve done the conference thing but I was looking forward to totally immersing myself in ideas and learning from people's’ experiences. </span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">The conference themes were:</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Harnessing the power of the crowd – collaboration and connectivist learning </span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Learners as agents of change </span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Open educational practice </span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Participatory approaches to the development of learning technologies </span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Social media in learning and teaching
</span></div>
</li>
</ul>
<h2 dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 10pt;">
<span style="background-color: transparent; color: black; font-family: 'Trebuchet MS'; font-size: 17.333333333333332px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">The Emergent Themes - What It Really Was About</span></h2>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">For me, the standout sessions and the ideas that seemed to permeate most of the conference were:</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Learning Analytics</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Research and reports regarding User Centred Methodologies and Pedagogies </span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Novel approaches and research to learning i.e technologies, apps, MOOCs, IoT, wearables etc</span></div>
</li>
</ul>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">… but this of course could have just been the sessions I chose to go to. There was an overwhelming choice of sessions at any one time, which inevitably gives you the feeling that you must be missing more than you’re getting. Take a look at the sessions for day one here </span><a href="https://altc.alt.ac.uk/2015/programme-interactive/#/day1" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://altc.alt.ac.uk/2015/programme-interactive/#/day1</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. </span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">I took copious notes throughout the conference, or rather doodled a lot, knowing that when you get flooded with information it’s so easy to lose many of the small but interesting threads. I did. Even now, a week later things are still sinking in.</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFU-mLmfzDN4C1_sxpMtQNsJ5Rsxevs0IdyvivC89q7dmW-qcBtFy7K8a4PXoYoWfufIaigQMXJhCvId837a4hH247G3p4KKI1nYxYbD1wJwgpXBeU5rsPFsHnekCEpYlXs7EnYlqxtLk/s1600/photo+2+%25281%2529.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="204" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFU-mLmfzDN4C1_sxpMtQNsJ5Rsxevs0IdyvivC89q7dmW-qcBtFy7K8a4PXoYoWfufIaigQMXJhCvId837a4hH247G3p4KKI1nYxYbD1wJwgpXBeU5rsPFsHnekCEpYlXs7EnYlqxtLk/s640/photo+2+%25281%2529.JPG" width="640" /></a></div>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<h2 dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 10pt;">
<span style="background-color: transparent; color: black; font-family: 'Trebuchet MS'; font-size: 17.333333333333332px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span></h2>
<h2 dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 10pt;">
<span style="background-color: transparent; color: black; font-family: 'Trebuchet MS'; font-size: 17.333333333333332px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Learning Analytics</span></h2>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">I’m guilty of assuming I knew what Learning Analytics was simply because I recognise the words. The conference has given me a clearer understanding of the aims and intentions people have but it’s clear that the paint is not dry on lots of Learning Analytics thinking. </span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">All the Learning Analytics sessions were about early findings and plans for the future. Yes, there are some “complete” products available, like IBM’s Portal. Interestingly, for me, IBM seem to bundle a social tool ( think Facebook for the university ) which could be used, very obviously, to feed more usage data into the learning analytics side of things. Seems a smart-ish.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">The JISC Learning Analytics initiative and tools looked very interesting. We saw wireframe mockups and finished designs of what the student app and the teacher dashboards would look like. They looked slick. But it was funny how, when you start “playing” with the app in your mind, digging deeper, all sorts of dark corners and questions start to emerge about how it would work and what it would mean and what would then follow. The ethics and oversights of Learning Analytics are as important as the how it all works. </span><a href="http://analytics.jiscinvolve.org/wp/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://analytics.jiscinvolve.org/wp/</span></a></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">I was particularly intrigued by JISC’s “Consent Service” component, where a student might agree to their data being used to provide them with more information or even BYOD (Bring Your Own Data, for example uploading your FitBit logs or allowing access to other online resources).</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">The OU suggested that aligning your learning analytics with your educational vision was the only way forward. This made complete sense and they showed how different universities had approached their learning analytics implementations.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">We saw a presentation from Brocklehurst College who were working with IBM’s Portal service. They’re a year in and claim myriad improvements in retention and performance. </span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">From Hull, @thebigparticle, noted that their Learning Analytics work had stimulated lots of discussion with students, that superficially was about the tool, but actually was about their learning, and that this was invaluable, changing students’ mindsets. </span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBDX9vlGOWRUZrohhfzf1MJV5SxVzXRIByJgI2EQN06S2bR_YUyWOqqlXcBesC3QhFOsvec07n4D-O2cck-1f783cH4SqSQ7YdCCAfA6AO2TrPhsdLzNcM8Mkvp4yUbTQp20R4ARTmDLk/s1600/photo+1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="194" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBDX9vlGOWRUZrohhfzf1MJV5SxVzXRIByJgI2EQN06S2bR_YUyWOqqlXcBesC3QhFOsvec07n4D-O2cck-1f783cH4SqSQ7YdCCAfA6AO2TrPhsdLzNcM8Mkvp4yUbTQp20R4ARTmDLk/s640/photo+1.JPG" width="640" /></a></div>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<h2 dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 10pt;">
<span style="background-color: transparent; color: black; font-family: 'Trebuchet MS'; font-size: 17.333333333333332px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Some Random Technology, Apps and Gadgets</span></h2>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">QuizIt Champion was an interesting quiz testing app That will be released soon and is free. </span><a href="http://blogs.plymouth.ac.uk/telmed/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://blogs.plymouth.ac.uk/telmed/</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Aurasma AR tool looks fun and powerful - and really could be used with Archaeology exhibits, for example. Think of everything in the world as a visual QR code, kinda.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">iBeacons are little devices that send out “I am here, I am here” messages, meaning you can, with an app, ascertain presence or closeness to the device. With 3 in a room you can effectively do indoor GPS. These look fun to tinker with.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Makey Makey is what you need </span><a href="https://www.youtube.com/watch?v=rfQqh7iCcOU" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://www.youtube.com/watch?v=rfQqh7iCcOU</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> when you want a banana piano. No seriously.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><a href="http://goanimate.com/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://goanimate.com/</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> is being used for storyboarding. </span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">If you haven’t seen the horror site, Take This Lollipop, and you use Facebook, give it a whirl. </span><a href="http://www.takethislollipop.com/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://www.takethislollipop.com/</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit0CFmRRZs3swKUd-PiiFsi1vPA1NNrGUmKoJBSuWAW4PZPTqau4-WPwJEgB4_e24tpPOag8G7xZNlDZ9g8QHH_JLIZpv7MnU49vs8soLxLBtqgJZtbxf1oDManguUuH4958Ibn5T7Pt8/s1600/photo+3+%25281%2529.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit0CFmRRZs3swKUd-PiiFsi1vPA1NNrGUmKoJBSuWAW4PZPTqau4-WPwJEgB4_e24tpPOag8G7xZNlDZ9g8QHH_JLIZpv7MnU49vs8soLxLBtqgJZtbxf1oDManguUuH4958Ibn5T7Pt8/s640/photo+3+%25281%2529.JPG" width="640" /></a></div>
<b style="font-weight: normal;"><br /></b>
<br />
<h2 dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 10pt;">
<span style="background-color: transparent; color: black; font-family: 'Trebuchet MS'; font-size: 17.333333333333332px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Student Centered Processes: </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">@GCDigiTech </span></h2>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Gloucester College had a nice project where they asked “Student Innovators” to trial and review apps to tell other students if they’re useful or not in their studies. The students blogged their thoughts here. </span><a href="http://gcstudentinnovators1415.blogspot.co.uk/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://gcstudentinnovators1415.blogspot.co.uk/</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">The created an “App of The Week” category and used the blog to provide some peer support. Recommended apps included Grammarly and RefMe.</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">This interesting part of this was how students were researching the tools and ways they wanted to work, making suggestions and recommendations to their lecturers and each other, and discussing with each other the best approaches. </span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<h2 dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 10pt;">
<span style="background-color: transparent; color: black; font-family: 'Trebuchet MS'; font-size: 17.333333333333332px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">To Wrap Up</span></h2>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">I headed off to ALTC expecting to learn a lot and I learned more than I expected. I learned that full on three day conferences are knackering, I’m getting old, and concentrating and listening hard for that amount of time is taxing work. I will of course, be suggesting a meditation zone with sitar players, hot tubs and champagne to the organisers for next year, back me up people. </span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span></div>
<hr />
<br />
<b style="font-weight: normal;"><br /></b>Tom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.com3tag:blogger.com,1999:blog-6274613198416400788.post-12918771542018920772015-04-01T11:57:00.001+01:002015-04-01T11:57:31.083+01:00Getting the Edit Link From A Google Form ResponseThis code snippet may be of use to someone. I couldn't find an easier way of doing this. You need to familiar with Apps Script and Forms to get this, sorry.<br />
<br />
When you have a Google Form saving responses into a Google Spreadsheet, at times it would be nice to be able to give people the link to edit their form ( later ).<br />
<br />
So.. in your <b>onFormSubmit(e)</b> function you need...<br />
<br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">var timestamp = e.range.getValues()[0][0]</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">var row_num = e.range.getRow()</span><br />
<br />
If you get the value from e.values or e.namedValues it doesn't work. No idea why... it may be something to do with millisecond precision or the space/time continuum... dunno.<br />
<br />
Then you need a function like this...<br />
<br />
<br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">/**</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">* Gets edit link for a response's timestamp</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">*</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">* @method render_text</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">* @param {string} Form ID"</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">* @param {timestamp} A date</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">* @return {string} A URL.</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">*/</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">function get_edit_link_for(form_id, timestamp){</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> </span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> var form = FormApp.openById(form_id)</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> var formResponses = form.getResponses();</span><br />
<span style="font-family: 'Courier New', Courier, monospace; font-size: x-small;"> </span><br />
<span style="font-family: 'Courier New', Courier, monospace; font-size: x-small;"> // Let's work backwards through the list, should get there quicker...</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> formResponses.reverse() </span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> </span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> for (var i = 0; i < formResponses.length; i++) {</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> var formResponse = formResponses[i]; </span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> var response_timestamp = formResponse.getTimestamp()</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> </span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> if ( Number(timestamp) == Number(response_timestamp)){</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> var url = formResponse.getEditResponseUrl()</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> return url</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> break</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> } </span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> }</span><br />
<span style="font-family: 'Courier New', Courier, monospace; font-size: x-small;"> //If it gets to here, it ain't found it. Boo!</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> Logger.log( "Error: get_edit_link_for") </span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">} </span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><br /></span>
<span style="font-family: inherit;">...You then just... </span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">var edit_url = get_edit_link_for("YOUR_FORM_ID", timestamp)</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">sheet.getRange(row_num, YOUR_COLUMN_NUMBER).setValue( edit_url )</span><br />
<br />
...and save it in your onFormSubmit function and it's there ready to send out in an email if need be.<br />
<br />
Hope this helps.<br />
<br />
<br />
<br />
<br />
<br />Tom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.com8tag:blogger.com,1999:blog-6274613198416400788.post-33125499634870031222015-03-27T11:45:00.000+00:002015-03-27T11:45:09.887+00:00The Rebirth of Authoring? Making iPad apps with LiveCodeI recently was asked if I'd heard of an<b> authoring tool </b>for creating iPad apps called <a href="http://livecode.com/">LiveCode</a>.<br />
<br />
I don't know if you know, but LiveCode is like the only living grandchild of a tool called HyperCard. And you might not also know, that like the post punk band, <a href="https://www.youtube.com/watch?v=ibS5qIyEK4U">Killing Joke</a>, HyperCard is one of those subjects that makes me want to sit you down and tell you stories from days of yore. For EVER.<br />
<br />
You see, HyperCard was the tool that I first did any programming with, back in 1991. The Apple Macintosh was billed as "The Computer For The Rest Of Us"... and HyperCard, bundled free with every Macintosh was "Programming For The Rest Of Us".<br />
<br />
But before I can regale you with tales of HyperCard's features, you need to understand the context from which HyperCard sprang. You have to do some homework.<br />
<br />
<h2>
Your Homework</h2>
<br />
You have to go back to <b>1945</b>, a the time when Vannevar Bush outlined how a conceptual HyperText machine called <a href="https://www.youtube.com/watch?v=c539cK58ees">Memex</a> would work, and how trails would be created through linked documents. Fascinating!<br />
<br />
You have to go to <b>1960</b> and learn about Ted Nelson and what the word "<a href="http://en.wikipedia.org/wiki/Intertwingularity">Intertwingularity</a>" means.<br />
<br />
Then it's back to <b>1968</b>, and to Doug Engelbart's <a href="https://www.youtube.com/watch?v=yJDv-zdhzMY">Mother Of All Demos</a>, in which he shows off the inventions of a Graphical User Interface ( GUI ) and a mouse and networking and collaboration. Watch this video ( it's a bit slow but edifying ). It astonishes me how many ideas we still haven't grasped yet in what he was working on.<br />
<br />
It's now the <b>1970</b>'s when <a href="https://drive.google.com/file/d/0Bznu7JgRtB5CbmRhSExJelRQbDA/view?usp=sharing">Randy Smith demo'ed the Alternate Reality Kit</a>, and you start to see the importance of the direct manipulation of objects on screen.<br />
<br />
It was the work going on at Xerox Parc ( Doug and Randy's amongst others ) that Steve Jobs saw, got inspired and went off to make the Macintosh.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/EMFscTOazS0/0.jpg" src="http://www.youtube.com/embed/EMFscTOazS0?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br />
<br />
<br />
And then here in <b>1984</b>, here is HyperCard's maker,<a href="https://www.youtube.com/watch?v=EMFscTOazS0"> Bill Atkinson, demoing HyperCard</a>. What I find fascinating about this video is how awkward the terminology they use for what's on screen. It is so new, they don't really know how to even talk about it.<br />
<br />
With HyperCard you created <i>stacks</i> of cards, and on those cards you put buttons and text fields and graphics... and in those objects you put simple code that did wonderful <b>interactive</b> things.<br />
<br />
People used HyperCard to make all sorts of stacks. From tools, to stories, to adventure games to learning materials to anything.<br />
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<span id="docs-internal-guid-f278848b-56b2-fa6c-7139-1541f6071468"><img height="141" src="https://lh4.googleusercontent.com/a8Jxu9lu39ReV7MXk3kXeXPeuEUg4I4SmEvGUNeN97eDQgntDH11pEbKDvV1uBTTOUMHmmrQ9m20XuoGcXMymGvCqBVpx7HaJun6FV92i2DQyJxPMPotowrr4o9_lxTBfJXwqj_Acg" width="200" /><img height="129" src="https://lh6.googleusercontent.com/WODy8_8NjjnbC9xdG91JR7noECqDdo02qJhVglW0FAXiuOImQDyZmBRpqDD_PdtC__z56xjgOKATLwceyEzM1Aqvu2v7Gw-n0950qEVYbMh6yg0VTtpz00OoiWnH7UkLAaOcd-3dUA" width="200" /><img height="141" src="https://lh3.googleusercontent.com/4n2AKvDGTok9N2LoyP3NIvhOjHH5D2tf5SFNd8v6bGbFpnH3INibyzL3aEv5ogsVHE4SlB96_6MUur_dTrr6Ai8isEp2zRnMGRqoHBD76WGokDAZ_Go3__GYNzV2c9zkJu-nfWcOYg" width="200" /></span></div>
<div style="text-align: center;">
<span id="docs-internal-guid-f278848b-56b3-9e54-f1a3-6d3bcf53d438"><img height="113" src="https://lh3.googleusercontent.com/3xpTSs_wM35nexDqGS8NeY3NlrgIR4NeQSt9MdJ_KSbexsnnQIiFP0MvtgnL9vxsE5SxzbrjNaEnvE1H_4B7oO15SCCUV1BN2ir8UtOEE9zCOYFxMgAjMClNBLeJ2KeAgDjgkpuAqQ" width="200" /><img height="133" src="https://lh6.googleusercontent.com/7L1IkZMyZHG5RmB8_nNX6IT2I08Fdzbck8_-MV0_hs3SycaVYJIHsxCkcnQgDkQ_Qkk-11NVULgeyN-lwzWn4J_fof0iCEo5_PGnotFkLJbUbGNLCU68yxPC1_8hg71drz3f-HCLsQ" width="200" /><img height="144" src="https://lh4.googleusercontent.com/oMiK8d6SrQgak9lQTheg6fb1nXGCeemWyh3iwlHyEMwODTRMHG0-ZXSocgLRoOzFq39WHtt9iAbG7dG_07rGAuuhSjXSPakv787Eo8p7T4XOlPXnZym3_HMZJvhhNVAUFM67x5fRZA" width="200" /></span></div>
<div style="text-align: center;">
<br /></div>
<h2 style="text-align: left;">
<br />The Demise of HyperCard</h2>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
And then it was no more, for all sorts of reasons. Steve Jobs closed down HyperCard ( I imagine mainly because people made some really ugly stacks ) and the web has just happened. The whole concept of authoring seemed to fade away. The hypertext of the web was very different from HyperCards stacks. </div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
The notion of authoring limped on awhile. There was a commercial (and colour) version of HyperCard called SuperCard. Oracle created a tool called Oracle Media Objects. Macromind made Director and then Flash. But none of these grabbed the collective imagination like HyperCard did.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
A few years ago I heard of a HyperCard-like tool called Revolution from a company called RunRev. I tried it, liked it, but couldn't quite see the relevance of writing stacks anymore. And I think Revolution evolved into LiveCode ( correct me if I'm wrong ).</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<h2 style="text-align: left;">
LiveCode</h2>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
But now, with LiveCode, everything has changed. There's a Community version ( free ) and your LiveCode stacks can be saved as iOS or Android apps with HTML5 under-development. Your stacks can talk to your servers. Your stacks can embed browsers. Authoring is relevant again.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
I ran LiveCode up and within minutes, had created a simple interactive map of the Museum Gardens in York, that presumably I can compile and run on an iPad tablet. It felt like the "old days", creating cards, adding buttons and adding code like this...</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;">on mouseup</span></div>
<div style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;"> go to card "Prairie"</span></div>
<div style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;">end mouseup</span></div>
<div style="text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
...how easy is that? </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbXyh5SJKB1A1r34vbm0QSKyxt5Zn-95cuhFyVhyZVgfAj1qP90Urw22Nau1hzHNd0jJKK3bj1xkSK8JaFiEbO905pHCmBJ7Z8k8P1CYYn_-HXcheVtTYCp74zdtJE_YwLf8pYGESu1bY/s1600/Map.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbXyh5SJKB1A1r34vbm0QSKyxt5Zn-95cuhFyVhyZVgfAj1qP90Urw22Nau1hzHNd0jJKK3bj1xkSK8JaFiEbO905pHCmBJ7Z8k8P1CYYn_-HXcheVtTYCp74zdtJE_YwLf8pYGESu1bY/s1600/Map.png" height="150" width="200" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRXvwwfqMDm0Uqzhxjr84X0XUqOLTum_u2zGpbAkfxGBf9Xm6SkHvBGR3odYI60M1wkHFRl7fSC7kHHrCFbTr21PiBxUBPyqpAA28Nnxg3nhWL6jQC2oC8FIo_CNTMKZcRHbtaBKm0vYs/s1600/Prairie+Garden.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRXvwwfqMDm0Uqzhxjr84X0XUqOLTum_u2zGpbAkfxGBf9Xm6SkHvBGR3odYI60M1wkHFRl7fSC7kHHrCFbTr21PiBxUBPyqpAA28Nnxg3nhWL6jQC2oC8FIo_CNTMKZcRHbtaBKm0vYs/s1600/Prairie+Garden.png" height="140" width="200" /></a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<h2 style="text-align: left;">
The Project</h2>
<div style="text-align: left;">
The project we are hoping to use LiveCode for, involves Archaeology students exploring Paris, and creating interpretations of what they find ( textual, audio and images ) and then designing an app to share that work. The department has a number of iPads which will enable them to use their stacks in the location. It's likely that the stacks will be authored on a variety of devices ( Mac, Windows, Android ).</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Ideally, I would have liked a tool that saved an app as HTML5 ( this feature is in production at LiveCode ). That way, there would be no need to work with Apple's App Store ( and its Ad Hoc licensing ) and the students' work would also work on the web and on an Android tablet ( should they have one ). </div>
<div style="text-align: left;">
<br /></div>
<h2 style="text-align: left;">
The Alternatives</h2>
<div>
Whilst looking for HTML5 tools, it's worth mentioning a few that may be of use later.</div>
<div>
<br /></div>
<div>
<a href="http://maqetta.org/">Maqetta</a> is a browser-based open source project to create HTML5 content. It looked promising but the interface beat me. I was unable to use states to change the scene.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4vdjhKakY4lZC6UcG0LtcOULsmGzx9wjRtQpEcBVw4aJwszXjldoES8ZQnTqZuBMKH6rPUukCeolcZrxPCKrh_Lg5WpxFFGMVk-vL-Nsl1KEnTyvLHsl5uMeqCB3yutZ_9qFO7_tDzH4/s1600/Maquetta.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4vdjhKakY4lZC6UcG0LtcOULsmGzx9wjRtQpEcBVw4aJwszXjldoES8ZQnTqZuBMKH6rPUukCeolcZrxPCKrh_Lg5WpxFFGMVk-vL-Nsl1KEnTyvLHsl5uMeqCB3yutZ_9qFO7_tDzH4/s1600/Maquetta.png" height="217" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://animatron.com/">Animatron</a> uses a timeline metaphor, an again, looked promising but probably is more aimed at animation than simple stack creation. A great tool but not quite the right tool in this case.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcugg5-6mSTOyc0uwV9cMPPumCS467ouTTVIcfN0rvBoqogjg-F1WobMPEQiZAk9GtLm1417APLy2dLa5nB6vmuGrIuNhZst8GDkHZQbb9ltfrECMg35Z_BQJ_SsdJo9Ql5wC9zfKO5uQ/s1600/Animatron.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcugg5-6mSTOyc0uwV9cMPPumCS467ouTTVIcfN0rvBoqogjg-F1WobMPEQiZAk9GtLm1417APLy2dLa5nB6vmuGrIuNhZst8GDkHZQbb9ltfrECMg35Z_BQJ_SsdJo9Ql5wC9zfKO5uQ/s1600/Animatron.png" height="248" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://www.silex.me/">Silex</a> has a beautifully simple approach to creating HTML5 content ( to which you can add HTML that does the bits that it maybe doesn't do, for example, play audio or video ). I actually wanted a little more control than this tool gave me, but I did manage to make an interactive HTML5 piece with it in a very short time.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi2o2GQgFklE1cxcUbjmNsXPSpzR-MRYVgVWSk8Iws7g3XTs5pPESKmSJFNgIe7BIEY6glW5FEkYITucH-17BihI_hZLpwBAQr7MHaJ-MvBCBvXSOdFfeKxOgsali68rdHXZ1Kj3tGGQU/s1600/Silex.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi2o2GQgFklE1cxcUbjmNsXPSpzR-MRYVgVWSk8Iws7g3XTs5pPESKmSJFNgIe7BIEY6glW5FEkYITucH-17BihI_hZLpwBAQr7MHaJ-MvBCBvXSOdFfeKxOgsali68rdHXZ1Kj3tGGQU/s1600/Silex.png" height="250" width="400" /></a></div>
<div>
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Apple's <a href="https://www.apple.com/uk/ibooks-author/">iBooks Author</a> is worth a mention, in that you can create rich media documents with images and videos that can then be viewed on an iPad ( via the iBooks store ). It doesn't really suit creating interactive media though, being more based on creating a page by page stream of information. I must say I was put off by the whole "you can't publish anywhere else" licensing issue Apple have decided to give to iBooks Author content. Especially when compared to LiveCode's obvious "community" goodwill feelgood factor. </div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
I also considered <a href="http://tumult.com/hype/">Hype</a>, the excellent HTML5 animation creator, but again, this tool's metaphor ( creating animations on a timeline ) could be pressed into creating hypermedia, but would be a bit of a stretch.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Both of these would have required Macs to author, which wouldn't have been ideal.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<h2 style="text-align: left;">
Conclusions</h2>
<div>
It's great fun to be playing with a distant relative of HyperCard again, it is so easy to create things and I look forward to working out how to compile and run stacks on iOS ( which means we'll have to get an Apple Developer account at $99 ... sigh... still ).</div>
<div>
<br /></div>
<div>
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
Tom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.com0tag:blogger.com,1999:blog-6274613198416400788.post-15650173362760501932015-03-27T11:07:00.002+00:002015-03-27T11:07:39.809+00:00I Want To Improve My Spreadsheet<span><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span>
<span><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">I often get people coming to visit me who have a spreadsheet they want to get more from. They either want to automate certain tasks, or create new sheets with aggregated data or share data with colleagues in new ways. The hope is that with a little bit of code, new vistas will open up.</span></span><br />
<span><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span>
<span><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Often the data is in a spreadsheet, it isn't <i>clean</i> enough to do anything useful with. If code is to stand a chance at making a spreadsheet more useful, then the data itself needs to be "code ready".</span></span><br />
<span><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span>
Below is an actual spreadsheet brought to me, with number of areas for that needed data cleaning.<br />
<span><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span>
<span id="docs-internal-guid-67ebaff1-5676-019a-0c86-dee993818f80"><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><img height="398" src="https://lh5.googleusercontent.com/txXyJv8PKOGKjoxsA__-PO5AdauFOl86ixitm76qoehUNPdrbl7ECynI7s2wfZgI1k-rQYN3HVIb_33WGWLXPCFPa3zmEzYjXgk1VxiCHy-DKmyQwHPJj67ufOcCWP71xZ7KVlA" style="-webkit-transform: rotate(0rad); border: none; transform: rotate(0rad);" width="640" /></span></span><br />
<span><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span>
<span><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span>
<span><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">As we worked together, we realised, a healthy spreadsheet isn't just about making sure your data is logical, there are also other factors that contribute to how easy your data will be to work with.</span></span><br />
<span><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span>
<ul>
<li><span style="font-family: Arial;"><span style="font-size: 15px; white-space: pre-wrap;"><b>Use formulas well</b> - A few easy to learn formulas can significantly ramp up what you can do quickly with data. It is worth investing even just a few minutes learning new formulas and what they can do for you.</span></span></li>
<li><span style="font-family: Arial;"><span style="font-size: 15px; white-space: pre-wrap;"><b>Prevent errors</b> - Make sure you validate data where you can, and help people not to make your data grubby.</span></span></li>
<li><span style="font-family: Arial;"><span style="font-size: 15px; white-space: pre-wrap;"><b>Improve the interface</b> - With Google Spreadsheets you can add menus, actions and buttons and even sidebars that can turn a spreadsheet chore into a breeze.</span></span></li>
<li><span style="font-family: Arial;"><span style="font-size: 15px; white-space: pre-wrap;"><b>Use the charts and visualisations</b> - Getting more out of your data can be as easy as creating a well designed dashboard using Google Spreadsheet's inbuilt charts.</span></span></li>
</ul>
<span><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span>
<span><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Here is my list of <a href="https://docs.google.com/document/d/1ChHdGUCjVDGn3OwN2rDxRpQE9wvj0zSWWG1SERCNc3o/edit?usp=sharing" target="_blank">suggestions for how to make this spreadsheet's data "code ready" in a Google Doc</a>.</span></span><br />
<span><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span>
<span><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">There are heaps of short videos on <a href="https://www.youtube.com/channel/UC6IF-uI3qhqpdT2bZqIHmtg" target="_blank">Google Gooru's YouTube page</a>. In minutes you can be learning new features and taming those scary spreadsheets.</span></span><br />
<span><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span>
<span><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span>
<span><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span>Tom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.com0tag:blogger.com,1999:blog-6274613198416400788.post-78591006056914188622015-03-27T10:55:00.000+00:002015-03-27T10:58:08.940+00:00Stunning Student Work in the 3Sixty at York<a href="https://saraperry.wordpress.com/">Sara Perry</a> taught the Archaeology module to design an exhibition for the 3Sixty space at York. This year the students really went beyond all expectations and produced some stunning and innovative work that made full use of the space's abilities.<br />
<br />
One piece, about Clifford's Tower, made use of numerous live action actors to deliver snippets of spoken word from the time. The presentation had moments where spotlights illuminated the actors in the room ( see below ).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaeV0QKUuOMkgGVargLdraOw9V8DpKZq9FMQRoBghmulaou32OKgivhYnVfBQ5l7wdJsIDkYgZGi2SDEaHSShZGIpw8HpvgHgUz46yOmauyvFx0JXOrD6rlVuZ3jB6UuSP1qE0Dh5U95g/s1600/IMG_8300.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaeV0QKUuOMkgGVargLdraOw9V8DpKZq9FMQRoBghmulaou32OKgivhYnVfBQ5l7wdJsIDkYgZGi2SDEaHSShZGIpw8HpvgHgUz46yOmauyvFx0JXOrD6rlVuZ3jB6UuSP1qE0Dh5U95g/s1600/IMG_8300.JPG" height="478" width="640" /></a></div>
<br />
<br />
When this piece put you in a 3D model of Clifford's Tower, slowly flying around it, it was actually breathtaking.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://326a99285674e07f373962918457b910703c82bf.googledrive.com/host/0Bznu7JgRtB5Cfm5DSEE4X1pOMmdVZHdGMzdXVndNU2Q0UTJnUnN5ZUdDMHRMY251el9mRFE/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX1pkhUVhVoD6v9h4sYgU0kFrsPT5bK7zsF6rkjbd1Q-RwfTVum08WxEu5oYpuS4q8GggqVS8BSZEHXxcJtbyJCXAImB-rp9VNNmi-slz7WeUoZq8cN49FG33-BQhaiunM1gnE4WV3io0/s1600/IMG_8303.JPG" height="478" width="640" /></a></div>
<br />
<br />
What is shown here is only a facsimile of the real experience ( of course the actors aren't acting for us in it ) but it does give you some idea of how well the piece was choreographed and how professionally the students wove their ideas into a compelling experience.<br />
<br />
I was involved in helping to take their work and make it viewable using a Javascript 3D library called <a href="http://threejs.org/">Three.js</a>.<br />
<br />
<br />
<span style="font-size: large;">You will need Chrome/Firefox to view the piece: <a href="https://326a99285674e07f373962918457b910703c82bf.googledrive.com/host/0Bznu7JgRtB5Cfm5DSEE4X1pOMmdVZHdGMzdXVndNU2Q0UTJnUnN5ZUdDMHRMY251el9mRFE/" target="_blank">here</a>. </span><br />
<br />
Remember, this is without the real actors. The experience is about 6 minutes long and was designed to integrate with offline museum activities and exhibition spaces.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />Tom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.com0tag:blogger.com,1999:blog-6274613198416400788.post-56849023846147303682015-03-27T10:54:00.000+00:002015-03-27T10:58:54.665+00:00Preparing Media For The 3Sixty Space at York<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwv4spML0JYVXhVC_WgeEHgxSbyvDkNjb9mlOSTdA0TNVlSdThbWk1Sq861WnDjiLmDsfSwh56yozBDdJ-utHN5mG7GfRdvuCMvxifMg0VZi46hPFMVr2mVwFj96SvS7do75FhrvW586w/s1600/IMG_8298.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwv4spML0JYVXhVC_WgeEHgxSbyvDkNjb9mlOSTdA0TNVlSdThbWk1Sq861WnDjiLmDsfSwh56yozBDdJ-utHN5mG7GfRdvuCMvxifMg0VZi46hPFMVr2mVwFj96SvS7do75FhrvW586w/s1600/IMG_8298.JPG" height="478" width="640" /></a></div>
<br />
<br />
In a recent student project to create archaeological exhibitions in the 3Sixty space we needed to look at how to easily chop a very wide movie into four separate smaller movies.<br />
<br />
There are lots of templates to help you present in the <a href="http://www.york.ac.uk/tftv/facilities-hire/3sixty/" target="_blank">3Sixty space, including Powerpoint files</a> but we also needed a way to view the presentations NOT in the space itself which would require some form of 3D version of a 2D presentation shown in real 3D. Are you keeping up? We needed a version of the presentation that could be viewed on screen rather than in the room.<br />
<br />
I found a python library that would let you edit videos using code called <a href="http://zulko.github.io/moviepy/" target="_blank">MoviePy</a>. It's brilliant! You can do video-in-video effects, split panel videos, animations, freeze frames and all sorts.<br />
<br />
So, with the code below, we were able to take a VERY WIDE movie generated by the Powerpoint template being exported as a movie... and make four separate movie files, one for each wall.<br />
<br />
<br />
<br />
<pre>from moviepy.editor import *
from moviepy.video.fx.all import *
movie_file = "/Library/WebServer/Documents/Three.js/ExportedFromPowerpoint.mp4"
</pre>
<pre>w = 1440 #3840 #width of full movie
h = 244 #600 #height of full movie
s = w / 4 #individual screen size i.e 960
print "Chopping..." #.subclip((0,0.0), (1,10.0))
clip1 = (VideoFileClip(movie_file))
wall1 = crop(clip1, x1=0, y1=0, x2=s, y2=h) #Wall 1
#wall1 = wall1.without_audio()
wall1.write_videofile("wall1.mp4", codec='libx264')
print "Chopped: wall1.mp4", wall1.duration, "seconds long."
clip2 = (VideoFileClip(movie_file))
wall2 = crop(clip2, x1=s, y1=0, x2=s*2, y2=h) # Wall 2
wall2 = wall2.without_audio()
wall2.write_videofile("wall2.mp4", codec='libx264')
print "Chopped: wall2.mp4", wall2.duration, "seconds long."
clip3 = (VideoFileClip(movie_file))
wall3 = crop(clip3, x1=s*2, y1=0, x2=s*3, y2=h) # Wall 3
wall3 = wall3.without_audio()
wall3.write_videofile("wall3.mp4", codec='libx264')
print "Chopped: wall3.mp4", wall3.duration, "seconds long."
clip4 = (VideoFileClip(movie_file))
wall4 = crop(clip4, x1=s*3, y1=0, x2=s*4, y2=h) # Wall 4
wall4 = wall4.without_audio()
wall4.write_videofile("wall4.mp4", codec='libx264')
print "Chopped: wall4.mp4", wall4.duration, "seconds long."
print "Chopped: All done!"
</pre>
<br />
It's worth noting that we only needed audio on one of the movies, otherwise four tracks of the same audio played causing a weird echo effect. Also, unless the codec was libx264, the movies didn't load into the Three.js space.<br />
<br />
After this we were then able to use the movies in a 3D simulation of the room.<br />
<br />
See how this was used <a href="http://collaborative-tools-project.blogspot.co.uk/2015/03/stunning-student-work-in-3sixty-at-york.html">here</a>.Tom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.com0tag:blogger.com,1999:blog-6274613198416400788.post-19802898519353499192015-01-20T12:59:00.000+00:002015-01-20T12:59:19.651+00:00The Solution: Rendering video onto the inside walls of a 3D roomSo after a lot of experimentation, I decided that WebGL was a good way to go ( see an <a href="http://collaborative-tools-project.blogspot.co.uk/2015/01/the-problem-rendering-video-onto-inside.html" target="_blank">earlier post </a> about automatically showing videos on a 3D models walls).<br />
<br />
I took the video example and simply hacked around, watching where objects move to when I changed values, and then added extra objects, in this case walls.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.evernote.com/shard/s4/sh/9f99b2b9-ff65-484a-9e40-57b14444ba80/6600ac1afd0a1242d65ff082a225efe8/deep/0/Video-Texture-(Three.js).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="282" src="https://www.evernote.com/shard/s4/sh/9f99b2b9-ff65-484a-9e40-57b14444ba80/6600ac1afd0a1242d65ff082a225efe8/deep/0/Video-Texture-(Three.js).png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
And it worked! Which is pretty impressive ( I think ) for someone who knows nothing about 3D programming. Here is a <a href="https://googledrive.com/host/0Bznu7JgRtB5CLVVfb2Zub05YdVE/Three.js/" target="_blank">live version showing music I loved from the 70s</a>.</div>
<br />Tom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.com1tag:blogger.com,1999:blog-6274613198416400788.post-74499890883646827302015-01-12T15:58:00.004+00:002015-01-12T15:58:52.015+00:00Tools For Prototyping A NarrativeAnother of the things I'm mulling is how to <b>research and prototype a narrative</b> of some sorts, for a student project. In the past we've used Pinterest as a gathering research tool, to collect sources of inspiration and, kind of importantly, the visual clichés to avoid. We're not sure if Pinterest is the best tool to use.<br />
<br />
Some tools you should simply take a look at for the sake of it are:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip11-v71SfmKMjxv8dyjmW1EVpFG_cvmNX3d0oKrRntU4uaR_jBF_KZaANQ0odqqJhyphenhypheniHSvSwWEvn5DX5-ui8WiU8rnHhVUy_DF3fyoA_hLUpUCf9Oz1-ZQZ1jIAI-ZQ0h7vLNeHi8E0U/s1600/storybuilder.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip11-v71SfmKMjxv8dyjmW1EVpFG_cvmNX3d0oKrRntU4uaR_jBF_KZaANQ0odqqJhyphenhypheniHSvSwWEvn5DX5-ui8WiU8rnHhVUy_DF3fyoA_hLUpUCf9Oz1-ZQZ1jIAI-ZQ0h7vLNeHi8E0U/s1600/storybuilder.png" height="195" width="320" /></a></div>
<br />
<br />
Amazon <a href="http://studios.amazon.com/storybuilder" target="_blank">StoryBuilder</a> to create a script or screenplay. This is like a corkboard of notes with which you develop your "story".<br />
<br />
And then there's Amazon <a href="http://studios.amazon.com/storyteller" target="_blank">StoryTeller</a> that lets you create a visual storyboard from your script. Interestingly, the tool seems to recognise "people" and places. It has a huge library of people, and scenes and props with which you can create your storyboard pages, like the one shown below where Dr Cutie gets incredibly jealous of Greg's acrobatic cows. Ahem.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.evernote.com/shard/s4/sh/dceb446b-830e-45de-9214-182348e1ac24/015993a686b122ae9c085b8ba3faec17/deep/0/Original-Soldiers---Amazon-Storyteller---Amazon-Studios.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="163" src="https://www.evernote.com/shard/s4/sh/dceb446b-830e-45de-9214-182348e1ac24/015993a686b122ae9c085b8ba3faec17/deep/0/Original-Soldiers---Amazon-Storyteller---Amazon-Studios.png" width="320" /></a></div>
<br />
The tools themselves are interesting enough, but the really interesting part about them is how, this being Amazon of course, once you have created your storyboard it you can publish it and people can vote on how much they like it, and suggest that a real video advert should be made for it.<br />
<br />
Once your video advert is made, people can watch it and vote on how much they'd like to watch the real show. And then, if you're lucky, the show gets commissioned and it's shown on Amazon Prime Videos. Amazon have thought about the process, from noting down sketchy ideas to actually making a movie or TV show. Wow...<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWdbRJffN1aAl5p99vqlICBH_EAejWlJSLKytOni4iD_F3dE3s-L1hHMACSWIrf6AFrnw4310zJ7Kb3fgLfC3GNnWe9mZ6ZWo7mlbog6iwwR7CP_yljtbES2GU5q2pNwumi7scZSEaiCc/s1600/logs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWdbRJffN1aAl5p99vqlICBH_EAejWlJSLKytOni4iD_F3dE3s-L1hHMACSWIrf6AFrnw4310zJ7Kb3fgLfC3GNnWe9mZ6ZWo7mlbog6iwwR7CP_yljtbES2GU5q2pNwumi7scZSEaiCc/s1600/logs.png" height="148" width="320" /></a></div>
<br />
<br />
<br />
Google Gallery. Look at this <a href="https://vladimir-marin.culturalspot.org/exhibit/%D0%B4%D0%B5%D1%80%D0%B5%D0%B2%D0%BE/1AIyrT_4LLVbKA" target="_blank"><i>gallery</i> of art installations</a> or the way <a href="https://livingletters.culturalspot.org/exhibit/love-letters/0AKyiyF6P1gpJw?position=6%3A0%3A1" target="_blank">this gallery zooms in to images and text and has audio attachments.</a><br />
<br />
<br />
<br />Tom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.com0tag:blogger.com,1999:blog-6274613198416400788.post-15136294386340457522015-01-12T15:18:00.000+00:002015-01-12T15:18:08.881+00:00The Problem: Rendering video onto the inside walls of a 3D room<h4>
A<i> thinking out loud </i>post<i>...</i></h4>
<h2>
The Scenario</h2>
At the university we have an amazing room called the <a href="https://www.york.ac.uk/tftv/facilities-hire/3sixty/" target="_blank">3Sixty</a>. It's a room that can have media projected onto all four walls (and there's some amazing speakers in there too ). Sara Perry runs a module in there for archaeology students to design a museum exhibition. Last year the students created World War I exhibitions using Powerpoint and YouTube videos. They were very moving. I almost cried at one about a loyal Alsatian.<br />
<br />
<h2>
The Problem</h2>
<b>The problem is this... </b>The students use a very wide ( four walls ) Powerpoint template to create their 3Sixty presentation, but once made, the only place you can really experience this presentation is in the room itself. It would be good if these .ppt files ( or exported movies ) could be projected onto a 3D version of the room. It's a very simple render, I think, but would allow people to see the presentations without being in the room.<br />
<br />
Having no experience of 3D modelling, I dived in and had a go with a few tools.<br />
<br />
<h3>
Google Sketchup</h3>
<div>
This seems very easy to use. I went for the primary school version, <a href="http://www.sketchup.com/products/sketchup-make" target="_blank">Sketchup Make</a>, hoping the simplicity would be useful.</div>
<div>
<br /></div>
<div>
I found I could easily add images to planes and that there's an extension called <b>Video Texture Plugin</b> which seems to be able to render video onto a surface but it's Windows only.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.evernote.com/shard/s4/sh/1e261133-75a9-46f8-a621-f758a924c540/815a318cfe1a5797a52707feb15c7a26/deep/0/Entity-Info-and-360-Test.skp---SketchUp-Make.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="364" src="https://www.evernote.com/shard/s4/sh/1e261133-75a9-46f8-a621-f758a924c540/815a318cfe1a5797a52707feb15c7a26/deep/0/Entity-Info-and-360-Test.skp---SketchUp-Make.png" width="640" /></a></div>
<br />
Using Sketchup I exported the model as a <a href="https://googledrive.com/host/0Bznu7JgRtB5CLVVfb2Zub05YdVE/360%20Test.wrl" target="_blank">VRML file</a> and then was able to view the model using an app called <a href="http://freewrl.sourceforge.net/" target="_blank">FreeWRL</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.evernote.com/shard/s4/sh/181c5f8b-1feb-4386-81ee-7dbbda07c34c/e7d16de7880809d69748519c7617c5d6/deep/0/FreeWRL-and-Blogger--Collaborative-Tools-Project---Create-post.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="228" src="https://www.evernote.com/shard/s4/sh/181c5f8b-1feb-4386-81ee-7dbbda07c34c/e7d16de7880809d69748519c7617c5d6/deep/0/FreeWRL-and-Blogger--Collaborative-Tools-Project---Create-post.png" width="320" /></a></div>
<br />
<br />
<h3>
Blender</h3>
<br />
I then had a play with <a href="http://www.blender.org/support/tutorials/" target="_blank">Blender</a>. Regular plain ole 3D modelling may be the way to go. I discovered you can add a <a href="https://www.youtube.com/watch?v=1qmkTIsaSvE" target="_blank">video as a surface texture</a> to a plane. The picture below doesn't look very impressive, but it IS a video on a wall ( try to ignore the box .. ahem). Yes, I'd need to learn how to use the software :-)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.evernote.com/shard/s4/sh/7ac8faf8-e638-418d-a5a0-10691463d284/a584183379e8024ef2d6ee9df2edb865/deep/0/360.blend.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="245" src="https://www.evernote.com/shard/s4/sh/7ac8faf8-e638-418d-a5a0-10691463d284/a584183379e8024ef2d6ee9df2edb865/deep/0/360.blend.png" width="640" /></a></div>
<br />
<br />
<h3>
Clara.io</h3>
I tried an online 3D editor called <a href="http://clara.io/">Clara.io</a> (shown below) which I failed to master in the five minutes I tried it :-) It does look incredible, although I'm not sure if I can stick a video onto a plane. This tool did have a large library of objects like chairs, cars and objectified 3D women in bikinis and thigh boots.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.evernote.com/shard/s4/sh/93777ca9-52f1-4c9f-852f-94cbf01bbefd/76d827c5fe9f36809876efb8474c1224/deep/0/Editing-%22360-Scene%22---Clara.io.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="316" src="https://www.evernote.com/shard/s4/sh/93777ca9-52f1-4c9f-852f-94cbf01bbefd/76d827c5fe9f36809876efb8474c1224/deep/0/Editing-%22360-Scene%22---Clara.io.png" width="640" /></a></div>
<br />
<br />
<h2>
Conclusions</h2>
<div>
<i>Traditional</i> 3D modelling may be the route to follow, I don't know. I bumped into someone while tinkering on this who mentioned the <a href="https://www.unrealengine.com/what-is-unreal-engine-4" target="_blank">Unreal Engine</a>, but, like 3D modelling, it doesn't half seem a massive mallet for a very tiny nut. </div>
<div>
<br /></div>
<div>
We almost need a Doom-like clone but with only one room...only simpler... (something like <a href="http://swskeithclark.co.uk/labs/css-fps/old/" target="_blank">this maybe</a>...)</div>
<div>
<br /></div>
<div>
I was hoping for something that we could automate the conversion from Powerpoint ( or video ) into an online viewable something.... something like WebGL maybe. Like <a href="http://learningwebgl.com/lessons/lesson16/index.html" target="_blank">this</a>... or this below...except instead of web pages, we might have a page with just a video in. In order to do this we'd just need to "chop" each wall of our very wide Powerpoint movie into each individual wall.</div>
<div>
<br /></div>
<div>
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/ScZcUEDGjJI" width="560"></iframe>
</div>
</div>
<div>
<br />
This <a href="http://www.html5canvastutorials.com/three/html5-canvas-webgl-plane-with-three-js/" target="_blank">Three.js WebGL HTML5 tutorial</a> might be a good place to start.<br />
<br />
Blimey, if this is possible, it must be doable. Here a <a href="http://beginfill.com/WebGL_Video3D/" target="_blank">video becomes a model</a>... Wow! Like <a href="http://labs.gooengine.com/videosphere/" target="_blank">this</a> only a million times simpler!</div>
<div>
<br /></div>
<br />
<br />Tom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.com0tag:blogger.com,1999:blog-6274613198416400788.post-15942860601488887022014-11-04T14:49:00.000+00:002014-11-04T14:49:09.666+00:00Module Chooser Using Javascript AND Apps ScriptI had hoped that there might be a <a href="https://docs.google.com/forms/create?addon_store" target="_blank">new Google Forms Add-on</a> to do this, but no. I guess I'll have to have a go at <a href="https://developers.google.com/apps-script/quickstart/forms-add-on" target="_blank">doing it myself later</a>.<br />
<br />
Imagine you want your students to make a choice of four modules from a list of modules you're offering. To make the form easier to "not get wrong" it'd be good if when you chose module one, it disappeared from the following form items...<br />
<br />
...<a href="https://e692f46f3e75c694da7d20a9f750e1c6f66afa5a.googledrive.com/host/0Bznu7JgRtB5CODV0d1dMbUVHc28/" target="_blank"> like this</a>.<br />
<br />
The above is a hosted HTML on Google Drive ( because the Caja sanitation, or Chrome killed my Javascript ).<br />
<br />
When a student chooses their preferred modules, the form is submitted to a regular doPost() method in a Google Spreadsheet's Apps Script like this...<br />
<br />
<br />
<pre>function doPost(e) {
Logger.log("Hi there")
try{
//Get values from form
var email = Session.getActiveUser().getEmail()
var module_one = e.parameter.module_one
var module_two= e.parameter.module_two
var module_three = e.parameter.module_three
var module_four = e.parameter.module_four
add_students_selection(email,module_one,module_two,module_three,module_four )
var template = HtmlService.createTemplateFromFile('thank_you.html')
template.this_url = ScriptApp.getService().getUrl( )
return template.evaluate().setTitle("Thank You").setSandboxMode(HtmlService.SandboxMode.EMULATED)
}catch(e){
Logger.log(e)
var template = HtmlService.createTemplateFromFile('error.html');
template.this_url = ScriptApp.getService().getUrl( );
template.error_title = e
template.error_detail = e.stack
return template.evaluate().setTitle("Error").setSandboxMode(HtmlService.SandboxMode.EMULATED)
}
}
</pre>
Tom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.com1tag:blogger.com,1999:blog-6274613198416400788.post-64698568874831070462014-10-29T16:12:00.001+00:002014-10-29T16:12:48.705+00:00One-To-Many Relationship in a Google SpreadsheetIt's often the case that you want and need to be creating a database to store your data, but Google Spreadsheets are just so handy aren't they? But Google Spreadsheets are very good at relational data.<br />
<br />
Here's an example where, you want to have one column for the name of your recipe and another for the ingredients ( comma separated ).<br />
<br />
How you use this script is you click on the cell you want to be relational and choose the Admin > Show Relationship Editor. This opens up a dialog window showing you all the options included so far. You then alter the ingredients and it saves a comma separated list into the spreadsheet.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWS818-9f2MG2qImc4jl4F3EQr-HsUesf4GDs9IZycEjrpTkjxCPAq_DdwjnjvHnIWNmyQ7fL8efTwB6J2friZtGaLKgzDOeFQJNUujAC-_OU4IhLqfNQJnq4_J6-WR8FQf3GXqr28ddA/s1600/Screen+Shot+2014-10-29+at+16.06.18+(2).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWS818-9f2MG2qImc4jl4F3EQr-HsUesf4GDs9IZycEjrpTkjxCPAq_DdwjnjvHnIWNmyQ7fL8efTwB6J2friZtGaLKgzDOeFQJNUujAC-_OU4IhLqfNQJnq4_J6-WR8FQf3GXqr28ddA/s1600/Screen+Shot+2014-10-29+at+16.06.18+(2).png" height="457" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
Here's the <a href="https://docs.google.com/a/york.ac.uk/spreadsheets/d/19823yISxyMASGDujJMVjuB-0tlWz8CZF47WJBUHRavE/edit#gid=0" target="_blank">spreadsheet</a>. Use <b>File > Make a copy</b> to see it work and rummage around in the code.<br />
<br />
If anyone can help make the UI prettier I'd be grateful, thanks.<br />
<br />Tom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.com8tag:blogger.com,1999:blog-6274613198416400788.post-41287324024953981702014-10-29T12:26:00.001+00:002014-10-29T12:26:44.016+00:00Fame!I love it when a plan comes together. Or when someone I've been working with really starts getting to grips with Google Apps. <a href="http://informationdirectorate.blogspot.co.uk/2014/10/fun-with-google-apps-scripts-yes-you.html">Tom Grady shares what he's been doing with Apps Script</a>.<br />
<br />
I think he might have the bug.Tom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.com0tag:blogger.com,1999:blog-6274613198416400788.post-44899943338279547012014-10-29T12:15:00.001+00:002014-10-29T12:15:49.769+00:00The Problem With GoogleI'm too old to be fan of technology, but I quite like lots of it, and you can't argue that Google have definitely taken the lead on collaboration. At the core of all its products is the idea that what you are working on, you will want to involve other people, as collaborators, as commenters, as mentors or viewers.<br />
<div>
<br /></div>
<div>
But Google's model of collaboration is all wrong. Or rather, we've adopted Google tools at the university and although they provide the best tools for collaboration, their model of collaboration is hurting us. </div>
<div>
<br /></div>
<div>
Google's model of collaboration best matches a small business and individual. This is reflected in how Google Drive works. </div>
<div>
<br /></div>
<div>
For example, in Google Drive, if you create a file, only you can delete it. That's great isn't it? Except because a file is yours, when you leave the university, unless your admins move ALL your files to someone else, they're gone. </div>
<div>
<br /></div>
<div>
Before leaving the university, you could individually make someone else the owner of one of your files, like this...</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvkTXFseamOd2fOqkWUE5VdVICmL71TLUjX3tRlVumxMwUHAjWOnG2LGRZLh7m84bvuzGypWHkBDvT8pYJc6NHCbxNzb57M0G7uYDu17Onitar-_wM8zFByOmRtI88dFQVrlrxt00J-UE/s1600/Drive+Owner.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvkTXFseamOd2fOqkWUE5VdVICmL71TLUjX3tRlVumxMwUHAjWOnG2LGRZLh7m84bvuzGypWHkBDvT8pYJc6NHCbxNzb57M0G7uYDu17Onitar-_wM8zFByOmRtI88dFQVrlrxt00J-UE/s1600/Drive+Owner.png" height="302" width="320" /></a></div>
<div>
<br /></div>
<div>
But that is, to put it mildly a bit of faff... and if you put your files in a folder and make someone else the owner of the folder, the files still disappear when you leave ( the files don't inherit ownership from the folder ).</div>
<div>
<br /></div>
<div>
And then, you might get fancy and think you could create a solution with Apps Script. So I tried that. My idea was to create a "dropbox" and a script to watch that dropbox and when a file is added to it, make a copy ( which I, or a departmental account would then own ). It worked fine. Except of course, the script can't delete the original file - because I don't own it. So, I was left with two copies of the file, one I ( or a departmental account ) owned, and the original. Sigh! ( The code below doesn't work by the way ) .<br />
<br />
<br /></div>
<div>
<div>
<br /></div>
</div>
<div>
<br /></div>
<pre>function check_dropbox() {
var dropbox_folder = DriveApp.getFolderById("FOLDER_ID")
var main_folder = DriveApp.getFolderById("OTHER_FOLDER_ID")
var files = dropbox_folder.getFiles()
while (files.hasNext()) {
var file = files.next()
var name = file.getName()
var new_file = file.makeCopy(name, main_folder)
Logger.log("Made a copy of: " + name)
Utilities.sleep(2000)
file.setTrashed(true)
}
}
</pre>
<div>
Maybe you could write a script to simply move your files to someone else. Except you'd have to get pretty fancy and page through your files if your script would need more than 9 seconds running time. Whilst this might seem like a good idea, you can't transfer ownership of a document to someone at another organisation.<br />
<br />
<br />
<h2>
What The Problem Is</h2>
<br />
The problem is that Google files are so tied to an individual. As an organisation, you need to be able to have documents that aren't tied to individual, but are tied to a role or a department.<br />
<br />
And it gets worse as soon as say three universities want to collaborate on a project together. And remember, collaboration is what Google are supposed to be excellent at. Imagine these three universities want to collaborate by sharing documents. You'd imagine that in the course of a project people might come and go, and ideally, you don't want files disappearing when people move on.<br />
<br />
More subtly, you don't actually want any one university to own the files ( even if this was possible, which it isn't ). What is required is a form of shared ownership.<br />
<br />
<h2>
So Come On Google</h2>
<div>
Collaboration is your thing. I know these are easy problems to solve, but you can't argue that at times, we might not want to an individual, we might want our work to have longevity beyond our involvement and we might want to work fluidly with other organisations. </div>
<div>
<br /></div>
<div>
At the moment I have someone asking, "We want to set up a five year project and share documents with three organisations. How do we do it with Google Drive?" ... and unless your view of collaboration is one where the documents are fleeting ephemeral things, rather than lasting records, there isn't really a Google-shaped solution that makes a lot of sense.</div>
<div>
<br /></div>
<br />
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
Tom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.com0tag:blogger.com,1999:blog-6274613198416400788.post-22983658293727455012014-10-29T11:27:00.001+00:002014-10-29T11:27:27.266+00:00Creating a Documentation Process With Google Forms, Documents and Spreadsheets.We wanted to improve the way people at the University request new software and tools. This is a process that requires lots of people's feedback and needs to be very flexible. We need to get software experts to look at it, security teams, the support teams, teaching experts to see if is a good pedagogical match. We need the licensing to looked at and the usability and accessibility. The list is astonishingly long and in these cases it often gets so that your process map just starts to look like infinite spaghetti. No wonder it didn't quite work, infinite spaghetti is always troublesome.<br />
<br />
Much of my work involves trying to find a workable solution to a fiendish problem.. it's simplicity hunting. And when working with people around the university it's clear that they really don't want a tool that solves their immediate problem, they want abilities that solve problems like these. This is a very different thing. And besides I personally couldn't create<br />
<br />
So, out of necessity I created (an as yet, unfinished ) Apps Script code library, to try and make doing jobs like the one above simpler. The point of this library is not to do anything fancy or specific but just to do those things that frankly Google should have rolled in as features anyway so that new coders could easily just wire their app together with a whole heap less complication.<br />
<br />
The code library is called <a href="https://script.google.com/a/york.ac.uk/d/1ykOx87hMWudgdOl3i9XND-zeV8WEieBjVwxcPYG_2iDvX5kd70KpbfIl/edit?usp=drive_web" target="_blank">Handy Lumps</a> because that's just what it is. Handy Lumps of code that you can re-use again and again. I won't tell you how to install Handy Lumps library into your code, but you can find that out easily enough. The project id is...<br />
<br />
<b>1ykOx87hMWudgdOl3i9XND-zeV8WEieBjVwxcPYG_2iDvX5kd70KpbfIl</b><br />
<br />
<h2>
So What Does This Example Do, Tom?</h2>
In this example, someone fills in a Google Form to request some new software. What it then does is take that information and render it into a Google Document template file, and put it into a folder. Lastly, it saves the URL to the new file in the spreadsheet. It's amazing how many use cases look a bit like this.<br />
<br />
It's also amazing how many processes start by looking like something mappable, something with a clear structure but actually are closer to an iterative collaboration. For example, the template that gets created has further questions in, which can of course be added to and bent into the shape that is required. And of course using Google Document +commenting feature you can easily bring someone new into the discussion for their advice and help.<br />
<br />
<br />
<h2>
So How Does This Example Work, Tom?</h2>
<div>
Let's look at the code. First I created a Form and then went to Spreadsheet and chose the Tools > Script Editor menu and added this. I'll explain what it does below.</div>
<div>
<br /></div>
<br />
<pre>function onFormSubmit(e) {
//Get the values in a nice Array
var values = HandyLumps.row_to_dict(e.range)
</pre>
<pre> var template_id = "TEMPLATE_DOCUMENT_ID"
var folder_id = "FOLDER_ID" // Our Responses folder.
var name = values['Name'] + " - " + values['What software are you requesting?']
// Create a Google Doc
var new_file_id = HandyLumps.copy_and_render_to(template_id, name, values, folder_id)
var new_file = DriveApp.getFileById(new_file_id)
var url = new_file.getUrl()
//Update the spreadsheet with a link to the new file
var ss = SpreadsheetApp.openById("THIS_SPREADSHEET_ID")
var sheet = ss.getSheetByName("Form responses 1")//this sheet
var row = e.range.getRow()
sheet.getRange(row, 16 ).setValue(url)
MailApp.sendEmail("YOUR-GOOGLE-GROUP-HERE@york.ac.uk", "New Software Request: " + values['What software are you requesting?'], url, {noReply:true})
}
</pre>
<br />
The first thing the script does is turn the row of data into a nice array. This returns an array that looks like this {'timestamp':2014/29/10 10:55:45, 'name': Tom ...etc} It builds this array based on your header names ( and yes, it assumes they are unique for simplicity ) . Doing this avoids the issues with e.namedValues containing multiple items and gives me a simple array I can use later.<br />
<br />
Next we tell the script the ids of the template document and into which folder we want the new documents to go.<br />
<br />
We then create a new document from a template file. The template file has {timestamp} and {name} tags in which match my spreadsheet headers and get replaced with the values. To do this we use ...<br />
<br />
<pre>HandyLumps.copy_and_render_to() </pre>
<br />
This function returns the id of the new document created, so we then open it with DriveApp and get its URL. ( I did think about returning the File object, but often that's not what I needed anyway so decided on the simplest thing ).<br />
<br />
I then use regular Apps Script to save that URL into the same row.<br />
<br />
The last line mails a Google Group to let them know a new request has come in.<br />
<br />
<h2>
Ta Da!</h2>
There you have it. We've made quite a cute thing in a paragraph of non-scary code copy-and-pastee-style.<br />
<br />
I'm all for the current trend to believe that "we all can be coders now" but I also think that the tools themselves could be made a damn sight easier to use before we welcome those brave souls willing to give it try.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h2>
Next Steps</h2>
<br />
More involved versions of the above code create a Google Doc from a template that has code in it, so that new document can show a sidebar ( for example to approve it, or give it a mark out of ten ) that let's someone move the document onto the next step. The data from the sidebar is of course saved into the right row using Handy Lumps functions like this...<br />
<br />
<pre>HandyLumps.get_row_containing(ss_id,sheet_name, column_letter, match)
</pre>
<br />
In the example above, a document's script might contain...<br />
<br />
<pre>var doc = DocumentApp.getActiveDocument()
var doc_id = doc.getId()
var result = HandyLumps.get_row_containing("YOUR_SHEET_ID","SHEET_NAME", "M", doc_id)
var row = result[0]
var values =result[1]
</pre>
<pre>
</pre>
<br />
... which essentially means that a document <i>knows</i> where to store its new data. And using cute things like Google Document's Named Ranges you can make a sidebar that stores people's textual contributions back into the original spreadsheet. I'll hopefully get to sharing that stuff later.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />Tom Smithhttp://www.blogger.com/profile/01422061334608169812noreply@blogger.com1tag:blogger.com,1999:blog-6274613198416400788.post-63032881144776288082014-09-22T11:28:00.000+01:002017-12-06T11:34:59.467+00:00Inserting a Link To A Google Drive File in a Google SpreadsheetIt seems Google are changing how you use the Google Drive File Chooser which always looks a bit goofy if you are using it in a spreadsheet because of poor design.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEictEDjxmES4CMfWO4lQ3bI7W6mtPd7xufDLGEXij60lfJsIiUDsDEbG7LxErADAko2FHatrLtu9Atx_ziV-22Ep6EG-XybRqKLDvqPI3yktLBsAil5axO30gGsNlkjaGn_W_yoQswfmak/s1600/Screen+Shot+2014-09-22+at+11.23.28+(2).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEictEDjxmES4CMfWO4lQ3bI7W6mtPd7xufDLGEXij60lfJsIiUDsDEbG7LxErADAko2FHatrLtu9Atx_ziV-22Ep6EG-XybRqKLDvqPI3yktLBsAil5axO30gGsNlkjaGn_W_yoQswfmak/s1600/Screen+Shot+2014-09-22+at+11.23.28+(2).png" width="320" /></a></div>
<br />
<br />
I had a go to see if I can resize the dialog at all and I don't think so. Here's my version of their code which demonstrates how you can wire it to insert a link to a Google Drive file.<br />
<br />
There's an example file here: <a href="https://docs.google.com/a/york.ac.uk/spreadsheets/d/1jUiY-JlJJT75Y0QwsaCajaYsPbVWmnYlBQ2p9ZMKW_A/edit#gid=0">Drive Dialog example</a>. Simply go to the <i>File > Make a copy </i>menu to see the code using <i>Tools > Script Editor </i>menu.<br />
<br />
UPDATE: This version works better now <a href="https://docs.google.com/spreadsheets/d/1BV9CTI7sq3wJXolWmq2Gji5cEmq12ngg7GCugXUzSYY/edit#gid=0">https://docs.google.com/spreadsheets/d/1BV9CTI7sq3wJXolWmq2Gji5cEmq12ngg7GCugXUzSYY/edit#gid=0</a>Unknownnoreply@blogger.com0