Moz Cafe December 2012

  • 43 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
43
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Mozilla is a non-profit that believes everyone should be able to make and share with the open web. But creating, hosting or tweaking your own stuff is often still too difficult—with obstacles like learning HTML and CSS, struggling with servers to preview your work, or figuring out where your content will live online. Thimble clears away those barriers, making it easier to create your own projects quickly and learn web skills in a way that’s easy, visual and fun.
  • Mozilla Thimble makes it ridiculously simple to make stuff on the web. Thimble lets you make your own real, fully functional web pages in minutes. Then host and share them with a single click. Sharpen your web skills along the way. Easy, huh?
  • Features • Thimble makes it so so simple to create your own webpages • Thimble allows you to write and edit html and css with in your browser • You can instantly preview your work • You can host and share your webpage with a single click • Helps checking your work to spot the errors to be rectified instantaneously
  • Thimble isn’t just a learning tool or toy. It lets you create your own real, fully functional web pages—for your band, your pet rock, your business, or whatever—and then share them with a click. There are also plenty of starter projects and templates to help you make something amazing quickly.
  • Thimble makes it easy to work with HTML and CSS, the building blocks of the web, even if you’ve never done it before. Just type on the left, then see what the finished page will look like on the right. Thimble also helps check your work as you go, providing a simple “spell check” for code to help you spot and squash errors instantly.
  • 14 Projects
  • To see what the web is made of
    Remix and change favorite web pages
    Share the creation with friends
  • Interaction between Web, Content and the User
    hackable, linkable, remixable, and connected to the world around it
    Popcorn Maker is built entirely using open web elements, written in HTML, CSS and Javascript
    Popcorn Maker is awesome. You can use it to create your own interactive newscasts, video memes, pop-up videos, multimedia reports, fan videos, guided web tours and more.
  • Popcorn is still in development
    Popcorn• Popcorn makes video to work like a web• We do have a huge wealth of web content but the problem is they are static• People make it and we use it• Simply , no roles for users to play• popcorn helps in creating a web content that will have real time interaction between the content and the user• Popcorn.js – backbone of Mozilla popcorn project
  • Popcorn.JS, a library from Mozilla which makes it very easy to manipulate a webpage based on the current position of a video. This allows you to create rich “hypermedia” experiences around your video content.

Transcript

  • 1. Welcome To MozCafe Hyderabad December 2012
  • 2. Introduction to Mozilla Webmaker Vivek Kiran Kendriya Vidyalaya, Gachibowli Twitter:@vivekbkiran Blog:http://cloudgeeks.blogspot.in Email:vivek.kiran@outlook.com Srikar Ananthula Wipro Technologies, Hyderabad Twitter: @ananthulasrikar Blog:http://ananthulasrikar.wordpress.com Email: ananthulasrikar@gmail.com
  • 3. VIDEO “Meet the Webmakers”
  • 4. Mozilla Webmaker Help you make something amazing with the web. The goal: help millions of people move from using the web to making the web — and to create a more web literate planet.
  • 5. Mozilla Webmaker • You don’t have to be a professional coder to be a webmaker • You shouldn’t have to be a professional web developer to understand how the web works — or make your own stuff • Mozilla Webmaker helps to level up your skills and go further, “beyond upload”
  • 6. Mozilla Webmaker Tools: • Thimble • X-Ray Goggles(Hackasaurus) • Popcorn
  • 7. Mozilla Thimble webmaking made easy
  • 8. Thimble • Write and edit HTML and CSS right in your browser • Instantly preview your work • Host and share your finished pages with a single click
  • 9. Start from scratch
  • 10. Pick a project
  • 11. https://thimble.webmaker.org
  • 12. Demo
  • 13. < Mozilla Hackasaurus > Remix, Make and Share
  • 14. Hackasaurus • Hackasaurus makes it so easy to change and webpage like a magic • You can create your webpages to share with your friends • These things can be done within the browser • Includes a tool called x-ray goggles
  • 15. (X-Ray Goggles) • X-Ray goggles allow us to understand "what the web is made of " (i.e) building blocks of the webpage • To remix , change and share their favorite webpages
  • 16. Demo
  • 17. Mozilla Popcorn Maker “Video beyond the box”
  • 18. Popcorn Maker 101
  • 19. Popcorn Maker makes it easy to enhance, remix and share web video. Use your web browser to combine video and audio with content from the rest of the web — from text, links and maps to pictures and live feeds.
  • 20. https://popcorn.webmaker.org
  • 21. Demo
  • 22. “The HTML 5 Media Framework”
  • 23. Popcorn.js | The HTML5 Media Framework
  • 24. Popcorn.js is an HTML5 media framework written in JavaScript for filmmakers, web developers, and anyone who wants to create time- based interactive media on the web. Popcorn.js is part of Mozilla's Popcorn project.
  • 25. Popcorn makes video work like the web. We create tools and programs to help developers and authors create interactive pages that supplement video and audio with rich web content, allowing your creations to live and grow online.
  • 26. http://popcornjs.org/
  • 27. Vivek Kiran Kendriya Vidyalaya, Gachibowli Twitter:@vivekbkiran Blog:http://cloudgeeks.blogspot.in Email:vivek.kiran@outlook.com Facebook: www.facebook.com/geek.vivek Srikar Ananthula Wipro Technologies, Hyderabad Twitter: @ananthulasrikar Blog:http://ananthulasrikar.wordpress.com Email: ananthulasrikar@gmail.com Facebook: www.facebook.com/ananthulasrikar