writingwhilethrowing

We started a writing group today on campus. There are four of us. Three of us are meeting today. We decided:

to document our lives and how we write.

what does you day look like.

how do you manage to write.

A #walkmyworld remix

► Play Zeega ►

by Greg McVerry

So I just finished this remix. It is for #walkmyworld.

I started by first reading and annotating my two sources. Today I stole from JPG's Anti-Education Era and Marlene Scardamalia and Carl Bereiter idea of knowledge communities

I wanted to play with Gee's work so I made a series of Gifs. One for each element of the circuit of reflective inquiry. Gee's premis is that we are dumb alone but groups and tools can make us smarter...if we engage in the circuit of reflective inquiry. To make the gifs I just held my smart phone and used an Android App Video to Gif. Took some experimenting to get the file size down.

Then I found images from #walkmyworld to remix with Scardamalia and Bereiter's work. All of the words are straight lifted from here.

Engineering Better Teachers

So I decided I wanted a slider on my static homepage. Hacking at Wordpress seemed to be frought with danger.

So I decided to build a slider myself. This is actually what got me involved with CSS on my blog. I needed a webpape with columns and a slider. I needed CSS.

So back in September I started to teach myself...and bug those who know more to no end.

Today was spent trying to make a new slider for the blog I blew up

I dit it!

I like the idea of having a slider I fully control rather than being held hostage to a theme. If I want to link to something or someone else I can. If I do not want posts showing up in the feature slider they won't. I am in control I like that.

I started with some code I found online. I should have bookmarked the link. I had to change the size of everything, but that's easy (really you can learn CSS just as I did....by breaking lots of stuff).

The problem arose when I tried to overlay a hyperlink. I lost hours of my life on this hunt.Here is the finished product (hit remix to see the code). My Slider

Turns out all of my issues boiled down to positioning. I started with an absolute position. All of the links basically stacked on top of each other (I think). Then when I switched to float:left problem solved. I switched to a right float and spaced out my margins.

I now have a working slider on my blog

A couple issues are left

I have to edit my CSS tochange slides. Just copy/pasting img url nothing too rough

I have to resize images to 640*300. I know I can set width to 100% but this never works for me. I like to know the images are set.

I originally set the slide size to equal a medium download on Flickr but it was too square for my taste

I hope the folks at TRU don't mind me stepping into the Feed and sharing my gibbership. The idea of having a backstage blog just intrigued me since I saw @cogdog write about it

I have been loving writing these short posts on Tumblr. There is freedom in not caring.

No featured images. No CSS to format (just a tiny bit of HTML or Markdown). Just write.

Except I feel uneasy about it being somewhere else. I am a proponent of one digital hub. 

I want this on my website but without the hassle of a full post.

I thought about using Known. Love the philosophy but I already control my content. Its called my blog.

Enter Jetpack

Now that I am using Jetpack I am hoping I can publish quickly from mobile. I think I love that most about Tumblr. You just write and your done.

I also hope Jetpack solves another issue. I read on one of the #YouShow15 blogs someone had a theme that was publishing to different pages based on tags. 

That is what I want. Posts that don't enter my main stream but can be directed to their own page. I spent some time on the web and it looks like I can make this happen by tweaking some stuff in my php files.

That scares me a lot. I have already had to reinstall my theme twice (after I learned how to delete). 

I wanted a large header image on my homescreen  but a different size header on every other page. I keep screwing up the CSS. (I know the big image header is predicted to be on the way out...but hey I just got a Member's Only jacket, I am late with style and design)......

Back to the point. I am hoping that using Wordpress and Jetpack I can make a tumblr or known like page that is easy to publish to....

So I blew up my blog today. So much work to do now. Plus I need to do work that pays the mortgage and feeds the kids. I have to stop tweaking. It will be in state of disaster for a few days.

I chose Hueman as my theme. It rocks.

I will keep writing content. That mattters so much more than layout.

A few issues

My last theme had you upload slider images. This one correctly uses featured images....but....I have to go through every post and set a featured image.

I can't get the slider to work. I like a static home page with a recent post slide.

A Reflection on Remixing

TLDR: I detail how I took two academic texts and images to create a remix using Zeega

I was trying to write a post of literacy and identity. It began with a search for google scholar. My computer smashed. I don’t have access to my curated literature. Not that it is tagged well. I need to get better at.

I wanted to try and write a post that meant something. That condensed these archaic academic articles into a succinct post. I admire bloggers like that. I try and tag posts like this to serve as mentor texts in class.

I didn’t happen. I got sidetracked into a more meaningful multimodal musing. 

After going back to the slideshow by Rick Beach about #walkmyworld I decided to use it to frame my piece.

That and it was too late to write a post heavy on digestible academic discourse. Besides when I usually try to cook these up I end up with a burnt turkey burger covered in vegan cheese.

I also had remix on my mind. Laura Hillinger had posted a query to #teachtheweb about remix lessons. I shared some previous ones I did but I wanted to give it the old college try.

Who’s got a project about remixing literature that I can steal from? @writingproject? Got a link? Some plan? An Etherpad? #teachtheweb

— Laura Hilliger (@epilepticrabbit)

January 20, 2015

Finally I wanted to make a Zeega for #walkmyworld. We want folks playing with images and identity. So I figure let me play and co-learn.

I had a bunch of PDFs open. One of those happened to be Donna Alvermann’s piece I decided to use that piece as well.

I find remixes easier when they are anchored in more than one source or idea. It makes metaphors easier. This gets you away from literal intermodal concurrence and lets you play with meaning.

I wish I had my old computer. I would have recorded the creation process, but I will try my best to recount here:

I started with the four questions we asked in our #walkmyworld session and Rick Beach’s idea that we have multiple me’s that move across our digital spaces.

We were asking people to name their world.

This brought me back to the King Killer Chronicles. It opens the remix. If you haven’t read it start now. Magic in the book works by knowing the name of things. The real true name. Seriously read it.

I played off this naming magic because naming ourselves in hard work. I screw it up all the time.

I then made my two definition slides where I talk about literacy moving to literacies. I was trying to get at the idea we have rejected a model of literate and the illiterate and recognize multiple pathways to meaning making. I searched for book and dumb. You can figure out which opicture is which? What do these images say about gender identity? Searching, tagging and social media?

Its kinda cool though that one image looks to be in the brain of the other. Not sure if that was luck or if I did that.

The next slide is the point I think Rick was trying to make…or at least it is the way I am repackaging it.  Not sure what my search term  was. 

Zeega lets you search a bunch of web media and remix it. dogtrax probably has a comic.

I then went and made the 2nd and 3rd slide. I had a text structure start to formulate in my mind. Strange bc I usually have to storyboard out stuff like this.

I would draw my literature base on Gee and identity kits from Alvermann, stick in Ricks beginning thoughts. 

Then I would  use images of doors folks have posted to #walkmyworld with the four questions.

To capture what I meant from Gee’s identity kits I wanted to use the tired trope of using L33T when discussing youth technology. I did a quick ethnographic netography ofold gaming forums…kidding„

The text copied froim academia.edu just came out that way. Either DRM or incompatible fonts. Either way. Eureka.

The discourse page was from the method Rick suggest we use in the future. 

The song choice, well The Doors seemed too literal. There is mention of a door in the song, and I spent all day in the Post Office trying to figure out the most convoluted ticket  mail order process ever.

I needed to make an image for #walkmyworld. I wanted to do a series of cascading doors and then an open image into a room. It is a loose metaphor for hwo we step in and out of different identities.

How I Did it:

I first went to flickr. I start with their creative commons page, It doesn't work well. I click on CC BY-SA and then use a search term. I am looking at just CC BY-SA right? Nope. If you look carefully you have all licenses. You have to reselct CC images and then look closely at the license to make sure you can use and reappropriate the image.

Crediting:

I am big on crediting...well trying to get better. I tried this time I really did. I had every image open in a different window and then I tried to favorite them. I wasn't signed on and Flickr wouldn't let me sign in becuase I had a Yahoo (fantasy) and a Gmail (Flickr) account,.Signed in, lost images. I would have credited....Promise.

The Tech Stuff

I used pixlr editor a free editing app available in Chrome (maybe Firefox too I haven't checked). It is a great program and does almost everything Gimp or Photoshop did.

I started with the first image as my base layer.

I then opened the second door.

I unlocked the layer.

I then used the magic wand tool to select some of the image (can give it a cool ghost like effect).

I then used the lasso tool (polygonal) and chose the edges of the door.

I copied the selection and pasted it on to the first door.

I then used just the lasso tool on the third door.

I had to resize the layers (each door was a different layer). In Pixlr (and everywhere else this is Free transform.

What I would do differently.

Start with the largest images. I thought I want the doors to fit in. On Flickr I will download, large, medium, small to save time. Seemed logical, bad idea.Way better to scale down than it is to scale up.

Blur the thethird door a bit. I would either apply a blur filter or use a smudge tool to mess up the clean lines. There is a little I guess I will call it geometric dissonance that doesn't sit well in my gut.

Learn CSS layout by making a fake facebook page.

Update on my #teachtheweb fake facebook tutorial:

I will get CSS layout. I will get CSS layout...If I keep repeating it will it happen?

I got really close. I just can't get my columns to float correctly. Click on remix to see the code. This is pretty much the first thing I ever wrote from scratch. 

If you want to help me figure out my error. It will be appreciated.

Things left to do:

Fix the layout of the second column. I have it set to float right but its appearing at the bottom of the other elements.

Fix the color of the comment boxes. It is a slightly different blue. Never really cared about being color blind before. The only annoying thing was people asking ,me what color things are when they find out..but now that I am more of a webmaker it gets annoying. It is really hard for me to compare colors to hex charts. I try to use the inspect element but often the color is hidden in external style sheets. Somebody had the the idea of taking screenshot and then getting the color code in a photo program. I will try that. Still I wish there was an extenstion that let me right click on any element and get the color code.

Add the CSS/HTML comments for teaching I know some don't like all the comment clutter but my students find it helpful to have step by step instructions and definitions in the code.

I am applying for a grant to start webmaker clubs in New Haven libraries. I have been thinking about my curricular map:

Composing for the web

Learning Activity One: Hack The New York Times

Learn about HTML while putting yourself on the front page.You will:

Change the text of a website.

Change and insert hyperlinks

Change an image

This aligns to the following competencies in the web literacy map

Remixing-

Create something new on the web using existing resources.

Identify and use openly licensed work.

Composing for the web

Inserting hyperlinks into a web page

Embedding multimedia content into a web page

Creating web resources in ways appropriate to the medium/genre

Identifying and using HTML tags

Additional skills:

Online image hosting: People want to put images of themselves or children but do not know how to find the URL of an image or how to host an image they have on their phone online.

Learning Activity Two: Make a Meme

Learn how to change the color and placement of text using CSS.

Add an image using a url

Change the font of a text

Change the color of a text

Change the placement of a text

This aligns to the following competencies in the web literacy map:

Composing for the web

Structuring a website.

Creating web resources in ways appropriate to the medium/genre

Identifying and using HTML tags

Design and Accessibility

Identifying different parts of a website using industry recognized terms.

Using CSS tags to change the style and layout of a Webpage.

Learning Activity Three: Make a Business Card

Design a business card for your digital identity: You will:

Insert an image.

Learn about CSS layout and <div> overlays

This aligns to the following competencies in the Web Literacy Map

Design and Accessibility

Identifying different parts of a website using industry recognized terms.

Using CSS tags to change the style and layout of a Webpage.

Learning Activity Four: Make an About Me Page

We will now apply all that we learned and create an about me page you will:

Use additional html tags for bulleted and numbered lists.

Learn how to do inline formatting of texts

Style texts using CSS

This aligns to the following competencies in the web literacy map:

Composing for the web

Structuring a website.

Creating web resources in ways appropriate to the medium/genre

Identifying and using HTML tags

Design and Accessibility

Identifying different parts of a website using industry recognized terms.

Using CSS tags to change the style and layout of a Webpage.

Learning Activity Five: Memorable Quotes

We will practice our CSS layout to make a poster about one of your favorite quotes. You will:

Learn about the position property.

Learn about the float property.

Learn about the margin property

This aligns to the following competencies in the web literacy map:

Remixing-

Create something new on the web using existing resources.

Identify and use openly licensed work.

Composing for the web

Structuring a website

inserting hyperlinks into a web page

Embedding multimedia content into a web page

Creating web resources in ways appropriate to the medium/genre

Identifying and using HTML tags

Design and Accessibility

Identifying different parts of a website using industry recognized terms.

Using CSS tags to change the style and layout of a Webpage.

Demonstrating the difference between inline, embedded and external CSS

Learning Activity Six: Fake Facebook

In this activity you will apply what you have learned about CSS layout to make a fake facebook page for a character from a book, a hero, or a historical figure.You will:

Use div overlays and CSS layout

Use inline and embedded CSS

This aligns to the following competencies in the web literacy map:

Remixing-

Create something new on the web using existing resources.

Identify and use openly licensed work.

Composing for the web

Structuring a website

inserting hyperlinks into a web page

Embedding multimedia content into a web page

Creating web resources in ways appropriate to the medium/genre

Identifying and using HTML tags

Design and Accessibility

Identifying different parts of a website using industry recognized terms.

Using CSS tags to change the style and layout of a Webpage.

Demonstrating the difference between inline, embedded and external CSS

Performance Assessment: Create a Portfolio of your Makes

You will now use all that we have learned and the code in the learnlayout.com tutorial to build a website to show off your makes.

In addition to all of the other composing competencies covered in this module you will:

Improve the accessibility of a web page by modifying its color scheme and markup

Iterate on a design after feedback from a target audience

Reorganize the structure of a web page to improve its hierarchy/conceptual flow

Fake facebook

File this one under pitch.

I said my next #youshow would be about CSS animation.

I changed my mind. I need to learn, and by that I mean teach, layout.

I am going to use http://learnlayout.com to build a spoof facebook page.

I know there are plenty of templates. I will recommend one as a lo-tech option but I want to make a layout learning activity.

This is my first post in the YouShow series. I will not have time to keep up the the class, but I make stuff online (but I break more). I originally wrote the post on my front stage blog but the comments are so meta and the writing so stream of thought I felt it needed its own place.

This blog title is in reference to embodied nature of writing. My process is so hard to document. I could get transfixed on an idea walking the dog, playing with kids or sitting in my porcelain office.

My ideas are usually well past my skill level so writing then turns to a mixture of caffeine, cursing, and throwing things.

Since we want #walkmyworld participants to create content we also want them to  to understand the rights of makers. I decided to make a  a tutorial (mainly because I needed to learn about CC and ontainers to overlay images.)

The director's cut:

I I do not know how to write HTML/CSS. I just steal code from elsewhere. Then I tweak it for awhile. Throw something. Walk away and posts pleas for help all over the web. That is my workflow.

This make began with me trying to learn how to add an image on top of an image in CSS. That may have even been my search terms in Google. That brought mehere.

I scrolled through the CSS and saw the multiple image overlays and thought, "That would be cool to display all of the images of CC licenses." I figured I could do it....So I copy pasted all the code. (I still don't know why some selectors have the same name .multiPic followed by .text1). I just new I could change the background url.

It worked. So I decided let me find one image for each of the Creative Commons licenses and add an overlay for the license and the attribution.

Then things started going wrong. I didn't want the image url in the background of CSS. I wanted CSS that would allow me to drop in images and switch the license. Being hidden in a style sheet did me no good.

So I posted this message on discourse.webmaker.org hoping someone would respond.

(Note: I need to learn how to post code in spaces that  take markdown. I tried blockquote but it still formatted).

Then  fourtonfish responded. He defined some key terminology for me, gave me some resources (I ignored the tutorials...for now...but he inspired me to keep hacking away. Using my growing understanding I found some tutorial (couldn't find it in my history..I tried so many)  that got me to make one div  container and put the other three divs inside of it.

It worked! I now know enough about overlays and containers to play.

.....well except the hover. So I posted another message to @fourtunfish on discourse.webmaker.org. He called me out for ignoring the tutorials and then fixed my code.

I went in and added the correct code and I did it. Just had to search for the images and copy the code a few times. I then went back into the code to add my comments. I am trying hard to use clear instructions. (I am also

I tried to add the CSS to my wordpress stylesheet. I was able to save it to the stylesheet but when I tried the html code on a page or a post the images did not overlay. That is my next task. Luckily my Wordpress theme comes with great support and Bryan Hadaway of CyberChimps is helping me try to solve the issue.

I really want the tool to work. I like to put the license in a caption or right on the photo.