Building the Web

Over the course of eight weeks students discovered how to make the web their own.  Some web builders had prior knowledge of HTML (hypertext markup language) and CSS (cascading stylesheets), the languages of the web, but most were complete novices.

This class was different from most as we worked on one project the entire term.  In the second session we began planning out what our website would look like and what it would be about.  Every website was completely different!


For the first few sessions our sites didn’t look all that interesting, they had pictures and text, but when we were just using HTML all the content ran down the side of the page in a straight line.  Then we learned how to add CSS to style our HTML and things really began to take off.  With CSS we were able to tell content exactly where we wanted it to appear and we were able to even add colour and different fonts.

Because we were working on one large project and every website was unique, there was a lot of self-guided learning taking place for more advanced tasks.   Two students wanted to implement quizzes into their sites, but they both went about doing so in different ways.  The one used an external quiz site to create, then embed, his quizzes while the other coded his quizzes using Javascript.  Another student wanted to give users the ability to change the background colour of his website and used Javascript and buttons to accomplish this.

Apart from learning how to code for the web, we also learned how to use the web responsibly.  During a lesson on how to tell if information found online is true, the students were most interested in knowing how they could be good sources of factual information.  Through all of our sessions we endeavored to use only Creative Commons licensed content.

Creative Commons licensed works allow anyone to use the work without asking permission.  When you see the Creative Commons logo, you know permission has already been given.  We discussed the difference between photos that are Creative Commons licensed and photos that show up when you do a Google image search, which despite common perceptions are usually not free for anyone to use.

It was an amazing term and I am very excited to see what this creative bunch comes up with next.  Their websites can be remixed over to their individual Mozilla Thimble accounts or downloaded as .zip files.

Final Websites

Six Word Holiday Remix

Advertisements

Design Your Own T-Shirt

Want to make your very own Maker Party T-Shirt?  Now you can!  Let us show you how.

This project involves sharp tools and has the potential to be very messy, so it should be done only with adult supervision.

IMG_20150712_161128Supplies

  • Snap-Off-Blade Knife
  • Fabric Paint
  • Thick Cardboard
  • Blank T-Shirt
  • Stencil Print Out
    • You can use our stencil or make your own
  • Translucent Mylar Plastic
    • We used plastic L-Shaped pockets
  • Small Foam Paint Roller / Foam Paint Brush
  • Cutting Board
  • Permanent Marker
  • Tape
  • Iron
  • Ironing Board
  • Hair Dryer*
  • Spray Glue/Display Mount*

*Optional

Instructions

1. Print out your stencil and tape it to a sheet of mylar

IMG_20150712_1335032.  Cut out your design using a snap-off-blade knife.  Remember to only cut your design out on top of the cutting board.

3. When you have finished cutting out your design, peel the paper away from the plastic.

4. Now you’re ready to paint!  Place a piece of thick cardboard inside the t-shirt you want to paint.  This will prevent paint from soaking through to the back of the shirt.  Place your stencil on top of the shirt, you can tape it down if you are worried it may move.

5.  Squeeze your fabric paint onto another piece of cardboard and roll your paint roller through the paint, making sure to coat it evenly.  Avoid using too much paint or else your design will become a blobby mess.

6. Now hold down your stencil with one hand and roll over it with the other.  Make sure that you get even paint coverage across your design. IMG_20150712_160924 7.  Wait for the paint to dry.  You can use a hair-dryer to speed up this process.

8.  Once dry, carefully remove the stencil. IMG_20150712_1611169. If your design requires multiple stencils, apply the second stencil in a different colour.  Be sure to follow steps 1-7.

10.  Once the paint has completely dried and you have finished your design, iron over the paint for approximately a minute.   You must iron the paint to set it, this prevents it from washing off.  If you have access to a clothes dryer you can opt to stick your shirt in the dryer for 30 minutes instead of ironing. IMG_20150712_154821_edit

Tips

  • You may have to make more than one stencil to create your design.  the Maker Party logo takes two stencils; one for the blue shape, another for the yellow words
  • If you have multiple stencils for your design number each stencil with a permanent marker so you can keep track of the order they should be used
  • Watch out for letters with holes such as P, A, and R.  You can create “bridges” to these centre pieces so they aren’t lost in your design.
  • When stencilling text use a foam brush instead of a roller to dab the paint on.
  • New shirts often need to be washed prior to stencilling.  You can test your material by dripping a few drops of water onto it.  If the water beads, your shirt must be washed first.  If it soaks into the fabric you’re good to go!
  • Instead of putting your design on a t-shirt, try a piece of thick craft paper to create a poster!

jtshirtEdit

MozFest 2014

MozFest Science FairThanks to the wonderful people at Mozilla I was able to attend the fourth annual Mozilla Fest in London this past week.

With nine floors and eleven tracks I knew I would never be able to see everything, but I did arrive each day with a plan.  It included sessions and activities I absolutely wanted to attend, along with a few extra things that I planned to check out if I had some extra time.  Over the course of three days I made four of my planned sessions.

Oh well, I can’t say I wasn’t warned, they did tell us “Your plan is the first casualty of MozFest.”  I just don’t think I quite understood how seriously true that statement was.  Being at MozFest is an awful lot like being inside a living, breathing Wiki, which if you know anything about Wiki’s they can be quite chaotic due to their open source nature.

Hive Pittsburgh's project invited attendees to write their own "source code" to help build community.

Hive Pittsburgh’s project invited attendees to write their own “source code” to help build community.

Happily, far more valuable than the sessions was time spent one-on-one with fellow Mozillians.  Some of them were old friends from Hive Pittsburgh, others were friends I previously only knew from the digital realm, and still others were friends I simply hadn’t met yet.  I was able to pick their brains about successes and challenges that they have encountered in their cities, but I also found myself being able to share my experience as a former member of Hive Pittsburgh and as someone who has been encountering new challenges as a new-comer to the technical education scene here in New Zealand.  I know I learned a lot and would like to think that I helped others leave with new ideas as well.

hiveDiagramThe Big Idea behind my attendance at MozFest was the desire to set up  Hive New Zealand.  A Hive Learning Network is a third-party, non-profit entity that connects organisations to each other and to funding opportunities in the community, but it is far more than that.  Hive also throws events such as Maker Party and educator evenings to help foster community and collaboration that ultimately benefits the children that we serve.  I have seen the benefits to having a Hive first hand in Pittsburgh and would like to bring that spirit of collaboration here to New Zealand.

FirefoxOSConferences usually have swag bags, but the people behind Mozilla are more generous than most and included a free FirefoxOS phone to all attendees who wanted to receive one.  Yes, Firefox, the browser you know and love, is now an operating system for mobile phones.

What does this mean for the future of mobile computing?  Glad you asked, disembodied voice!  It means that we have the freedom of choice, for too long our options have been Apple or Android. FirefoxOS is the Linux of the mobile community.  It is completely open source which means that you have just as much say in your operating system as the people at Mozilla.  It is also created by many people all over the world using HTML5 and open Web standards, with out all the restrictions and limitations of proprietary mobile operating systems.  Together Seth and I plan to explore the programming and educational potential of this new device and hopefully create some cool apps in the process.  We will keep you posted.
moonshotsMozilla Fest may be over until next year, but that doesn’t mean you can’t get involved and help shape the web.  Mozilla has many opportunities for people to contribute to the community, no matter your interest and skill level there is probably something for you.  My personal favourite is Webmaker where you can create and remix websites and teaching kits, but maybe you are more interested in science, community building, or even art.  Check out mozilla.org/contribute to find your place on the web.

Coming Soon: Maker Party Wellington

MakerBox is happy to announce that the venue for our Maker Party has been secured!  Please join us on September 13th at the Miramar Community Centre as we learn – and teach others – how to move beyond simply consuming the web to understanding and creating it with Mozilla’s Maker Party.

We are proud to be partnering with Mozilla to celebrate teaching and learning the web with Maker Party and we are not alone.  Through thousands of community-run events around the world, Maker Party unites educators, organizations and enthusiastic Internet users of all ages and skill levels.

MakerBox shares Mozilla’s belief that the web is a global public resource that’s integral to modern life: it shapes how we learn, how we connect and how we communicate. But many of us don’t understand its basic mechanics or what it means to be a citizen of the web. That’s why we’re supporting this global effort to teach web literacy through hands-on learning and making with Maker Party.

If you are not in Wellington, we still encourage you to attend a Maker Party event in your community. It’s a great chance to improve your knowledge of how the web works, while getting your hands dirty and having a little fun. Better yet, why not gather a few friends and throw a small event of your own.

We can’t wait to see what you’ll create!

makerparty_attendanevent_illustration2

Join the conversation on Twitter at #MakerPartyWGTN