Events/London Learning Jam/Projects: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(35 intermediate revisions by 4 users not shown)
Line 1: Line 1:
<p>__NOTOC__
__NOTOC__
http://farm8.staticflickr.com/7206/6907867555_eeda62c030.jpg
http://farm8.staticflickr.com/7206/6907867555_eeda62c030.jpg
</p>
= Help test these new Thimble Projects =
<h1> Help test these new Thimble Missions </h1>
<b>Help kick the tires on the beta projects below.</b> Are they easy to use? Helpful for learning? Fun?<br>  
<p><b>Help kick the tires on the beta missions below.</b> Are they easy to use? Helpful for learning? Fun?<br />  
 
</p><p><br />
<br>
</p>
<h3> What are these "Thimble Projects", anyway? </h3>
<h3> What are these "Thimble Missions," anyway? </h3>
<b>Learning by making</b>. Thimble projects are designed to help you make something amazing on the web fast and learn webmaking skills in the process. <br><br>
<p><b>Learning by making</b>. Thimble missions are designed to help you make something amazing on the web fast.  
<b>Side-by-Side editing</b>. Thimble is a two pane editor that allows you to edit the code on the left and see your changes on the right. <br><br>
</p><p><b>We're preparing a set of these missions 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.
<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 making projects that are easy, social and fun. <br>
</p>
 
<h1> Webmaker Beta Projects: test 'em out now</h1>
= The (beta) Projects =
<p><br />
 
</p><p><img src="/images/7/7b/Animalbuilder.jpg" _fck_mw_filename="Animalbuilder.jpg" _fck_mw_location="left" _fck_mw_width="270" alt="Animalbuilder.jpg" class="fck_mw_left" />
 
</p>
===Awesome Animal Builder===
<h3>Awesome Animal Builder</h3>
[[Image:animalbuilder.jpg|300px|left]]
<p> Mix and match animal body parts to create hybrid animals- think: Elephwhal or a Bunnel! Flex
<h3>by The London Zoo</h3>
</p>
Learn about different species and then mix and match animal body parts to create your own - think: Elephwhal or a Bunnel! <br>  
<p><b>Tools used:</b>Thimble <b>Skills:</b> HTML Basics, CSS, Conservation <b> Difficulty:</b>Beginner
'''Tools used:''' Thimble <br>
</p><p><br /><br /><br />
'''Skills:''' HTML Basics, CSS, Conservation<br>
<img src="/images/e/e3/Webarcade.jpg" _fck_mw_filename="Webarcade.jpg" _fck_mw_location="left" _fck_mw_width="270" alt="Webarcade.jpg" class="fck_mw_left" />
'''Difficulty:''' Beginner<br><br>
</p>
 
<h3>Awesome Animal Builder</h3>
[http://thimbletest.org/en-US/projects/nesta/zoo Take the Mission]
<p> Mix and match animal body parts to create hybrid animals- think: Elephwhal or a Bunnel! Flex
<br>
</p>
<br>
<p><b>Tools used:</b>Thimble <b>Skills:</b> HTML Basics, CSS, Conservation <b> Difficulty:</b>Beginner
<br>
</p><p><br /><br /><br />
 
<img src="/images/e/e3/Webarcade.jpg" _fck_mw_filename="Webarcade.jpg" _fck_mw_location="left" _fck_mw_width="270" alt="Webarcade.jpg" class="fck_mw_left" />
 
</p>
===Wickedpedia===
<h3>Awesome Animal Builder</h3>
[[Image:coverimage_wickedpedia.png|300px|left]]
<p> Mix and match animal body parts to create hybrid animals- think: Elephwhal or a Bunnel! Flex
<h3>by Steve Bunce and Oliver Quinlan (Plymouth University)</h3>
</p>
Build your own celebrity bio pages, including all the scandals and gossip that no one knows about!  <br>  
<p><b>Tools used:</b>Thimble <b>Skills:</b> HTML Basics, CSS, Conservation <b> Difficulty:</b>Beginner
'''Tools used:''' Thimble<br>
</p>
'''Skills:''' HTML, Linking, Content Support <br>
'''Difficulty:''' Intermediate<br><br>
 
[http://thimbletest.org/en-US/projects/nesta/wickedpedia Take the Mission]
<br>
<br>
<br>
 
==Supporter 2 Reporter ==
[[Image:s2r.png|300px|left]]
<h3>by Radio Waves</h3>
Build your own news media page, including your own reporting video, about at topic you care about, such as the Olympics. <br>  
'''Tools used:''' Thimble<br>
'''Skills:''' Blogging, Reporting, Content Layout, Curating, Branding, HTML, CSS <br>
'''Difficulty:''' Beginner<br><br>
 
[http://thimbletest.org/en-US/projects/nesta/s2r/edit Take the Mission]
<br>
<br>
<br>
 
===Get off my Lawn===
[[Image:zombies.png|300px|left]]
<h3>by The Guardian and Goldsmiths</h3>
Clear the zombies away from your garden lawn. Build your own zombies!  <br>
'''Tools used:''' Thimble<br>  
'''Skills: CSS <br>
'''Difficulty:''' Intermediate<br><br>
 
[http://thimbletest.org/en-US/projects/nesta/zombies/edit Take the Mission]
 
<br>
<br>
<br>
 
 
===Bunnies===
[[Image:bunny.png|300px|left]]
<h3>by Ben O'Steen</h3>
Save the bunny from danger or else he will be squashed!  <br>  
'''Tools used:''' Thimble <br>
'''Skills:''' HTML Basics, Imaging, Positioning <br>
'''Difficulty:''' Intermediate<br><br>
 
[http://thimbletest.org/en-US/projects/nesta/bunnies/edit Take the Mission]
<br>
<br>
<br>
 
===Cube===
[[Image:cube.jpg|300px|left]]
<h3>by Laurian Gridinoc</h3>
3D is all the rage these days - learn how its done in CSS3! Build your own 3D cube from scratch.  <br>  
'''Tools used:''' Thimble<br>  
'''Skills:''' HTML, CSS, Trigonometry <br>
'''Difficulty:''' Advanced<br><br>
 
[http://thimbletest.org/en-US/projects/nesta/cube/edit Take the Mission]
<br>
<br>
<br>
 
===Readability===
[[Image:readability.jpg|300px|left]]
<h3>by Doug Belshaw</h3>
Maybe it's bad website design or maybe you are just getting old, but some webpages are impossible to read. Edit the HTML and CSS in this webpage to make it legible. <br>  
'''Tools used: '''Thimble<br>  
'''Skills:''' HTML, CSS, Typography <br>
'''Difficulty:''' Beginnner<br><br>
 
[http://thimbletest.org/en-US/projects/nesta/readability/edit Take the Mission]
<br>
<br>
<br>

Latest revision as of 18:11, 30 May 2012

6907867555_eeda62c030.jpg

Help test these new Thimble Projects

Help kick the tires on the beta projects below. Are they easy to use? Helpful for learning? Fun?


What are these "Thimble Projects", anyway?

Learning by making. Thimble projects are designed to help you make something amazing on the web fast and learn webmaking skills in the process.

Side-by-Side editing. Thimble is a two pane editor that allows you to edit the code on the left and see your changes on the right.

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 making projects that are easy, social and fun.

The (beta) Projects

Awesome Animal Builder

Animalbuilder.jpg

by The London Zoo

Learn about different species and then mix and match animal body parts to create your own - think: Elephwhal or a Bunnel!
Tools used: Thimble
Skills: HTML Basics, CSS, Conservation
Difficulty: Beginner

Take the Mission



Wickedpedia

Coverimage wickedpedia.png

by Steve Bunce and Oliver Quinlan (Plymouth University)

Build your own celebrity bio pages, including all the scandals and gossip that no one knows about!
Tools used: Thimble
Skills: HTML, Linking, Content Support
Difficulty: Intermediate

Take the Mission


Supporter 2 Reporter

S2r.png

by Radio Waves

Build your own news media page, including your own reporting video, about at topic you care about, such as the Olympics.
Tools used: Thimble
Skills: Blogging, Reporting, Content Layout, Curating, Branding, HTML, CSS
Difficulty: Beginner

Take the Mission


Get off my Lawn

Zombies.png

by The Guardian and Goldsmiths

Clear the zombies away from your garden lawn. Build your own zombies!
Tools used: Thimble
Skills: CSS
Difficulty: Intermediate

Take the Mission





Bunnies

Bunny.png

by Ben O'Steen

Save the bunny from danger or else he will be squashed!
Tools used: Thimble
Skills: HTML Basics, Imaging, Positioning
Difficulty: Intermediate

Take the Mission


Cube

Cube.jpg

by Laurian Gridinoc

3D is all the rage these days - learn how its done in CSS3! Build your own 3D cube from scratch.
Tools used: Thimble
Skills: HTML, CSS, Trigonometry
Difficulty: Advanced

Take the Mission


Readability

Readability.jpg

by Doug Belshaw

Maybe it's bad website design or maybe you are just getting old, but some webpages are impossible to read. Edit the HTML and CSS in this webpage to make it legible.
Tools used: Thimble
Skills: HTML, CSS, Typography
Difficulty: Beginnner

Take the Mission