Readings/ findings for 9/22.
I’m writing this after 32 oz of coffee while listening to Muse’s “Knights of Cydonia” on a loop because that seems like a good idea to my overcaffeinated brain. So if anything is off, I preemptively blame it on the jittery madness that drove me to drink that much coffee with no real deadlines approaching this morning. I’m not counting these 70 words in my wc.
Since the last post I downloaded Brackets (brackets.io), which is an open source web development platform. It’s running on my Windows desktop, but I may download its Ubuntu version to try it on my Linux-based laptop. Mostly what I’ve been doing in the past week — besides trying to figure out what bizarre method Google used for its Music program’s shuffling algorithm — has been taking apart various sites to see how the developers/whoever’s back there making it makes their sites tick. I’ll be examining SMBC (smbc-comics.com), Penny Arcade (penny-arcade.com) and the Cheat’s Strong Bad homepage (homestarrunner.com/sbsite/).
SMBC’s content is, as I mentioned in the last report, well documented and neat. As someone with experience in code, the readability of Weinersmith’s site is a treat. Naming conventions are followed; indents are consistent; and dense code is broken up with comments labeling each section. For example: in line 138, a comment announces that the “TOP AD AREA” code will immediately follow the line. Indeed, the next line is <div id=”ad-top”>. Well played, Weinersmith.
After that is another “Project Wonderful Ad Box Code,” which appeared earlier. Line 148 dictates the end of the “TOP AD AREA.” Because of the extensive comments, the site is very easy to take apart and understand. However, looking at the page itself (not its code), there doesn’t seem to be much content. SMBC is actually a fairly sparse-looking site. It certainly doesn’t seem like something that would take 523 lines of code to describe (approximately. Weinersmith leaves plenty of blank spaces to maintain readability). And looking through a few random pages, a few variants show that the length can vary slightly from page to page due to blog post lengths. However, the vast majority of the code remains constant from page to page. The content was, therefore, likely coded once and is now just reapplied with specific elements made so minimal effort is needed for code maintenance from day to day.
Penny Arcade, perhaps interestingly, also uses naming conventions but does not use commenting to nearly the extent SMBC does. In fact, there are only 4 lines of comments in their 719 lines of code (besides the few which are to temporarily remove a function from the site. Penny Arcade is also a much larger site than SMBC in terms of its staffing. The site hosts 3 comics which are updated regularly throughout the week (7 comics/week — the same as SMBC), its own merchandise store (SMBC’s is an external site) as well as its own forums in addition to sponsoring and running three gaming conventions (PAX East/West/Prime), two podcasts, web video series and the charity “Child’s Play.” Penny Arcade has, as it has grown to this sprawling thing over the years, become a company that has dedicated web developers on staff. The code for the sites is maintained by professionals who already understand the code, so the only things they need notes on are to remind themselves. As a programmer, I do appreciate the desire to free oneself from the shackles of annotating ever single detail so someone else can read your code without reading your code. Theoretically, comments are unnecessary if naming conventions are followed; they are, however, nonetheless helpful in quickly diagnosing problems in code.
Finally, the treat of the Strong Bad homepage, “WELCOME TO YOUR DOOM!!” In his sbemail webseries, the fictional character Strong Bad has his pet “Cheat” make a webpage for him. Every single thing about the site is wrong by conventions of design. The top banner is broken into 4 frames with white boarder between each (some browsers also display scroll bars on the .jpeg images in each box, meaning the boxes are sized independently of their contained images. There are rotating .gif images below that. The words “still under construction” appear in any context at all. The interesting part to me, though, was that the source code is just 13 lines (with lots of blank space). The content is pushed to other style sheets, out to 2 removed from the primary source. So even with the site being poorly executed, there’s still an element of good design here through its organization.
Next step is to build something stupid followed by something good.
I’m probably going to need more practice at this. What I thought was going to be relatively simple turned out excruciatingly difficult. Last week I opted to figure out how to link HTML and CSS documents together, and if I was able to get past that I would move on to linking a picture or something. I’ve been using w3schools as my main reference for practice and figuring things out, but I think I may have to do a lot more checking. It’s either that or I keep overthinking when I’m trying to practice.
It might be a mix of both, though. Eventually I linked an HTML and CSS document together through notepad (or, it looked like I did, at least). It’s great that there’s visual feedback with every change, but from what I’ve observed through anecdotes on Twitter, the feedback isn’t always readily apparent, especially when a large amount of coding is considered.
This week was a small, but great victory on my part. Hopefully linking a picture in the files should actually be incredibly simple, and then I’ll move on to creating a crude button that will link to another HTML page, or at least something along the lines of that.
Recently, I have moved on from html and css tutorials to a http://scratch.mit.edu/. This website teaches users basic programming such as how to create stories, games, and animations to share online. I decided to first learn how to create an animation. I had a lot of ideas but execution was extremely difficult. It is necessary to have some artistic ability and I have very little. To guide me in design I used an episode of Mickey Mouse Clubhouse. I attempted to paint my backdrop like an outdoor scene on the episode. After many failed attempts I decided to use a backdrop that the website provides for you. Getting the character I created to move the way I wanted it to proved to be the most difficult. There is a lot of graphing involved. The first time I attempted to get the cartoon cat, I wished to animate, to walk, nothing happened. I gave instructions and it wouldn’t move. I realized I had to manually add a play button and click it. After I got him to move he was walking upside down. In order to get the cat right side up I had to designate how and which direction I wanted him to travel, using the graph and understanding plot points x and y. Following, I attempted to add music to the animation. The cat wouldn’t move until the music stopped playing. I went to look at the script of the animations of other children. This is how I discovered how to make the music and motions occur simultaneously.
Like most other cats, my cat was naked. I assumed the costume button on the website was an attempt to solve this issue. After several attempts to draw clothing on my cat I realized ‘costume’ was in reference to the positioning of the cats legs and arms. In order to make the cat appear to be in motion his ‘costume’ must change multiple times in a single animation. While I was successful in making my cat walk along to a beat, making it dance in a manner that seems normal (for a cartoon cat) was something I was not able to do. The cat only had but so many costumes and the positions I could put him in didn’t make it look like it was dancing. I moved on to try to animate a cartoon character that had more costumes available. With this change I successfully made a dinosaur dance to drum music for twenty seconds.
After stressing over a cat and dinosaur for more time then I would have liked, I found a tutorial on the same website for animating letters. My name is short so I figured it would be a safe place to start with. I was able to make the letters spin, change colors, and bounce. After working with the cat and dinosaur, I was able to add music and a backdrop to my name with much more ease.
My animations, needless to say were very mediocre. I would like to get better at drawing so that I could use characters I have created myself. I would also like to get better at understanding script so that the characters will appear to be doing more.
This may sound like a rant and it probably is, but whatever. The last few days since my previous TLR post hasn’t exactly gone as planned. I signed up for codecademy, the website that teaches you how to code different languages, in the hopes that it could help me with learning python. I was very excited about it because I know several people who have used it for learning how to code HTML and CSS. In fact, I even looked at the tutorials for HTML and CSS and they are pretty great. They explain things, have this active and engaging environment, and you are free to experiment a little and make a site the way you want to make. It is pretty cool and I think is useful to anyone who wants to learn how to code websites.
However, this is just not the case with the python tutorials. I booted up the first lesson, fully expecting that I would be taught what a few lines of code does before I practiced it first-hand. I thought that when I saw my_int for instance, I would know what that line of code meant so I understood how it works in the code I was about to write. That couldn’t be further from the truth.
The initial screen that you see is just a few lines of code that you have no idea what it means. Instead of explaining what the code does, it just says something along the lines of “Hey! Look at this code. We have some errors in it. Fix it by changing the 3 to a 7.” I don’t want to know that that particular piece of code needs a 7 in it. I want to know what changing the 3 to a 7 actually does! What is my_int? What does it do? How does it do it? I want to know what my_bool does as well, but do I get to know that? No! The only thing that I learned from the tutorials I could get on codecademy is the error message that comes from having too much whitespace. Then again, it is ok and in fact encouraged to use whitespace, but just how much whitespace are you supposed to use? What does it all mean?
As you can probably tell, I’m just a tad bit miffed at the codecademy website. I expected the tutorials to be as good as the HTML and CSS ones, but unfortunately they just aren’t and that is a shame. The thing is that since I already know how to code HTML, I sort of figured out the stuff that the tutorials didn’t teach me. So, in a way, I am still learning the code. However, I think I am going to resort to the old fashioned way of learning code and just dive right in and create something with the guidance of a book and a few searches on Google. I don’t recommend the codecademy tutorials for strict beginners. Find a different way to learn python.
My progress on learning HTML is, I guess, going slow. I’ve never been much for programming, I said that in my last TLR, and it hasn’t changed in the past week. I have been going over the tutorials for both HTML and CSS and while I am learning gradually, I find myself frequently going back to the tutorials in order to remind myself of something I have not completely grasped. Just like in my high school learning experience with C++, though I know the basics for HTML I find myself not always remembering what does what and when it should be used. Sure, I’m getting it slowly, but while I mess around with the tutorials and their suggestions it is proving to be irritating and probably something I’m not going to master anytime soon.
I have been looking at the tutorials provided on the ENGL 435 page to learn how to use HTML. I have been looking at the tutorials a couple times a week and trying to work with their suggestions on practicing, but my own inexperience with technology makes it difficult for me to always understand what it is that I am supposed to be doing. After the past week I have realized that I need to go over the tutorials one or two more times a week than I have been doing.
I have been focusing more on the HTML tutorials than anything, but I have also looked at the CSS tutorials since the two seem to go hand in hand. In my last Technical Learning Report I said that while HTML was being something of a pain to learn, I was getting it, gradually. I also said that CSS was being much more of a pain as it seemed more complicated. Over the past week little has changed. HTML is still an easier code to learn, at least for me, than CSS. Perhaps it is because I can grasp the content coding of HTML better than the presentation of CSS or maybe I just have not been looking at the tutorials enough. I admit that I have looked at, read, and practiced with the HTML materials than I have with the CSS ones, but still it feels like CSS is coming along much slower than it should. I am convinced that while I need to go over HTML more to look at the increasingly advanced material in the tutorials, with CSS I need to practice even more just to get to the point I am at now of grasping HTML. Again, I am still not sure just how much CSS should be learned in comparison to learning HTML, perhaps I shouldn’t bother with CSS as much as I am, but it seems that the two go hand in hand enough that I really should learn both at the same time as it would probably be more useful in the long run.
Overall, again, I am learning the codes bit by bit, it is simply taking longer than I wish it were. I will go over the tutorials further over the next week and see where I am by the time I make my next TLR.
The progress with CSS has begun to spark my wanting to learn more in order to be able to create something. Not that the end result of my learning it will be some masterpiece, but rather that the ideas are starting to bubble up when I learn about something new in the language. The most exciting development for me so far has been the similarities of CSS to object oriented programming, where most of my prior coding experience has been.
The associates degree I have in computer science came with some experience in Unix and with C++ — the latter of which uses object oriented programming as its driving theory. The general idea is that one file calls other files and systems of files to execute its functions: in CSS, HTML pages are called to provide information to a digital lens that organizes the information contained by the read page as its own inscribed information instructs. For example: the Videogame “The Elder Scrolls V: Skyrim” uses an object oriented language, so it’s core file is 17.1 MB while the entire game takes up 21.9 GB in total with its extended file system. CSS in its “external style sheet” format is very similar to the idea, where it reads information from a separate file in its system, though CSS also works within individual HTML pages in its “Internal Style Sheet” and “Inline styles” formats.
My next step needs to be development. I need to procure freeware or open source tools to begin experimenting with different features. The more I play with the tools outside my head, the more familiar with them I’ll become. I’ll also need to check out development tools for Linux, since my laptop can run that and different virtual work environments could be available through it. Lastly, I need to figure out a core “play” project I can do to focus my goals and create obstacles for myself to overcome. I’ll probably try some game development ideas out through it.
It’s kind of funny to remember how my elementary school taught us a bit of how to code and what HTML is. It was a designated class on learning how to use the computer, type, and even play games. Sadly I have forgotten most of the HTML coding that class taught me, so I’m pretty much starting from scratch on HTML coding.
What’s different this time around though is that CSS wasn’t taught to us in that elementary school class. I kind of had an aversion towards coding for a while so what I planned to do is take small steps between both HTML and CSS. However, after checking through the tutorials, I found out first-hand how tightly knitted the two forms of coding were.
But that doesn’t mean I knew how to weave both together in a proper fashion. I saw how similar both were but my practice of connecting them wasn’t pretty. When I know what the terms are for particular pieces of coding they tend to help me a lot, like for example “h1” is shorthand for “header 1”.
By example, using the CSS editor from the resources on this blog, I made a second header, colored it red, made another paragraph body, changed the font type and its size, while also making the first paragraph body a different font type. I don’t know where my fear of coding came from, but it was exciting to learn and create, even if simply, the guts behind the face of web pages.
Just from the small practicing I did, it looked like CSS was a lot easier to organize and format than HTML. I tried coding in font color for the HTML editor and ended up with… no color. It turns out the tag I typed was wrong and that I was missing a word! According to the W3Schools site, the font color tag has been obsoleted in HTML5 in favor of CSS, so I’m assuming I wasn’t the only one confused with this color thing.
But I’m only dipping a toe into this entire coding adventure. Just from the examples the editors provided, while the CSS example looks longer, it’s only longer because of the formatting. It’s all actually organized into small pieces in order to churn out a big body. It’s, pretty much, like Legos: Start with a small block to make bigger blocks and then one giant… thing, of any sort.
On the other hand, the HTML editor didn’t really start out with much. If the two go together hand in hand I’m assuming that HTML is the bigger vessel than CSS, so I consider HTML to be learner. I got lost with what to do in the HTML editor because, to be honest, I wasn’t sure with what to really add. All I did was change the color of the header before going back to the tutorials. It’s kind of funny to think about it since I immediately grasped how CSS organized its text and jumped right in to code, even if it was small.
So yeah, that was my experience with HTML and CSS. I’ll still take small steps, and my next adventure is seeing how to link web pages into the coding, and then afterwards seeing how to link HTML and CSS web pages together. If it turns out I can go faster then I’ll take that opportunity. So far it all looks fun!
HTML is Hypertext Markup Language. With HTML words on a page are given an enhanced meaning. Emphasis can be placed on important parts of a page. Links, tables, and images can be added to a page in order to strengthen the experience of a user.
Using HTML Dog I embarked on understanding this language and attempted to create my own website. I realized I was already familiar with the tags that surround the words on a page that appear behind the scenes. Tumblr is a microblogging platform and social networking website that I used daily in high school. It was highly customizable. When I first began using Tumblr I would take free themes found on the web to enhance my own blog. Originally I could see the code being used but didn’t understand it. There were often parts of borrowed themes that I didn’t like. I played around with the code by deleting and adding things and watching the theme to see what it changed physically on the site. Tumblr helped me to understand both html and css. I went back to my old Tumblr page and looked at my theme to refresh my memory of html and css.
Tumblr, however was already online. Saving text on notepad as html proved extremely difficult for me. Even when I would save a file as ‘.html’ notepad would automatically add ‘.txt’ to the end. I toggled back and forth between using “Notepad” and “Notepad 8” to edit my text in. I settled with Notepad 8. My document appears to be saved as html. HTML Dog suggests that I attempt to make my document appear by typing the file location in the browser. Unfortunately, now I am struggling to make this work. Finding this frustrating I returned to learning how to further customize my page. At any point I can return and learn how to make the page appear online.
CSS, cascading style sheets is similar to html. However, css focuses on things like color, font and spacing. My understanding of the differences between CSS and HTML is that CSS has more entertainment value. More creativity is allowed with CSS. An editor can alter the words and images on a page to possibly evoke more feeling than they could with html. A bigger reaction is likely to be achieved with an animation then a bold header. I understand how to make a page more interactive with hyperlinks and videos.
I would like to work on memorization of further tags. The process of creating a web page takes longer when you constantly have to refer back to how to frame your work. Many tags seem to have the same meaning, I am interested in understanding the purpose of various presentational tags. HTML dog has a section titled “Redefining the Presentational Tags”. The tags mentioned place emphasis on text. I don’t see how they are any different than the basic tags that perform the same task. I have the html, css, and content for a potential website, I would like to be able to get it online and accessible on different computers.
In Stephen Ramsay’s article, “On Building” he states his belief that digital humanities is about building things. I happen to agree with Ramsay that this is definitely part of what makes the field leading in innovation and creativity. Based on how we understand technologies and how they relate to people we are able to unveil a humanistic approach to the future only found in digital humanities. The task I have chosen to learn more about is known as the “apple watch”. I am fascinated by how technology is constantly growing to adapt to make our lives less complicated and more controlled. The designers of apple have caught my attention since the very first apple Ipod came out when I was a teenager. Through the course of time and my own observation during the span of my life I have noticed that there has been variations to this specific technology made to fit people’s lifestyles better. Living in the twenty first century it’s interesting to experience how technology grows and changes to adapt to the demands of our society. I was looking at my twitter feed when I came across a tweet with a link posted of an article explaining the new apple watch. I was instantly interested to learn more in order to not get left behind by the knowledge and technologies of our modern day world. I began reading as many articles on the new device as possible to broaden my understanding of what one should expect to receive from this new expansion. I decided it would be beneficial to find hashtags relating to the new technology in hopes to find more relatable information into the development of this structure. I taught it to myself by using the internet as a resource to learn. Certain websites helped me attain knowledge to educate myself further on the new product such as youtube, google and apple. A struggle I experienced during my learning process was the fact that, because the product has not been released yet information on its usage is rather limited. This did limit how much information I was able to attain through my search. However, I am sure when the item goes into stores it will provide people with directions built by people that understand the concept of digital humanities in which the product is explained thoroughly. From my research using online resources I was able to conclude a few interesting findings about the apple watch. Decisions put into this technology were purposefully created with reasoning to advance the role technology plays in society and to appeal in the humanistic approach of consumers. One choice in particular that struck me was the size of this apple watch and the reason behind that decision. I learned about how much more convenient this new product is because of its’ size and this choice apple made in creating a “watch” instead of a hand held device was quiet clever. I am excited to have found a relatable topic to Digital Humanities through the innovation of technology as it is growing in the market because it relates to the shared experiences we will encounter a week from now when it gets released in the market