Web Development Workshop 1.0 at KU-UBIT Nov 5th

(Muhammed Hasan Ahmed) #1

On 5th November, I along with the Co-Leads of Firefox at UoK Firefox Club Ebaad Ahmed, Salman Elahi, Kamran Tariq and the Club Lead of Firefox at SSUET Firefox Club Maqbool-ur-Rahim Khan held a Web Development Workshop at Umaer Basha Institute of Technology in University of Karachi. This whole workshop was the idea of Ebaad, Salman & Kamran and it was mostly conducted by Ebaad and Maqbool. Students from 1st and 2nd year of UBIT-KU were invited for this session.

The purpose of this workshop was:

  • Introduction of the Firefox Student Ambassadors Program
  • Teach students the basics of HTML5, CSS3, JavaScript
  • Show them how to convert a sample code written in above mentioned languages into an app for different mobile platforms, namely Firefox OS, Android and Windows Phone.

I started the session by telling students about:

  • Mozilla (History and Mission),
  • Firefox (Desktop, Android, iOS),
  • Firefox OS,
  • Mozilla Learning Network and it’s Tools (Thimble, X-Ray Goggles, Webmaker App for Android),
  • Contribution Opportunities (Localization, QA, SUMO, MDN, MozStumbling, etc.)
  • Firefox Student Ambassadors program (Firefox Clubs, Campaign Challenges, App of the Month Contest, Events, Recognition)

Then I forwarded the session to Ebaad. Ebaad started by introducing the basic concepts of Web Development. To explain about developing websites with HTML, CSS, JavaScript he used the following metaphor:

“When building a house you need to create it’s structure, to make the house beautiful you need to paint the house, to add utilities you need to add some tools and make sure they are working properly like Lights, Fans, etc. Similarly, in order to develop a website you need to create it’s structure using HTML, to make the website beautiful you need to add CSS for styling, to add different features in the website and make sure they are working correctly you use JavaScript.”

Ebaad Ahmed

From there on, Ebaad and Maqbool covered various Tags, Elements, Functions and Classes used in HTML, CSS and JavaScript respectively.

Maqbool-ur-Rahim Khan

The students were trying the code step-by-step as the workshop progressed on the lab’s PCs and were very attentive as shown below.

Now it was time to convert a sample code into apps for different mobile OS. Maqbool continued the session by telling the students that for Firefox OS, first they need to create the App Manifest file. He shared details about how to create the file and what information about the app are necessary to be shared in this file using the MDN article. Unfortunately at this time, the WiFi device stopped working. Luckily we had already opened all the links which we would need during the session in a browser earlier. So he followed this MDN article to show how to submit the app into the Firefox Marketplace. Finally, Ebaad concluded the session by showing how to convert the code into apps for Android and Windows Phone. He uses the Adobe Phonegap website to accomplish this task. But as the net was down, we were not able to upload the code for conversion.

At the end, Ebaad asked the students to join the Firefox Student Ambassador program and become more involved in the FSA program to host, attend & participate in the Firefox at UoK Firefox Club’s more upcoming activities & events in the next semester. All attendees were given the FSA Stickers. He also encouraged the students to dive deeper into Web Development by learning HTML, CSS, JavaScript on W3Schools. He also mentioned names of some Ebooks and posted their links on the Facebook Event Page later that day. He also posted his HTML & CSS slides there as well. Maqbool posted links for conversion of code into a Firefox OS app too.

Here is a group photo at the end of the workshop…

Ebaad Ahmed, Owais Karni, Maqbool-ur-Rahim Khan, Muhammed Hasan Ahmed, Kamran Tariq, Salman Elahi, Talha Saleem

Although we ran into some problems:

  • venue (we wanted to hold the workshop at the Seminar Hall which has a 100-150 person capacity but it was unavailable this semester as it was being renovated so we had to shift to a lab, however we have inquired and it will be available in the next semester)
  • time restriction (there was a class before and after our session),
  • internet problems due to which we were unable to upload the code
  • shortage of a Firefox OS phone (even if we would have been successful in submitting the app in Firefox Marketplace, we would had to show it on a Simulator and would not have been able to demo it properly as we do not have a Firefox OS phone yet, hopefully we will get one until the next time)

But all in all, the students who attended our workshop were very happy so the event was a success. Capacity in the lab was for 40 students but total 60+ students attended the workshop. Extra seats were unavailable but the students sat on tables or stayed standing. The FSAs who organized the event are still very motivated and want to rectify these problems in the next semester as they are looking to hold the Web Development Workshop 2.0 at KU-UBIT. We will go about 2.0 a bit differently with more time to cover the demos on all mobile OS phones, multiple WiFi devices instead of only one and maybe a bit more educated audience of 3rd and 4th year students who are already proficient with coding in HTML5, CSS3, JavaScript. Time will tell…

Before I windup my report, here are the after-party photos :smile:

(Francisco) #2

Hey @mhasan,

Great Report!!, thanks a lot for taking the time to write this detailed post-event report.

Just a couple of comments/thoughts (perhaps for next event?):

  • Does the metrics you estimated were fulfilled?
  • Would you say that the objectives were clear and it was accomplished?
  • Do you think that this kind of events could attract new contributors?, or is basically to teach the students how to code in the open web?
  • Have you thought in a follow-up for some of the participants?
  • Have you planned other events like this?

Again, thanks for all the efforts and the hard work you put in this event, and in the report. I would love to see more reports from other type of events. And I would like to see if we can help to do some follow-up and see how we can attract new volunteers through events.


(Muhammed Hasan Ahmed) #3

Hi @franc,

Thanks for appreciating the report. Please find my reply in-line…

The only metric we fell short of was the attendance and it was due to the shortage of seats in the lab and unavailability of the Seminar Hall which I mentioned in the 2nd last paragraph of my report. That metric would have almost been reached otherwise.

Our objective was to show the attendees how to submit the code in the Firefox Marketplace and run the app on Simulator. Similarly, we wanted to upload the code on Adobe Phongap website, convert it into Android & Windows Phone apps and then demo them live on the respective phones. But we were unable to accomplish this objective as we ran into internet problems at the lateral stages of the workshop. It had been working fine before as some students even installed & updated Firefox on their laptops prior to the workshop.

I think this kind of event is healthy in our community. Firefox OS phones were not launched in Pakistan that’s why there is very low awareness about Firefox OS. By holding App Development workshops for multiple mobile OS’es which are popular here (Android, iOS, Windows Phone) and adding Firefox OS in the mix rather than focus on itself alone, I think we will reach more audience specially students who are already into App Development and it will help in building their interest & curiosity in Firefox OS. If we directly hold a Firefox OS Workshop, I think the audience will be very low as they do not know about it. However I do admit that the workshop’s focus should be:

  • directly on how to add code for converting it into apps for different mobile OS rather than on teaching HTML5, CSS3, JavaScript languages from the scratch
  • on students who are already proficient in HTML5, CSS3, JavaScript rather than on beginners (as teaching them about these languages would take much more time and effort).

That did not cross my mind. I would love to hear your suggestions and feedback on how to improve in this regard.

Had it been only an HTML5, CSS3, JavaScript workshop I would have asked all attendees to create a Project using the new Thimble in 30-60 minutes by showing what they learned at the end of the event. But I guess it would have turned into a Thimble MakerParty.

In the start of this year, I held a similar kind of workshop on Firefox OS App Development at an institute with Maqbool where we covered the same topics like how to write code in HTML5, CSS3, JavaScript and then submitted a sample code into the Firefox Marketplace. But we ran into some issue maybe some errors during the process and were not able to resolve it right away.

Here are a few:

Previously, I used (and still do sometimes) to share all details about an event in the Event’s Page on Reps Portal.

Yes I would definitely need your help and suggestions in this regard.