IITK Workshop

362
-1

Published on

This was the slide accompaniment to a workshop I led at the Indian Institute of Technology in Kanpur in February 2009, as part of FOSSKriti. I reused these slides for different purposes, including talks I gave at GNUnify 2009 in Pune at the Symbiosis Institute.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
362
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Introductory Slide
    Who is Arun: history, etc.
    Who is Seth: etc.

  • Want people to be able to access internet services from their choice of platforms in a secure manner
    Want web developers to be able to innovative web applications
    Browser is your gateway to the net
  • Want people to be able to access internet services from their choice of platforms in a secure manner
    Want web developers to be able to innovative web applications
    Browser is your gateway to the net
  • Want people to be able to access internet services from their choice of platforms in a secure manner
    Want web developers to be able to innovative web applications
    Browser is your gateway to the net
  • Want people to be able to access internet services from their choice of platforms in a secure manner
    Want web developers to be able to innovative web applications
    Browser is your gateway to the net
  • Want people to be able to access internet services from their choice of platforms in a secure manner
    Want web developers to be able to innovative web applications
    Browser is your gateway to the net
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Participation is self-determination
  • Talk about the fact that tomorrow, there will be more demos and an HTML5 Demo

  • Talk about the fact that tomorrow, there will be more demos and an HTML5 Demo

  • Talk about the fact that tomorrow, there will be more demos and an HTML5 Demo

  • Talk about the fact that tomorrow, there will be more demos and an HTML5 Demo

  • Talk about the fact that tomorrow, there will be more demos and an HTML5 Demo






  • Talk About Open-Sourcing this image....
    Talk about SVG....
  • * Make Joke
    * Say Things Do Need to get Simpler
  • Show the Indian Flag Demo. Discuss other demos.





























  • IITK Workshop

    1. 1. Hacking The Open Web Arun Ranganathan Seth Bindernagel Mozilla Corporation IIT Kanpur, Feb. 2009
    2. 2. Mozilla is...
    3. 3. Mozilla is... • a global effort to promote choice & innovation on the Internet
    4. 4. Mozilla is... • a global effort to promote choice & innovation on the Internet • foremost, an advocate for users on the Web
    5. 5. Mozilla is... • a global effort to promote choice & innovation on the Internet • foremost, an advocate for users on the Web • an open source project with thousands of contributors
    6. 6. Mozilla is... • a global effort to promote choice & innovation on the Internet • foremost, an advocate for users on the Web • an open source project with thousands of contributors • the maker of the Firefox Web browser and the Thunderbird email client
    7. 7. Mozilla is... • a global effort to promote choice & innovation on the Internet • foremost, an advocate for users on the Web • an open source project with thousands of contributors • the maker of the Firefox Web browser and the Thunderbird email client • A Platform for Other Applications
    8. 8. K'iche Itza Islenskur EsperantoDeutsch English Afrikaans Frizona Italiano Magyar isiZulu Tagalog Polski Portuguese Sranankondre Arbërisht Català Español Føroyskur Svensk Suomalainen Papiamento Dansk Yucatec Français Российская český Nederlands Pomân Nors Ελληνικά ‫ﺭﺑﻴﻚ‬ Turkish )‫ﺳﻮﺍﺣﻠﻲ‬
    9. 9. The Open Web Is:
    10. 10. The Open Web Is: • A Collection of (Mostly) Unencumbered, Cross- Platform, Interoperable Standards
    11. 11. The Open Web Is: • A Collection of (Mostly) Unencumbered, Cross- Platform, Interoperable Standards • Available on different devices (Mobile, Desktop)
    12. 12. The Open Web Is: • A Collection of (Mostly) Unencumbered, Cross- Platform, Interoperable Standards • Available on different devices (Mobile, Desktop) • Open Source/Free Software Implementations
    13. 13. The Open Web Is: • A Collection of (Mostly) Unencumbered, Cross- Platform, Interoperable Standards • Available on different devices (Mobile, Desktop) • Open Source/Free Software Implementations •Distributed Extensibility
    14. 14. The Open Web Is: • A Collection of (Mostly) Unencumbered, Cross- Platform, Interoperable Standards • Available on different devices (Mobile, Desktop) • Open Source/Free Software Implementations •Distributed Extensibility •No “Single Vendor” Lock In.
    15. 15. What Is NOT Open?
    16. 16. What Is NOT Open? • Flash, Adobe Air
    17. 17. What Is NOT Open? • Flash, Adobe Air • Silverlight (Microsoft’s WPF)
    18. 18. What Is NOT Open? • Flash, Adobe Air • Silverlight (Microsoft’s WPF) • Optimizations for One Browser (Works Best on One Browser)
    19. 19. What Is NOT Open? • Flash, Adobe Air • Silverlight (Microsoft’s WPF) • Optimizations for One Browser (Works Best on One Browser) • You can help us with this!
    20. 20. What Is NOT Open?
    21. 21. The Breakdown of Modern Web Development
    22. 22. Some Visual Demos • SVG • Video (HTML5) • Transformations • Mixtures See https://library.mozilla.org/ for Web Graphics demos
    23. 23. Fast JavaScript
    24. 24. Text
    25. 25. Text
    26. 26. Text
    27. 27. Concepts: Canvas 2D • Unlike SVG, Canvas is entirely procedural. All graphics in JavaScript. Immediate Mode Graphics • Introduced in HTML5 • Has seen some very powerful applications built on it.
    28. 28. = + Sophisticated Grid-based Canvas Layout
    29. 29. No start-up delay
    30. 30. No start-up delay Available on mobile devices today
    31. 31. No start-up delay Available on mobile devices today Rendering fidelity with browser (especially important for typography)
    32. 32. No start-up delay Available on mobile devices today Rendering fidelity with browser (especially important for typography) No bridges necessary
    33. 33. No start-up delay Available on mobile devices today Rendering fidelity with browser (especially important for typography) No bridges necessary Not a plug-in
    34. 34. Beta 1.0 a Alph Beta Chrome’s V8 Safari’s SquirrelFish Extreme Firefox’s TraceMonkey Opera's Carakan
    35. 35. Jakob Nielsen Noted Usability Expert
    36. 36. “0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result. Jakob Nielsen Noted Usability Expert quot;1.0 second is about the limit for the user's ow of thought to stay uninterrupted, even though the user will notice the delay.
    37. 37. “0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result. Jakob Nielsen Noted Usability Expert quot;1.0 second is about the limit for the user's ow of thought to stay uninterrupted, even though the user will notice the delay. 0.1 second 1 second
    38. 38. “0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result. Jakob Nielsen Noted Usability Expert quot;1.0 second is about the limit for the user's ow of thought to stay uninterrupted, even though the user will notice the delay. 0.1 second 1 second
    39. 39. “0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result. Jakob Nielsen Noted Usability Expert quot;1.0 second is about the limit for the user's ow of thought to stay uninterrupted, even though the user will notice the delay. 0.1 second 1 second
    40. 40. Introduction to Bespin • Discussion of IDEs in general • Audience: Who Uses What, and Why?
    41. 41. The Editor of Our Dreams
    42. 42. The Editor of Our Dreams Accessible from anywhere Any device in any location
    43. 43. The Editor of Our Dreams Accessible from anywhere Any device in any location Simple to Use, like TextMate An editor, not an IDE
    44. 44. The Editor of Our Dreams Accessible from anywhere Any device in any location Simple to Use, like TextMate An editor, not an IDE Very fast Performance, performance, performance
    45. 45. The Editor of Our Dreams Accessible from anywhere Any device in any location Simple to Use, like TextMate An editor, not an IDE Very fast Performance, performance, performance Rock-solid real-time collaboration, like It just works SubEthaEdit
    46. 46. The Editor of Our Dreams Accessible from anywhere Any device in any location Simple to Use, like TextMate An editor, not an IDE Very fast Performance, performance, performance Rock-solid real-time collaboration, like It just works SubEthaEdit Integrated command-line, like Emacs or vi Fun like Quicksilver, social like Ubiquity
    47. 47. The Editor of Our Dreams Accessible from anywhere Any device in any location Simple to Use, like TextMate An editor, not an IDE Very fast Performance, performance, performance Rock-solid real-time collaboration, like It just works SubEthaEdit Integrated command-line, like Emacs or vi Fun like Quicksilver, social like Ubiquity “Self-hosted” environment, like Emacs For extreme extensibility, but with JavaScript!
    48. 48. Expensive Server-side Code Analysis
    49. 49. Expensive Server-side Code Analysis dynamic language Crack the nut?
    50. 50. Expensive Server-side Code Analysis dynamic language Crack the nut? Extreme code intelligence
    51. 51. Dave Thomas Noted Software Expert, Author, and Publisher
    52. 52. “Programmers, like poets, constantly start with a blank sheet Dave Thomas Noted Software Expert, Author, and Publisher of paper and they construct things purely out of their imagination. It’s difficult work; if you don’t love your tools, you’re going to start resenting what you’re doing, and that will show in your work.
    53. 53. Dave Thomas Noted Software Expert, Author, and Publisher “You must love your so ware tools.”
    54. 54. Live Coding Samples Canvas Indian Flag var ctx = canvas.getContext(quot;2dquot;); ctx.fillStyle = rgb(_, _, _); ctx.fillRect(x, y, width, height); // ctx.clearRect(x, y, width, height); // Bonus: make the Ashoka Chakra
    55. 55. Live Coding: jQuery // Everything is selected $(“.article .thebody”).hide(); //or $ (this).parents(“ul”).prev(“.thebody”).toggle
    56. 56. Reference • Demos: http://arunranga.com/ presentations/2009/IndiaFeb/ • Code: http://developer.mozilla.org/ (do a search for stuff) • Bespin: http://bespin.mozilla.com/ Text • jQuery: http://jquery.com/ • More jQuery: http://simonwillison.net/2007/ Aug/15/

    ×