Tuesday, May 3, 2016

Air-B-N-Me

Although I was uncertain of what to expect from this experience, I must say that I had a fun time navigating our class NetProv, Air-B-N-Me. Prior to taking this class, I had never heard of NetProv (aka Networked Improvisation), and I had no idea what to expect. Even having grown up in the midst of all of this technology, it's still mind-blowing to consider the possibilities that the Internet has to offer. Networked participation can link together people from all over the world for so many different reasons, and this was a cool way of exploring those possibilities.

I think the concept of Air-B-N-Me was a fun spin off of Air-B-N-B, and I honestly wish it was a real life possibility. How wonderful it would be to check out of the boring or unpleasant times, and into a different kind of life. Truly, a way to "walk a mile in someone else's shoes." The work that went into the story behind Air-B-N-Me was innovative, and I also liked the feeling that we learned as we went. Last I checked, people still seem to be participating, so that's a mark of success!

The most daunting part of this NetProv for me was coming up with a character because, as much as I love writing, coming up with characters isn't really my strongsuit. But, after doing a little brainstorming, I decided to with the concept of an antisocial writer and StudentofLife42 was born!


Considering the resources I had at my disposal, that is, more books than the NY Public Library (possibly a slight exaggeration), an obnoxious cockatiel, and a senile old poodle, I decided on the character of a misanthropic, animal loving writer. 

All things considered, when it came to developing a character, the creative side of this project wasn't as difficult as the video execution. I came up with a few different character ideas, but the issue I ran into was the lack of ability to share in those characters' lives. For example, I might pretend that my character is a supermodel at "yet another photo shoot," but no part of my life would allow me to make a convincing video of that-- even for 60 seconds. This issue was discussed with a few classmates, and we agreed that instead of making up characters, we would have preferred to come into this project as ourselves, and make videos about moments in our own lives. I also would have liked to work with other students on a more personal basis, and I think that videos of our own lives would have enabled that kind of connection. That being said, improv is all about creating characters and acting in set situations, so I understand why making a character was necessary for this scenario.

That being said, once I was able to create a workable character, I had fun! I chose to make YouTube videos instead of using Periscope, because my schedule can be a little crazy and I wanted the ability to post a link, rather than set up a time to live stream. Additionally, I do much better when working off of a script. I did download and check out Periscope, but the app seemed a little iffy to me, and I didn't really want to have a presence on it. The idea that anyone could check in and see what I was up to freaked me out slightly, whereas I felt that YouTube was a more fixed and controlled way to share my life. 

Here's were my two videos:





Two people swapped lives with me each time, and reported back with good experiences!

I swapped lives with three people, one of whom I knew (hey, Deb! :] ) and two of whom I don't. This was a very cool aspect of the NetProv, getting to work with people across the country who are students just like me, also involved in this project. 

Here are the three links that I explored:

http://robwit.net/airbnme/forum/topic/Morning-Routine-2016-04-18.htm
http://robwit.net/airbnme/forum/topic/Deck-Dancing.htm

I wrote response paragraphs to each experience in the comments of their forum post, and I enjoyed stepping into their lives. The first link introduced me to Funky_Freshman, a 21 year old college student whose life I stepped into as she walked across her campus at night, from her dorm to the library. An eerie experience to be sure, but I liked seeing another college campus!

The second link brought me to the life of Valerie18, who allowed me to step in to her morning routine, in which she made a delicious looking smoothie. In addition to making me really want a smoothie, this was such a typical morning occurrence that I felt like I truly did step into someone's life.

My third and final life swap was with DebDupray, and here I learned a little about ballet dancing on a beautiful afternoon- what more could I ask for? Although, it's been a while since I last tested my ballet skills, so I was a little rusty!

Overall, I enjoyed this NetProv. It took us beyond the 4 walls of the traditional classroom, and that was the perfect way to conclude our studies of new media. I liked that everyone I was working with was a student or a teacher, all involved in the same project and working together, but I also liked that, for the most part, I didn't know who I knew and who I didn't know. Everyone was on the same field, playing the same game. I would certainly participate again, and recommend NetProvs to people interested in getting to work with people all over the world. 

Learning HTML and CSS with Codeacademy!

For my final project, I have decided to explore HTML and CSS, with the hopes of learning to decipher what goes into making a website. There are several different programming languages out there, but I believe that HTML and CSS are the most accessible and useful for my purposes, and I think I will find the knowledge I gain here useful to future endeavors.

I have a very bare-bones knowledge of HTML, and I've never worked with CSS. My familiarity with HTML comes from my MySpace days, when knowing how to edit the code that was behind your MySpace page layout was huge. I never learned how to build it from scratch, but I knew enough to figure out what certain abbreviations meant, how to change colors of text, etc. So, with that introduction, I will be delving into this new world!

I am going to be utilizing the services offered by Codecademy, to build up as much knowledge as I possibly can.

So, to start off, when they say "Basic," they mean it. But this is fantastic, because there is most definitely a method to the madness. Here's the first of many screenshots that I will be including to show my progress:


Pretty early on, I learned something that I think is interesting. The commands within the < and > brackets are called tags, and they are organized in an order called nesting. This means that the most recently opened tag should be closed first. For example if I want the following sentences, "Hi, my name is Marissa" to be both bold and italicized, I need to open two separate tags: <strong> (command for bold) and <em> (command for italics). Then, I would type my sentence. Next, I would have to close my two tags, and the proper way in which to do this would be </em></strong>.  

Okay, so pause for a second--- these two commands alone taught me something new, and really cool! When I used to mess around with HTML on MySpace, the commands for bold and italic were <b> and <i>. Curious as to why this changed, I did some googling. What I came to find was pretty interesting. Apparently, these two commands exist and still are used, and stylistically are the same as <strong> and <em>, but technically they do make a difference. One of the links I explored explained that an example of why you might use <strong> instead of <b> would be in the case of writing software that would read to a blind person. <b> would only look different, not helping the person at all, but <strong> would command the program reading the code to read that particular phrase with more emphasis. Another differentiating factor, this time in the case of italics, would be when <i> is used to stylistically define the name of a book, where as <em> would make more sense in the following sentence for emphasis: "I <em>only</em> accept friend requests from people I know."

Oops, tangent! But I think that is so interesting! Anyway, moving along...



Here's the perfect example of how sensitive this seems to be, in the next screen capture I highlighted and drew arrows to indicate the two tags that made all the difference in my code coming out correctly.


One of the lessons in this section was about the 6 different sizes of headers, and the only way to move on to the next part was to mess around with the different sizes of headers and include one of each. As you may notice, I ran out of things to say, but it was cool to see the differences in size and emphasis that each one offered.



A significant amount of time later, I'm working toward the end of the first section. This section included adding links into the code, as well as images. It then got a little more complicated, by having code that set an image as as link. I can see by this point that the most frustrating thing, much like learning a language, will be remembering all the separate parts (otherwise the code won't work), but I'm still really enjoying this.


Naturally, I added a picture of a poodle, because I am a fool for poodles.

Guys. Can I just say, this code doesn't look like much, but oh man, am I proud of it:
In code language, I just linked a picture of a puppy to Google (if you click the puppy, it will redirect to google.com) which makes absolutely no sense, but I DID IT!

And with that, I finished the lesson portion of Unit 1. Moving on to the Unit review, the goal is to create a very basic webpage. The directions say to fill it with facts about yourself, so I wrote about my job, a little about school, about the picture is of a poodle who looks like my Paddy! 

Here is the result! First, most of my code:


And finally, my first webpage!!


 This might not look like much, but I've realized that HTML is quite a complex language, but it's so cool that it can be used and manipulated to make something as simple as this, or as complex as all the websites that exist! This has definitely given me insight into how much goes into the code of a high functioning website, and how in depth it really is!

Going into Unit 2, the introduction tells me that throughout this unit, I'll learn how to make ordered lists, change font size, color, and type, change background color, and align text.

Finally, finally! at this point they address indentation, which is something I've been wondering about. If you were to look at good, proper code, it's all indented so that when you look at a line, you can clearly tell what the command is. If you look at my screenshots, on the other hand, my code is pretty messy-- quite clearly, I'm a beginning and trying to get function over style. I don't have much to show for this lesson, but it did give me a better idea of how to indent lines appropriately.

Moving on, the next part of the unit is ordered lists, and I was able to follow the instructions of using the <ol> and <li> commands to continue the ordered list that the site provided:


Now, what isn't evident from this screenshot is that I struggled a bit on this one. It's easy to get the different commands confused, and I mixed up the commands for the headings and the ordered lists. Headings are differentiated with numbers, <h1>, <h2>, <h3>, whereas ordered lists appear as numbers, but the command is the same each time: <li>. Originally, I was trying to set up my list as <l1>, <l2>, <l3>, which effectively got me nowhere.

In addition to some more practice with ordered lists, I've noticed that my indentation looks a lot better, my code is far more readable!

Again, the theme of this section appears to be "Minuscule changes to confuse Marissa," and next up on the list: The difference between numbered lists and bulleted lists is one letter! A numbered list opens with <ol>, a bulleted list begins with <ul>.


Pay no attention to the thoughts that plague me. I'm (mostly) kidding. But look at that bulleted list! Skills!

Funny thing is, I've started thinking in terms of HTML while writing this blog post. I keep thinking to type <br> instead of hitting enter, or <strong> instead of bold, or <em> instead of italics! It's becoming second nature!

Oooh, in this next section they're going full inception on me, lists within lists! This requires attention to the nested tags. Here's what I came out with:


Not too bad!

I didn't quite expect this so early on, but the unit moves into CSS, and explains it as the "skin and makeup" of the code, whereas HTML is the skeleton. This unit appears to be working with inline CSS, which works in the same file as HTML, so another document doesn't need to be incorporated. That being said, let's do this!

First up, font size:



And next, font color:


The next section is about font families, and I'm going to include this link, which Codeacademy directed me to. This is a really interesting page that shows different font options, and I enjoyed scrolling through it and seeing what my options were.


Progress!!

Next I tried setting a background color, which is another style command, i.e.: <body style="background-color:red;">. And check out this color blocking!


I realize this all looks very similar, but the slightest change in command means something completely different in HTML/CSS (think Spanish: Papa = Pope, papa = potato. Big difference there!)

This unit concluded with lessons on text alignment (center, right, and left), and then went into the <strong> and <em> commands, which I talked about earlier, and was already familiar with, so I'm not going to rehash that. But that was the end of Unit 2!

I am so excited to have picked up this topic for my project and, although I am ending my blog post on HTML and CSS here, I can see that the next lesson is in building a social networking profile, which is apparently something that can be done with a very basic knowledge of coding! I feel like I could go on and on with what I've learned, but I'm going to conclude with this:

It's frustrating to learn something like this from the ground up because you want to hit the ground running. I wanted to know how to make backgrounds before I knew the commands for colors, and each step is another building block. You can't speak fluently before you learn the vocabulary. I would absolutely recommend this experience to others. I think it's entirely accessible, and requires patience and determination. Codeacademy is an excellent resource which goes above and beyond to furnish each each unit with comprehensive explanations, and offers lessons and projects along the way. I also found that other sites were helpful in answering any "above and beyond" questions that I had that went beyond my current Unit in Codeacademy, and I found these through simple Google searches. Coding is a skill that I think should at least be appreciated, because so much goes into good code, and this isn't even beginning to scratch the surface. I can definitely see why Computer Science is so in-demand, and I have a better understanding of the allure that draws so many into this field.