{"id":2383,"date":"2013-05-08T16:00:00","date_gmt":"2013-05-08T15:00:00","guid":{"rendered":"http:\/\/johnjohnston.info\/blog\/?e=2383"},"modified":"2021-06-26T20:23:02","modified_gmt":"2021-06-26T19:23:02","slug":"heres-iterating-at-you-chad","status":"publish","type":"post","link":"https:\/\/johnjohnston.info\/blog\/heres-iterating-at-you-chad\/","title":{"rendered":"Here’s iterating at you, Chad"},"content":{"rendered":"\n

\"Chad<\/a><\/p>\n

Week two of the teachtheweb mooc starts with a challange: Explore the awesome makes from last week, choose one, and remix it.<\/em>. At lunch today I though I’d take a very quick stab at this using Chad’s Webmaker Profile<\/a>, as Chad is a fellow ds106er and I though he would enjoy the play.<\/p>\n

The First shot<\/h3>\n

\tGiven I was on my lunch break, I though I’d just flip the profile: Chad’s Webmaker Profile<\/a>. I went to Chad’s original profile and added edit after the url, this opened thimble for me to edit his profile. I know that you can flip, turn and rotate elements of a webpage via the css transform. A quick google and I came up with:
transform: rotateY(0.5turn);-webkit-transform:rotateY(180deg);<\/em>
This rotates content 180 degrees around the y axis. I added it to the css section in thimble, changing this:<\/p>\n

body { font-family:Open Sans, \"Helvetica Neue\", Helvetica, sans-serif;width:1000px;margin:0 auto; }<\/pre>\n
to this:<\/p>\n
body { font-family:Open Sans, \"Helvetica Neue\", Helvetica, sans-serif;width:1000px;margin:0 auto; transform: rotateY(0.5turn);-webkit-transform:rotateY(180deg);}<\/pre>\n
I think you need to use both transform: rotateY(0.5turn) and -webkit-transform:rotateY(180deg) to get cross browser support, but I might be wrong. <\/p>\n
Quite please with 3 minutes work I posted<\/a> to the G+ Community<\/a>.<\/p>\n
Looking out<\/h3>\n
Between a comment and an image I made for ds106 a while back, I started thinking about the page being a view out of the computer, so it should be looking at Chad:Chad’s Webmaker Profile<\/a>.<\/p>\n
On this edit, I’ve added Chad’s photo, hotlinked from his g+ images as a background image. All this took was adding a wee bit nmore css to the body:<\/p>\n
background-image:url('fullimageURL.jpg');\n\tbackground-repeat:no-repeat;\n\tbackground-attachment:fixed;\n\tbackground-position:center; <\/pre>\n
In the bloc above I’ve shortened the url, I used the full url to the image. The code first adds the iamge as a background to the page, ensures it does not repeat, fixes the position to the window and lastly centres it.<\/p>\n
Itterating<\/h3>\n
What is probably irritating for my fellow MOOCers is that I am posting these and as I post geting more ideas, this means a lot of space is taken up on the G+ group.<\/p>\n
As I post the last one, I irritate myself as the background picture does not fill the screen. Google again and I get this:<\/p>\n
\n\twebkit-background-size: cover;\n\t-moz-background-size: cover;\n\t-o-background-size: cover;\n\tbackground-size: cover;<\/pre>\n
All 4 lines do the same thing for different browsers.<\/p>\n
I also notice a new post with an audio mashup, this reminds me of Freesound where I find: Freesound.org – “computer-noise_desktop_quadcore_2009.wav” by matucha<\/a>, I know Freesound supply low quality mp3 and ogg files so add an audio tag to my page, just after the body tag:<\/p>\n
<audio autoplay>\n\t  <source src="http:\/\/www.freesound.org\/data\/previews\/160\/160465_739478-lq.ogg" type="audio\/ogg">\n\t  <source src="http:\/\/www.freesound.org\/data\/previews\/160\/160465_739478-lq.mp3" type="audio\/mpeg">\n\t  Your browser does not support the audio tag.\n\t<\/audio><\/pre>\n<\/p>\n
As I don’t have any controls in the tag, the player does not show, but autoplay gets it going when the page loads.<\/p>\n
Finally I remember that Chad suggested a gif, so I download his image and make a gif of him rolling his eyes. Upload that to google and hotlink instead of the original jpg as a background. finally I have: Here’s iterating at you, Chad<\/a>, I had to save twice as I needed to attribute the audio which is share under a Creative Commons \u2014 Attribution 3.0 Unported \u2014 CC BY 3.0<\/a> license.<\/p>\n
So here is the Final version:<\/p>\n
\nHere’s iterating at you, Chad<\/a><\/strong>.<\/p>\n
Musing about Making<\/h3>\n
So like a lot of the things that I do for fun, this sort of bumbled along with one shot leading to the next. What was great about doing this inside the #teachtheweb community was there were lots of ideas to bounce off. This blog post was started after a comment on the final link I posted<\/a>. Does that make this connected learning?<\/p>\n
One of the lovely things about html is, if you know sometinhg is possible the method is just a quick google away. I wonder if that makes web editing a more accessable way of encouraging creativity?<\/p>\n
Thimble thoughts<\/h3>\n
I’ve made between 6 and 10 experiments with Mozilla Thimble<\/a> now, which makes me an expert;-)<\/p>\n
I’ve found it a wee bit slow on older computers, so I’d think about that before using it in a class. <\/p>\n
The split screen view is really good for seeing the changes made to the code take effect. I would however like the option of a tabbed screen so that I could see the whole of the preview without needing a huge screen. I’d also like the forthcoming ability to re-edit a page rather than having to save with a new url. The trail of urls is good for reviewing the process and blogging about it.<\/p>\n
I would also like thimble to keep a track of my creations, I am pretty sure I’ve lost track of a few.<\/p>\n
The most powerful features of thimble are, for me<\/strong> the templates which have great comments and the way you can easily edit someone else’s creation.<\/p>\n","protected":false},"excerpt":{"rendered":"
Week two of the teachtheweb mooc starts with a challange: Explore the awesome makes from last week, choose one, and remix it.. At lunch today I though I’d take a very quick stab at this using Chad’s Webmaker Profile, as Chad is a fellow ds106er and I though he would enjoy the play. The First […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"mf2_syndication":[],"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"webmentions_disabled_pings":false,"webmentions_disabled":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[72,6],"tags":[17,3,79,80,81,486],"post_format":[],"class_list":{"0":"post-2383","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-teachtheweb","7":"category-wwwd","8":"tag-animatedgif","9":"tag-community","10":"tag-css","11":"tag-fun","12":"tag-html","13":"tag-teachtheweb","14":"kind-article","16":"h-entry","17":"hentry"},"better_featured_image":null,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p57zFQ-Cr","jetpack_likes_enabled":false,"jetpack_sharing_enabled":true,"kind":false,"_links":{"self":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts\/2383","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/comments?post=2383"}],"version-history":[{"count":1,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts\/2383\/revisions"}],"predecessor-version":[{"id":14948,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts\/2383\/revisions\/14948"}],"wp:attachment":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/media?parent=2383"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/categories?post=2383"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/tags?post=2383"},{"taxonomy":"post_format","embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/post_format?post=2383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}