I needed to make an image for #walkmyworld. I wanted to do a…
20 Jan 2015

I needed to make an image for #walkmyworld. I wanted to do a…

by | posted in: From All Blogs, From Open Participants, Syndicated | 0

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.
  • Maybe I should have kept some of the blue frame.
Fake Facebook
19 Jan 2015

Fake Facebook

by | posted in: From All Blogs, From Open Participants, Syndicated | 0

Fake Facebook:

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.
  • Make GIF tutorial Screencasting is so 2010. I am having better luck making a series of GIF clips.
#TeachTheWeb Learning Activities
18 Jan 2015

#TeachTheWeb Learning Activities

by | posted in: From All Blogs, From Open Participants, Syndicated | 0

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

Webmakers who successfully complete of the portfolio can apply for the composing for the web, remixing, and design and accessibility badges.