Webmakers/Projects: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
(Created page with " <h1><span>Get involved</span></h1> <ul class="project-list"> <li> <a href="http://www.mozillapopcorn.org"> <article class="project card"> ...")
 
No edit summary
 
(136 intermediate revisions by 5 users not shown)
Line 1: Line 1:
<h1><span>Get involved</span></h1>
__NOTOC__
http://farm8.staticflickr.com/7206/6907867555_eeda62c030.jpg
<h1> Help test these new Webmaker Projects </h1>
<b>Help kick the tires on the beta projects below.</b> Are they easy to use? Helpful for learning? Fun?<br>
Let us know by filling out this fast and easy survey:
<br>
<div style="width:30%; height:105px; float:none; padding: 1px; border: 1px solid rgb(40, 40, 40); background: #dddddd; -moz-border-radius: 10px; text-align:center; margin-top:15px; margin-right:15px;"><br>
<h2>[https://docs.google.com/spreadsheet/viewform?formkey=dERCYVFSQVhyWkxDUC1haFJpRjRrc0E6MA#gid=0 Tell us what you think]</h2>
</div>
<br>
<h3> What are these "Webmaker Projects," anyway? </h3>
<b>Learning by making</b>. Webmaker projects are designed to help you make something amazing on the web fast.


    <ul class="project-list">
Using Mozilla Webmaker tools like Popcorn, Hackasaurus and Thimble, you can:  
        <li>
* take apart and remix web sites,
            <a href="http://www.mozillapopcorn.org">
* make your own webpages, interactive videos and other cool stuff in minutes,
            <article class="project card">
* sharpen your webmaking skills. From HTML and CSS to fancy stuff.  
                <figure>
                    <img src="/media//images/splash/popcorn.png" height="120" width="185" alt="" />
                </figure>
                <div class="info">
                    <hgroup>


                    <h1>Mozilla Popcorn</h1>
<b>We're preparing a set of these projects for the Mozilla Summer Code Party.</b> The goal: teach the world the basics of coding and webmaking. Through bite-sized games, projects and recipes that are easy, social and fun. Partners and contributors will be able to share their own webmaker projects as well.
                    <h2>supercharge web video</h2>
                    </hgroup>
                    <div class="description">
                        <p>Popcorn adds interactivity and context to any online video, pulling the web right into the action in real time.</p>
                        <ul>
                            <li>Explore what Mozilla Popcorn can do for film-makers, journalists and the classroom</li>


                            <li>Create your own interactive pop-up video</li>
<h1> Webmaker Beta Projects: test 'em out now</h1>
                            <li>Get a taste of Popcorn through web documentaries, demos and more</li>
<br>
                        </ul>
[[Image:webarcade.jpg|270px|left]]
                    </div>
<h3>Web Arcade</h3>
                </div>
<p>Enter the Web Arcade to explore the world of the Open Web ; a place made out of serious cats, planking videos and minecraft  empires! The Web Arcade offers a collection of mini games that help you level up your (HTML & CSS) skills and create your own webpages.
                <div class="meta">
</p>
                    <strong>www.mozillapopcorn.org</strong>
'''Tools used:'''Thimble '''Skills:''' HTML Basics ''' Difficulty:'''Beginner


                </div>
<br><br><br>
            </article>
            </a>
        </li>
        <li>
            <a href="http://www.mozillaopennews.org">
            <article class="project card">
                <figure>
                    <img src="/media//images/splash/opennews.png" height="120" width="180" alt="" />


                </figure>
[[Image:HTML_BASIC_coverimage-01.png |270px|left]]
                <div class="info">
<h3>Wrangle the HTML</h3>
                    <hgroup>
<p> HTML is not complicated or difficult to wrangle. In this project you will get a hold of the basics and you might even realize that you know a bit of HTML already.  
                    <h1>Knight-Mozilla
 Open News</h1>
</p>
                    <h2>shape the future of news</h2>
'''Tools used:'''Thimble '''Skills:''' HTML Basics ''' Difficulty:'''Beginner
                    </hgroup>
                    <div class="description">
                        <p>Hack, learn and innovate with the world’s leading news organizations.</p>


                        <ul>
<br><br><br>
                            <li>Drive open source innovation in news with the Knight Foundation and Mozilla</li>
                            <li>Learn and hack with news partners like the BBC, Guardian, Die Zeit, Al Jazeera and Boston Globe</li>
                            <li>Take part in learning labs and hack sprints around the globe</li>
                            <li>Apply to become a 2012 Knight-Mozilla News Fellow</li>
                        </ul>
                    </div>


                </div>
[[Image:arcademap.jpg |270px|left]]
                <div class="meta">
<h3>Hack a Map</h3>
                    <strong>www.mozillaopennews.org</strong>
<p>HTML is a funny looking language; it is  written inside brackets like <this> and </this>. In this  project you will begin your journey in the world of HTML by exploring  the syntax behind it to activate and customize a broken Map and explore brave new webby worlds.
                </div>
</p>
            </article>
'''Tool:'''Thimble '''Skills:''' HTML syntax''' Difficulty:'''Easy'''
            </a>
        </li>
        <li>


            <a href="http://www.hackasaurus.org">
<br><br><br>
            <article class="project card">
                <figure>
                    <img src="/media//images/splash/hackasaurus.jpg" height="120" width="180" alt="" />
                </figure>
                <div class="info">
                    <hgroup>
                    <h1>Mozilla Hackasaurus</h1>


                    <h2>webmaking made simple</h2>
[[Image:Bakerybash_cover-01.png |270px|left]]
                    </hgroup>
<h3>Bakery Bash</h3>
                    <div class="description">
<p> If you are a fan of the web you have already met the loaf cat. A proud owner of a Bakery, the loaf cat is throwing a party -a Bakery Bash if you will. Unfortunately the guests are all undercover Serious Cats. Bummer! Your goal in this game is to fix the links and clickable images so that they no longer point to the serious cat. Once you are done bring a few more guests and add some music to get this party started!
                    <p>Hackasaurus makes it easy to create, tinker and share on the web.</p>
</p>
                    <ul>
'''Tools used:'''Thimble  '''Skills:''' HTML, links, images ''' Difficulty:'''Easy
                        <li>Alter your online reality with the amazing X-Ray Goggles</li>
                        <li>Create your own web page in seconds</li>


                        <li>Host your own hack jam event for youth</li>
<br><br><br>
                        <li>Access teaching tools and kits for novice webmakers.</li>
                    </ul>
                    </div>
                </div>
                <div class="meta">
                    <strong>www.hackasaurus.org</strong>


                </div>
[[Image:avataromatic.png |270px|left]]
            </article>
<h3>Avatar-O-Matic</h3>
            </a>
<p> There are people who are on the web, and then there are people who MAKE the web.- Who do YOU want to be? Your goal in this project is to MAKE your very own webmaker avatar. In this unique blend of HTML agility, CSS and firepower  you are going to mix and match the images on this page to create your very own webmaker page and share what you are passionate about making.
        </li>
</p>
        <li>
'''Tools used:'''Thimble'''Skills:''' HTML & CSS, positioning, privacy ''' Difficulty:'''Intermediate
            <a href="http://www.mozillafestival.org">
            <article class="project card">
                <figure>
                    <img src="/media//images/splash/festival.jpg" height="120" width="180" alt="" />


                </figure>
<br><br><br>
                <div class="info">
                    <hgroup>
                    <h1>Mozilla Festival</h1>
                    <h2>a three-ring circus of innovation</h2>
                    </hgroup>
                    <div class="description">
                    <p>A yearly celebration that brings together hundreds of passionate people to make, hack and explore the frontiers of the open web.</p>


                    <ul>
[[Image:coverimages_squirrel-01.png |270px|left]]
                        <li>Get together with developers, designers, and big thinkers to make things that can change the world</li>
<h3>Make your own meme</h3>
                        <li>Sprint on design challenges addressing key issues and produce ambitious chunks of prototyping and design</li>
<p><b>Do you have what it takes to go viral and become internet famous?</b>Prove it. This project let's you use your HTML and CSS swagger to  create your own web page -- featuring a meme to conquer all internet  memes. You might wonder  what is a meme? Well a meme refers to an internet phenomena: think  viral videos, web celebs, fuzzy animals… So let your inner squirrel,  serious cat, Brony or Ryan Gosling “Hey girl,” shine.
                        <li>Trade darkened lecture halls for maker labs full of people building things</li>
</p>
                    </ul>
'''Tools used:'''Thimble'''Skills:''' HTML & CSS, design thinking ''' Difficulty:'''Intermediate
                    </div>
{{ThimbleProject|meme}}
                </div>


                <div class="meta">
<br><br>
                    <strong>www.mozillafestival.org</strong>
                </div>
            </article>
            </a>
        </li>
        <li>
            <a href="http://www.openbadges.org/">


            <article class="project card">
[[Image:stuck90s.png|270px|left]]
                <figure>
<h3>Make ugly '90s pages pretty</h3>
                    <img src="/media//images/splash/openbadges.jpg" height="120" width="180" alt="" />
<p>Everyone has an embarrassing moment. For the web it was the '90s. Back then, websites were boxy and ugly -- kind of like this page! Wrangle your HTML and CSS style powers to change the content, colors and layout to drag these webpage out of the grungey '90s.
                </figure>
</p>
                <div class="info">
'''Tool:'''Thimble'''Skills:''' HTML and CSS, web design ''' Difficulty:'''Advanced
                    <hgroup>
{{ThimbleProject|stuck}}
                    <h1>Mozilla Open Badges</h1>
                    <h2>level up in life, work and learning</h2>


                    </hgroup>
<br><br><br>
                    <div class="description">
                    <p>Free software for issuing, managing and displaying digital badges across the web</p>
                    <ul>
                        <li>Use our "Open Badge Infrastructure" to issue badges for your own course, community or organization</li>
                        <li>Allow learners to collect and display badges from multiple sites through a single identity</li>
                        <li>See how organizations like NASA, Disney-Pixar, Intel and others are using digital badges for learning</li>


                    </ul>
[[Image:webstructables.jpg|270px|left]]
                    </div>
<h3>Make your own "webstructable" how-to</h3>
                </div>
<p>Are you an expert at drawing anime character? or how about surviving your first night in Minecraft? This project lets you create your own web page tutorial. Use your  new-found HTML, CSS and Popcorn wisdom to create the world's greatest  how-to. What do you want to make today?
                <div class="meta">
</p>
                    <strong>www.openbadges.org</strong>
'''Tool:'''Thimble'''Skills:''' HTML & CSS, Popcorn, teaching others''' Difficulty:''' Advanced
                </div>
            </article>
            </a>


        </li>
<br><br><br>
        <li>
            <a href="http://www.mozillaignite.org">
            <article class="project card">
                <figure>
                    <img src="/media//images/splash/ignite.png" height="120" width="180" alt="" />
                </figure>
                <div class="info">
                    <hgroup>


                    <h1>Mozilla Ignite</h1>
[[Image:title_commercial_small.png|270px|left]]
                    <h2>shape the internet's future</h2>
<h3>Hack a commercial</h3>
                    </hgroup>
<p>Add your own voice to a cheesy 1950s TV commercial! Add pop-ups and commentary, change meanings, and hack pop culture using Mozilla Popcorn.
                    <div class="description">
</p>
                    <p>Design and develop apps for the faster, smarter networks of the future.</p>
<p>'''Tool:'''Popcorn'''Skills:''' remix, web design, positioning ''' Difficulty:'''Intermediate</p><br>
                    <ul>
<h3>[https://wiki.mozilla.org/Webmakers/Projects/Hack-a-Commercial GO!]</h3>
                        <li>Take part in an open innovation challenge sponsored by the National Science Foundation and Mozilla </li>


                        <li>Design and build applications for deeply programmable networks up to 200 times faster than today</li>
<br><br><br>
                        <li>Innovate in areas that matter -- like healthcare, education, energy and the environment</li>
                        <li>Submit your idea. Win funding and support. Get access to one of the fastest networks on the planet.</li>
                    </ul>
                    </div>
                </div>
                <div class="meta">


                    <strong>www.mozillaignite.org</strong>
[[Image:title_context_small.png|270px|left]]
                </div>
<h3>Remix a Story</h3>
            </article>
<p>Recontextualize a story by adding additional information. Attribute sources and give credit where credit is due.</p>
            </a>
<p>'''Tool:'''Popcorn'''Skills:''' remix, web design, positioning, attribution ''' Difficulty:'''Intermediate</p><br>
        </li>
<h3>[https://wiki.mozilla.org/Webmakers/Projects/Remix-a-Story GO!]</h3>
        <li>
            <a href="http://www.p2pu.org/webcraft/">
            <article class="project card">


                <figure>
<br><br><br>
                    <img src="/media//images/splash/webcraft.png" height="120" width="180" alt="" />
                </figure>
                <div class="info">
                    <hgroup>
                    <h1>Mozilla School of Webcraft</h1>
                    <h2>learn "Webmaking 101”</h2>
                    </hgroup>


                    <div class="description">
[[Image:iathumb.png|270px|left]]
                    <p>Free and open web design and developer training for the world.</p>
<h3>Create your own "Inanimate Alice" story</h3>
                    <ul>
<h2>Powered by Hive NYC </h2>
                        <li>Peer-based learning through Peer 2 Peer University</li>
<p>This project uses the popular "Inanimate Alice" interactive novel and Mozilla Hackasaurus to create narrative mayhem. Youth can create their own narrative using characters and a storyline they create, learning how to remix the web along the way.
                        <li>Learn basics like HTML, CSS and more </li>
</p>
                        <li>Earn badges to show off your skills</li>
                        <li>Volunteer to help mentor novice web developers around the world.</li>


                    </ul>
<p>'''Tool:'''Hackasaurus XRay Goggles  '''Skills:''' HTML & CSS, writing, storytelling ''' Difficulty:'''Easy</p>
                    </div>
<h3>[https://wiki.mozilla.org/Webmakers/Projects/InanimateAlice-DIY GO!]</h3>
                </div>
<br><br>
                <div class="meta">
<br><br>
                    <strong>www.p2pu.org/webcraft/</strong>
                </div>
            </article>
            </a>


        </li>
[[Image:soapthumb.png|270px|left]]
        <li class="join">
<h3>Make your own rant page</h3>
            <article class="project card">
<h2>Powered by Hive NYC</h2>
                <figure>
<p><b>Got something to shout about?</b> A rant, cause, passion project, block party or victory you want the world to know about? Shout it from the rooftops by making your own web page in minutes with this handy remixable template. Then share it via email, Twitter, Facebook or URL. Easy! </rant>
                    <img src="/media//images/splash/join.jpg" width="180" height="120" alt="" />
</p>
                </figure>
'''Tool:'''Thimble'''Skills:''' video, creative commons, HTML and CSS, web design ''' Difficulty:'''Intermediate
                <div class="info">
<h3>[http://toolness.github.com/friendlycode/?p=/p/151 GO!]</h3>
                    <hgroup>
<br>
                    <h1><a href="http://www.mozilla.org/join">Join Mozilla</a></h1>


                    <h2>Help build a better web for all</h2>
[[Image:tumcus.png|270px|left]]
                    </hgroup>
<h3>Customize your Tumblr HTML Theme</h3>
                    <div class="description">
<h2>Powered by Tumblr </h2>
                    <p>Support Mozilla’s non-profit mission.</p>
<p>Have you always wondered how to create a custom background for your tumblog? Or how you can add widgets to that lonely sidebar of yours? Learn how to customize your blog using Tumblr's  HTML editor and conquer the blogosphere with your stylish musings.
                    <ul>
</p>
                        <li>Make a donation and receive the exclusive Firefox t-shirt</li>
'''Tool:'''Tumblr Editor'''Skills:''' HTML and CSS, web design ''' Difficulty:'''Intermediate
                        <li>Join our mailing list to stay in touch: <a href="http://donate.mozilla.org/email">donate.mozilla.org/email</a></li>
<br>


                        <li>Follow what’s happening across our projects and campaigns through <a href="http://www.twitter.com/mozilla/">@Mozilla</a></li>
[[Image:tumagif.png|270px|left]]
                    </ul>
<h3>Make an Animated Gif</h3>
                    </div>
<h2>Powered by Tumblr </h2>
                </div>
<p>If you are eager to get your spot in the Tumblr hall of fame, you better get your animated gif action into place. Become the master of the gifs by completing this project that will even make a llama giggle.
                <div class="meta">
</p>
                    <strong><a href="http://www.mozilla.org/join">www.mozilla.org/join</a></strong>
'''Tool:'''GIMP, Tumblr '''Skills:''' image manipulation ''' Difficulty:'''Beginner
                </div>
<br>
<br>


            </article>
[[Image:3dweb.jpg|270px|left]]
        </li>
<h3>Make a 3D WebPage</h3>
    </ul>
<h2>Powered by the New York Public Library</h2>
    </section>
<p>Create your own webpages with 3D or animated graphics with the NYPL Stereogranimator tool. Select images from the digital gallery and then add your own quotes and quips to make a humorous webpage.
  </div>
</p>
</section>
'''Tool:'''Thimble'''Skills:''' image manipulation, HTML, CSS ''' Difficulty:'''Beginner
<br>
<h3>[http://thimbletest.org/en-US/projects/nesta/nypl/edit GO!]</h3>
 
<br>
 
<br><br>
<h2> So... what do you think?</h2>
<b>Are these beta webmaker projects:</b>
* <b>Easy to use?</b> Where do things feel confusing or broken? Is it easy to dive in and get started?
* <b>Helpful for learning?</b> Do they serve the goal of teaching HTML, CSS and other webmaking basics?
* <b>Fun?</b> That's crucial! Where are they most fun? Where do they lag?
<div style="width:30%; height:105px; float:none; padding: 1px; border: 1px solid rgb(40, 40, 40); background: #dddddd; -moz-border-radius: 10px; text-align:center; margin-top:15px; margin-right:15px;"><br>
<h2>[https://docs.google.com/spreadsheet/viewform?formkey=dERCYVFSQVhyWkxDUC1haFJpRjRrc0E6MA#gid=0 Tell us what you think]</h2>
</div>

Latest revision as of 15:12, 1 June 2012

6907867555_eeda62c030.jpg

Help test these new Webmaker Projects

Help kick the tires on the beta projects below. Are they easy to use? Helpful for learning? Fun?
Let us know by filling out this fast and easy survey:


Tell us what you think


What are these "Webmaker Projects," anyway?

Learning by making. Webmaker projects are designed to help you make something amazing on the web fast.

Using Mozilla Webmaker tools like Popcorn, Hackasaurus and Thimble, you can:

  • take apart and remix web sites,
  • make your own webpages, interactive videos and other cool stuff in minutes,
  • sharpen your webmaking skills. From HTML and CSS to fancy stuff.

We're preparing a set of these projects for the Mozilla Summer Code Party. The goal: teach the world the basics of coding and webmaking. Through bite-sized games, projects and recipes that are easy, social and fun. Partners and contributors will be able to share their own webmaker projects as well.

Webmaker Beta Projects: test 'em out now


Webarcade.jpg

Web Arcade

Enter the Web Arcade to explore the world of the Open Web ; a place made out of serious cats, planking videos and minecraft empires! The Web Arcade offers a collection of mini games that help you level up your (HTML & CSS) skills and create your own webpages.

Tools used:Thimble Skills: HTML Basics Difficulty:Beginner




HTML BASIC coverimage-01.png

Wrangle the HTML

HTML is not complicated or difficult to wrangle. In this project you will get a hold of the basics and you might even realize that you know a bit of HTML already.

Tools used:Thimble Skills: HTML Basics Difficulty:Beginner




Arcademap.jpg

Hack a Map

HTML is a funny looking language; it is written inside brackets like <this> and </this>. In this project you will begin your journey in the world of HTML by exploring the syntax behind it to activate and customize a broken Map and explore brave new webby worlds.

Tool:Thimble Skills: HTML syntax Difficulty:Easy




Bakerybash cover-01.png

Bakery Bash

If you are a fan of the web you have already met the loaf cat. A proud owner of a Bakery, the loaf cat is throwing a party -a Bakery Bash if you will. Unfortunately the guests are all undercover Serious Cats. Bummer! Your goal in this game is to fix the links and clickable images so that they no longer point to the serious cat. Once you are done bring a few more guests and add some music to get this party started!

Tools used:Thimble Skills: HTML, links, images Difficulty:Easy




Avataromatic.png

Avatar-O-Matic

There are people who are on the web, and then there are people who MAKE the web.- Who do YOU want to be? Your goal in this project is to MAKE your very own webmaker avatar. In this unique blend of HTML agility, CSS and firepower you are going to mix and match the images on this page to create your very own webmaker page and share what you are passionate about making.

Tools used:ThimbleSkills: HTML & CSS, positioning, privacy Difficulty:Intermediate




Coverimages squirrel-01.png

Make your own meme

Do you have what it takes to go viral and become internet famous?Prove it. This project let's you use your HTML and CSS swagger to create your own web page -- featuring a meme to conquer all internet memes. You might wonder what is a meme? Well a meme refers to an internet phenomena: think viral videos, web celebs, fuzzy animals… So let your inner squirrel, serious cat, Brony or Ryan Gosling “Hey girl,” shine.

Tools used:ThimbleSkills: HTML & CSS, design thinking Difficulty:Intermediate

GO!



Stuck90s.png

Make ugly '90s pages pretty

Everyone has an embarrassing moment. For the web it was the '90s. Back then, websites were boxy and ugly -- kind of like this page! Wrangle your HTML and CSS style powers to change the content, colors and layout to drag these webpage out of the grungey '90s.

Tool:ThimbleSkills: HTML and CSS, web design Difficulty:Advanced

GO!




Webstructables.jpg

Make your own "webstructable" how-to

Are you an expert at drawing anime character? or how about surviving your first night in Minecraft? This project lets you create your own web page tutorial. Use your new-found HTML, CSS and Popcorn wisdom to create the world's greatest how-to. What do you want to make today?

Tool:ThimbleSkills: HTML & CSS, Popcorn, teaching others Difficulty: Advanced




Title commercial small.png

Hack a commercial

Add your own voice to a cheesy 1950s TV commercial! Add pop-ups and commentary, change meanings, and hack pop culture using Mozilla Popcorn.

Tool:PopcornSkills: remix, web design, positioning Difficulty:Intermediate


GO!




Title context small.png

Remix a Story

Recontextualize a story by adding additional information. Attribute sources and give credit where credit is due.

Tool:PopcornSkills: remix, web design, positioning, attribution Difficulty:Intermediate


GO!




Iathumb.png

Create your own "Inanimate Alice" story

Powered by Hive NYC

This project uses the popular "Inanimate Alice" interactive novel and Mozilla Hackasaurus to create narrative mayhem. Youth can create their own narrative using characters and a storyline they create, learning how to remix the web along the way.

Tool:Hackasaurus XRay Goggles Skills: HTML & CSS, writing, storytelling Difficulty:Easy

GO!





Soapthumb.png

Make your own rant page

Powered by Hive NYC

Got something to shout about? A rant, cause, passion project, block party or victory you want the world to know about? Shout it from the rooftops by making your own web page in minutes with this handy remixable template. Then share it via email, Twitter, Facebook or URL. Easy! </rant>

Tool:ThimbleSkills: video, creative commons, HTML and CSS, web design Difficulty:Intermediate

GO!


Tumcus.png

Customize your Tumblr HTML Theme

Powered by Tumblr

Have you always wondered how to create a custom background for your tumblog? Or how you can add widgets to that lonely sidebar of yours? Learn how to customize your blog using Tumblr's HTML editor and conquer the blogosphere with your stylish musings.

Tool:Tumblr EditorSkills: HTML and CSS, web design Difficulty:Intermediate

Tumagif.png

Make an Animated Gif

Powered by Tumblr

If you are eager to get your spot in the Tumblr hall of fame, you better get your animated gif action into place. Become the master of the gifs by completing this project that will even make a llama giggle.

Tool:GIMP, Tumblr Skills: image manipulation Difficulty:Beginner

3dweb.jpg

Make a 3D WebPage

Powered by the New York Public Library

Create your own webpages with 3D or animated graphics with the NYPL Stereogranimator tool. Select images from the digital gallery and then add your own quotes and quips to make a humorous webpage.

Tool:ThimbleSkills: image manipulation, HTML, CSS Difficulty:Beginner

GO!




So... what do you think?

Are these beta webmaker projects:

  • Easy to use? Where do things feel confusing or broken? Is it easy to dive in and get started?
  • Helpful for learning? Do they serve the goal of teaching HTML, CSS and other webmaking basics?
  • Fun? That's crucial! Where are they most fun? Where do they lag?

Tell us what you think

Retrieved from "https://wiki.mozilla.org/index.php?title=Webmakers/Projects&oldid=436609"