Final Interactive Comic Art Project Documentation (Leon & Nimrah) – Jo

Project Team: Jaime and Haider
First and foremost, I struggled throughout this project, particularly because we had just started to begin learning about javascript, and it was really hard to grasp the concepts. I had absolutely no knowledge in javascript prior to this class and it was definitely a lot of pressure to have to try to take in so much information without even building up and getting to really practice even the html and css fundamentals over time. I think I expected too much progress within the given short time frame and my partner, Haider was capable of grasping the concepts so quickly that I was stressed out majority of the project trying to really teach myself the basics of javascript.
We both initially started off with the idea of creating a storyline comic project rather than an informative one like our other classmates but every storyline we could think of seemed to be rather boring. We started to think of things we had in common but we ended up choosing the idea of comparing both our different cultural backgrounds. We wanted to make this comic project a bit personal so we resorted to the idea of choosing to compare both our respective countries’ cultures and customs. At first, I was set on doing the project on the United States but I suggested that we would switch it to South Korea due to the fact that majority of people already are somewhat aware of American culture. I thought it would be interesting if we were to compare South Korea and Pakistan to make it more intriguing and new.
For our following meeting, we were able to meet up during the Chinese New Year break and we decided to brainstorm ideas for our new, official topic. We both first decided how many panels we would have as well as the topics we would use. We finally agreed upon doing our comic project being about the differences of our cultural backgrounds and how at NYU Shanghai we come together with the same goal of learning Web Development as well as the same future professional goal in New York, despite our cultural differences and majors . We proceeded to sketch a few rough visuals of our project as shown below.

Following the meeting, we agreed to complete sketches for all our panels(including Greeting, Clothing, Cuisine, Weddings, as well as our final panel at NYU Shanghai) by our next meeting.
The next step was to create our panels and Haider started working on the coding for the panels and I began to work on gathering all my assets for all the photoshop images we were to create. We thought about using bitmojis as our characters at first so I began creating cartoon images with the images below to best fit the bitmojis. I began utilizing Photoshop and using the same tools and methods I had before from our previous first Photoshop assignment. I was a bit nervous to begin editing the photos because we had way too many photos to edit in. However, I began to enjoy becoming familiar with it and I started to notice that I began to become more faster with the tools.


However, we quickly changed our plan to switch to realistic photos for our images to make it more personal as we include our family members as well. Below are half of the images I used to create my final images as the other half were done on the 5th floor lab and I could not save them for documentation. I would have to say that although there were only 4-5 images I have created on Photoshop, each photo took about 1-2 hours to edit due to the fact that I used maybe 5-7 images per final image and about 15 images for the cuisine one.  That is one thing I realized after the completion of this project, is that although our project looked brief and simple, there was alot of work and long hours behind it all. One thing for sure though, is that I became so familiarized with Photoshop and I started to enjoy it by the time I started to create the final NYU Shanghai image with me, Haider, Leon, and Nimrah in it. I think I had the most fun with that final image.

After all the Photoshop images were complete, I worked on inserting our greetings images into the first panel html as well and creating another sixth panel(NYU Shanghai) and started coding for it. I then started to work on the styling and design of the website. It took me about two hours to play around with the css and choose what colors, main photo, fonts, and borders to use as I take the design part very seriously!! I then proceeded to change all the previous buttons Haider had created to turn them into colorful big buttons. I proceeded to watch youtube videos, use W3schools, as well as coders’ blogs to figure out a way to make our button more bigger and more animated. It took me several hours all night to figure out how to create these simple buttons because I wanted to include shadows, gradients, and etc. Finally, I had figured out how after many minor mistakes and made sure every panel would link to the next panel after it was clicked.

In conclusion, I genuinely do not believe I will be able to do any coding without guidance from Google and Youtube videos because I do not know how I would have managed to even complete this project without help from them as well as Jiwon and Haider. After the completion of this project, I realized how crucial and helpful it was for me to work in a pair group and split the work. One thing I definitely learned to enjoy was photoshopping the photos as well as the styling of the webpage. Overall, I really enjoyed this project particularly because of our project theme and me and Haider worked extremely well as a team. I also really appreciated the genuine critics from the two TAs after our presentation and believed that if we had used those changes into our project, it would’ve made a significant difference in the experience for the users. 



Kirby Ferguson TED Talk Response (Leon and Nimrah) – Haider Ali

There’s no question that all artists (and certainly all individuals who are creative for a living) are influenced by everything around them. In fact, it’s often other works that inspire us to create in  the first place. If we already borrow so much from our predecessors, he argues, we should stop considering this “stealing.” Some of the most successful people are doing this every day — they don’t worry about whether they are doing something “original,” because they, like Kirby, believe that originality doesn’t really exist — we simply rework what already exists in our own way. I would like to argue by saying yes people get influenced by things around them, therefore, but to state that originality doesn’t exist is just a mere generalization. We have numerous (historical and present day) examples around us who have been pioneers in their respective fields.
Ferguson shows that our cognitive bias for “loss aversion” makes us willing to take others’ ideas, but furious when others take our ideas and build on them (cue Steve Jobs saying “I’ve always stolen shamelessly from the best” and contrasted with his vow to “go thermonuclear on Android” because “It is a stolen product.”) We rationalize that the stuff we take from others is just exploring. Overall, I really enjoyed the TED Talk as it allows me to perceive things that I use/know of in a completely different manner, that I never thought of before watching this TED Talk.

Interactive Comic Art Project Documentation (Leon and Nimrah) – Haider


1) Initially, Jaime and I were clueless about where to start from. A lot of ideas popped up into our minds but nothing seemed original/unique or happened to stand out. After 2-3 days, I came up with the idea of showing cultural differences between Slavic countries (Bosnia, Slovenia, Croatia, Serbia, Czech Republic, Slovakia, Russia etc) and the United States. I was pretty excited about this idea but as a result of my conversation with Jaime, I realized that there is not a lot that I could add to the Slavic countries section, and also it would not be unique because both of these regions signify the Western World. After that, both of us decided to show cultural differences between the United States and Pakistan, since Jaime currently lives in the US, and I am from Pakistan. We thought we could use that idea to our competitive advantage and show the differences, but even then idea sounded too monotonous since everyone knows about the United States. After thoughtful consideration, Jaime proposed with the idea of using South Korea instead of the US in order to show relative differences between two countries (South Korea and Pakistan). At that very moment, I figured out that Jaime is a Korean-American.

2) First of all, we wrote down our ideas on paper, where each one of us drew panels on paper and wrote a description for each panel. Both of us decided to show a division within each panel (one for South Korea and the other one for Pakistan). We just happened to decide left-hand side for South Korea and right-hand side for Pakistan. After meeting up and discussing our idea in detail we planned to sketch on our panels so that each one of us would have a clear picture about how to go about the project.


3) After sketching the images we decided to divide our comic into five different themes – Greetings, Clothing, Cuisine, Weddings, and our last panel depicting the theme of NYU Shanghai. We wanted to show that despite these differences and coming from two completely different countries, how Jaime and I are still similar in so many ways as we are both at NYU Shanghai taking Communications Lab to learn about the foundation of the ‘Web Development’. By working on this project, we also figured out that how both of us basically share the same professional goal (which is to work for the corporate world) despite the fact that we are studying things completely unrelated to Business; Media Culture & Communications (Jamie) and Political Science (Haider Ali).

4) Last Saturday, I started working with the code for our comic project, I first started with HTML and CSS. In my HTML code, I used <div></div> code in order to differentiate between the headings of each of my panel. Within each panel, I created two equally sized white blocks (inside which I could insert a picture). I created two blocks for each of my panel instead for the last one where I only created one single block, as we wanted to show how our differences mended together by taking Communications Lab. I also stylized the webpage by using CSS.

5) After realizing that the white block would eventually fill up with pictures, I removed the white blocks from each panel as having white blocks made it difficult for me to put a picture within the specific domain of each block, it is something that I personally struggled with a lot. I tried really hard adjusting the picture by playing around with the CSS styling of each picture that I was using but that never worked.

6) Both Jaime and I decided that we would use Photoshop for our images. We wanted to use bitmoji first but then decided to stick with our actual faces. In order to make things realistic, we preferred not to add different types of effects to our photos.

7) I first made the Photoshop Image for the Greetings section in which I inserted Jaime’s face on to another body (that is bowing 45 degrees to greet) followed by an image for Cuisine, Wedding. I made two Photoshopped images for Wedding as seen below.




8) Following that Jaime also started photoshopping the images for her part. The first image she photoshopped was of the Wedding scene in Korea. When I placed that image next to Wedding picture in Pakistan – both of the images appeared to be really different in size and shape. Since I did not want to ask Jaime to change her image, I ended up changing my image by first calculating the pixels of the Wedding image that Jaime used (700 width by 600 height). After that, I had to either change the image size or completely make a new Photoshop image so that each image has the same dimensions. I also told Jaime about that following which she made all her images under that dimension.





9) After inserting all our images, I figured out that we have to make at least three web pages for our website. Upon knowing that i made five different HTML, CSS, and Javascript pages and ultimately linked them together which was quite tedious. We made our comic project interactive by using JavaScript. I used Javascript so that once someone hovers over an image the size of that image changes and at the same time text pops up under that image. One such example is that when someone would hover their mouse on Greetings in Pakistan – it would show the significance of saying Asalaam O Alaikum in Pakistan. I used the function display Text and function display None for this interaction. Initially, I wanted to show text on the image without actually changing the size of the image, but I had difficulty pulling that off. In the end, I settled down for showing text beneath each image. Another reason why my image decreased in size instead of increasing is because I thought that it is too mainstream to make it look bigger so in order to try something new I decreased the size instead of increasing it. The rationale behind showing text under each image stems from the fact that we wanted to highlight the significance of each of our theme so that the audience can get a better understanding of each and everything that is happening in pictures (within each panel).

10) I also added the button tag. In the end, Jaime worked on the design of the website and made changes to the background color, button size and etc. I hope that you guys liked our Interactive Comic Art because both of us put in great amount of effort into this project. This project is also special to us because we are sharing a significant part of our identity with everyone. Although it was painstakingly tedious to work on this project, nonetheless I learned a lot.

Week 6: Embrace the Remix

This was one of the best videos I have watched so far recently and I could not agree more with Ferguson. I believe that just like we are the mix of the DNA of our parents with slight variations, so are the great works and inventions as they are revered and transformed by new inventors and artists. As Ferguson stated, “our creativity comes from without, not from within. We are not self-made.” We are certainly dependent on one another as our society has come this far with the advancements due to the expansion on the works before us. I agree with Ferguson’s statement of the three fundamental elements of copy, transform and combine as there is in fact NOTHING that is truly original. It is a fact that every single thing, including the most creative and innovative things are created from numerous influences. As a fashion enthusiast, I cannot help but think about fashion designers who have “muses” that are usually the source of inspiration for the designers or from famous art. They are known for taking inspiration from famous art very often from Museums. Many fashion designers have claimed to have been inspired by famous art of Artists such as Saint Laurent inspired by Mondrian, Salvatore Ferragamo’s Tirassegno inspired by Kenneth Noland’s Blue Extent, or Rodarte inspired by Van Gogh’s flowers. Another example is the Migos flow in the rap industry in which many songs are created using this triplet flow that Migos’ supposedly started. However, with research I found out that this triplet flow has already been used since the 1980s but Migos had recreated it and implemented it into rap music. This certainly shows that whether intentional or not, our works are inspired by previous influences and that nothing is truly original. Simply put, even our college research assignments are inspired by multiple ideas and sources and thus created into our own work.

Week 4- Javascript Exercise 1 (Leon & Nimrah) – Jo

My link:

First off, I had a pretty difficult time starting this assignment because I honestly did not know where to begin. To be clear, I did not understand which information would be put into the html section and which would be put into the javascript tab. At this point, I did not clearly even understand the distinction between class and id either to be honest and I had trouble taking in all the information from lecture too. So, I met up with Leon and it definitely helped a lot but it was still a little hard to grasp and I forgot the things I was told by Sunday. Therefore, I made another appointment with Jiwon for today(Tuesday). Finally, I understood what was going on and I wondered why I had struggled initially.
My first step was to figure out which event to wait for. I decided to change the header background as well as the text content with an onclick button. I proceeded to create a new function and wrote the instructions inside of that function and gave that function name as value of the event. I changed the background color to blue as well as the text to “AH. CUTENESS OVERLOAD. I CRI.” I did the same event for changing the image and created a new function as well. I changed the first image to the fourth image. My final step was to create a pop-up window on the click of the button. I used the button tag to create the event followed by the script tag with the function inside. I created an additional html file titled bom.html and calling it with in order for this file to open when the button was clicked. Lastly, I added the width and height. Below are screenshots of the steps I took to complete this homework.

Week 3: 2 Interactive Websites (Leon & Nimrah) – Jo

The first website I thought of in finding an interesting interactive website was the movie, Lady Bird’s official website. I remember coming across the website when the movie first came out because I wanted to know more about the movie. First and foremost, I really like how the entire background of the page is short scenes from the movie accompanied by calming music as this really does a good job in providing the visitor with a glimpse of what the movie is like. The page layout is simple and straightforward in helping the user navigate the website effortlessly. However, the most fascinating part about this website is the quiz that they encourage visitors to take. It helps to trigger past personal memories of each visitor and creates an engaging user experience. The main question of the quiz is “what memories of home do you cherish” and it provides you with about ten cards in which they all possess a specific scene related to the topic of the card. You can view each specific scene related to the topic and you are given the choice of either taking it or leaving it by dragging the cards. My result was to “call your mom: don’t forget the place that made you.” This website is so successful in promoting the film as it makes the experience for the visitor so personal. I personally watched this film because of this quiz back in November.

The second website I chose was a website call Un(trafficked) One Girl’s Life is In Your Hands. This website raises awareness about sex-trafficking in India as it helps the user learn how wicked and vile some areas of the world can be. The main page definitely creates suspense for the user with its title as well as the neon maze background and does an excellent job in leading the user into entering into the site to help save a character from human trafficking through choices. It provides the user with information on what could have happened if the user made a different choice. Overall, the website is very user-friendly and it’s realistically a very informative website that can help spread awareness to people all across the world. I believe that we need more sites like this to be created and shared.

Week 3: HTML CSS Link Website (Leon & Nimrah) – Jo

This was my very first CSS project and I think I did a decent job of styling my html website. I specifically chose to write about “3 Fall Wardrobe Essentials Every City Fashionista Needs to Own” is because I am highly interested in fashion and I have always wanted to write my own blog. Although I kept the content very brief and simple, I would like to keep practicing html and css and someday launch my very own fashion blog or website. I also attempted to do some cool animation styling, but failed to do so.. I would definitely love to learn deeper into css! Other than that, styling my website took quite some time to make it come out the way I wanted it through many trials but I got the result I wanted.

First of all, I added more writing to my html, changed the heading, and added more images.
I used <div> function to set up my layout with header, content, and footer and used the example css style we did in class as a guide to help me.
I proceeded to play around with all the font styles, sizes, widths, heights, padding, and margin.
I definitely had the most difficult time with the width, height, and margin in order to keep everything centered and balanced perfectly the way I wanted all together. The content part of my website constantly failed to keep aligned with the header in the center even though I centered it, however, as soon as I added the margin to 0 auto, it somehow came together?  I ended up choosing width 880px and auto height for everything. Below I will add screenshots of each step I took for my css style.

HOWEVER, I had much trouble trying to get a link to upload onto this post. Although, I successfully uploaded it onto cyberduck into my Week 3 folder, I am still struggling to find the correct way to write out the link in order to load my page. I will need to ask Leon and Nimrah in class today. In the meantime, this is a screenshot of my website!

Week 3 Photoshop and Response to McCloud (Leon and Nimrah) – Jo

Process of my Photoshop image.

This was my very first photoshop experience and I have to say that it really was not nearly as bad as I expected. I have been avoiding photoshop basically my entire life and I finally faced my fear. However, I got the feeling that I kind of guessed my way through all these different editing tools and somehow made it work.

The first step was to first open my background image of a small area in Xintiandi. I specifically chose this location for my frequent trips to Xintiandi and it also being my favorite place to go here in Shanghai for when I am home sick. I noticed that the area is always pretty quiet and quite vacant which is quite nice but I wondered how much more alive and exciting the place would be with maybe a street vendor and entertainer scattered throughout the area. So, I decided to add a female fire performer and a street food vendor to liven up the area. I believe I made a new layer and opened the performer image. I used the magnetic lasso tool to cut out the performer without the background but then I ran into a problem. I was to somehow make this cut-out image appear on the background image but how was I supposed to do that when it was on different browsers. In all honesty, it took me about 10 minutes to figure this out and I ended up just searching up a video on how to do so. After a long 10 minutes of trial and errors, I dragged the performer image browser into the main background browser with the move tool until the two browsers were adjacent and I dragged the cropped part of the performer image onto the background image. I then adjusted the size of the performer image to best fit the background image with the size adjustment on the right side of the application. After, I proceeded to erase the rest of the remaining background portion left on the cropped performer using the background eraser tool. As soon as I was done, I repeated the same process with the street vendor image and I finally used the blur and smudge tool to blur/smudge the harsh lines of the street performer as well as the fire to help blend it into the background. Below are the three images used to create my final photoshopped photo as well as the final result.

Response to “Understanding Comics” Ch 1-4

Unfortunately, I fall under the category of the majority of people stereotyping comics as childish cartoons read solely for the purpose of wasting time. I had no intentions of ever reading a comic book before but I am relieved that this course has yet again helped me to open up to another new subject following Photoshop and coding. Overall, I genuinely really enjoyed this book so far as it was exceptionally fun and engaging and McCloud did an outstanding job of grabbing my attention as well as explaining all of these new, different complex ideas I have never heard of through his humor and eye-catching, clever illustrations. It honestly felt as if I were following the character throughout a movie.  The idea that really struck me the most was this concept of closure which I have not once ever even considered thinking about. Even with all these advanced technologies, we really do not have any guarantee that anything exists outside of what our five senses tell us. Not a single person on this planet has gone to every single place in this world and yet we still knows certain places exist through faith. The Moroccan example he used is similar to how before I decided to come to Shanghai, I have never been here before but I took it on “faith” as mentioned in the book that there really is a Shanghai. Now that I come to think of it, I had an idea of what this city might be like through the dependence of this “closure” and it is quite insane if you really think about it. Just like that, it is quite fascinating how through our active imagination, we are capable of consciously filling in the gaps between the panels to create our own interpreted, complete story. Although there is a blank gap in between these panels, we as readers assume that something has happened in between and we continue to create something and it’s incredible. 

Week 2: “The Medium is the Message” (Leon and Nimrah)- Jo

Simply put, Mcluhan’s main point is that the medium itself can carry the power and meaning in itself rather than in the content as it changes the way we think more than anything else. Mcluhan believes that the way media is structured and the way it affects our society is perhaps more relevant than the content. He looks at the medium as an “extension of man” in which he believes that the medium enhances our inabilities as we are able to convey our ideas, opinions, and feelings through the use of television, internet, and newspapers. Depending on the type of medium the message is sent through can determine the way the agent receives it. Mcluhan in a sense helps to underline the complexity as well as the effects of technology on society that we tend to overlook on as we only focus on the obvious. For example, when we think about television, we generally know its properties, functions, as well as its advantages and disadvantages but we fail to realize how television as a medium has affected us growing up. Why are we the way we are now? We grew up with television occupying our attention for hours daily and as a result, we were taught a different way of being human as our exposure to this medium has altered us all. It may be highly possible that we have spent more time with this type of medium than with our own families or friends. Television helped us form ideas and values and has deeply affected our attitudes, beliefs as well as behaviors throughout our lives. If I think about it, Mcluhan’s concept is actually pretty difficult to grasp and made me think about all these different types of mediums around me in a different way and I cannot help but think whether our blog posts would have a bigger impact on Leon and Nimrah if we were to record it with our voices instead of typing it.

Week 1: “As We May Think” and “Long Live the Web” (Leon and Nimrah) -Jo

In “As We May Think,” Bush astoundingly predicts the science of the future, if not, almost precisely as he places his attention on the concept of expanding the human memory and capability to systemize, classify, and recall all information. Similarly to E.M. Forster in “The Machine Stops,” Bush was capable of making accurate predictions about the future although this article had been written in the mid 1940s. He praises the sciences and claims that Science has provided us with an instantaneous communication amongst humans as “it has provided a record of ideas and has enabled man to manipulate and to make extracts from that record so that knowledge evolves and endures throughout the life of a race rather than that of an individual.” (Bush)  It’s truly astonishing as to how he predicted that cameras would be as tiny as nuts as they would have the ability to naturally tune the contrast or exposure and how they would be able to store over 100 photos. He also predicted that “the Encyclopedia Britannica would be reduced to the volume of a match box,” as well as the further extent of the human experience(Instagram, Facebook, etc.). This article helps to underline the complex and prolonged processes of acquiring the technological developments of today as we fail to notice the immense amount of time and energy it took to create such advancements. For example, we take photos or post on social media and take for granted or do not even think to realize all the work it took for us to simply snap a photo and share it online. I believe that this piece helped bring light to the fact that many of us today perceive the internet to be like the air we breathe as if it was something that had always existed and that we should learn to appreciate and understand the science that has contributed deeply in the expansion of our source of knowledge.

I believe Tim Berners-Lee’s “Long Live the Web” is highly applicable to the recent Net Neutrality issues of today’s world as the intention of the creation of the World Wide Web is gradually becoming eliminated.  Creator of the great World Wide Web, Lee highlights the potential dangers as well as his own worries regarding the future development of the Web as he claims that “the Web could be broken into fragmented islands” as filters and constraints and the government’s web monitoring come into play. The World Wide Web is becoming a medium restrained by large corporations and governments rather than the original purpose of the individuals having control over it. For example, the large Internet providers as well as corporations in the States will have the power to control the speed or what we have access to after the repeal of Net Neutrality. Moreover In China, we have to use a VPN in order to have access to the social media platforms such as Facebook, Twitter, or even Google as China’s government blocks these sites. This is particularly unfair as it ceases China’s global communication with other parts of the world and I strongly believe that this is unjust as everyone should have the right to have control over their usage and information access without interference.