Tag Archives: summer 2017

Another trying week

Leave a reply

This week was a culmination of putting a lot of the languages we’ve touched on together. And it went poorly. The slideshow project was an interesting take on putting all the pieces together but it still felt overwhelming.

I’ve found that learning all of these concepts has been hard because we haven’t really gone through them together. In a different class I took last semester, Data Journalism, we went through a lot of technical platforms like SQL and Python, but we went step by step together. Only then did higher level concepts start to make sense.

It would be really helpful if we had class time where we went through things like how to make a slideshow step by step, so we could see how something came to fruition, before we are expected to create one on our own. Like Greg said in class, teachers do teach you how to write a sentence, but they don’t release you into the wild to then write an essay. To take that metaphor we had in class to its logical conclusion, you’re leaving out important building blocks like essay structure, paragraphs, and thesis statements. I feel like we only cover abstract concepts in class, only to have questions moved past because we don’t really go over assignments or take a look at the building blocks we need.

While some could say that Codecademy is what bridges that gap, I’ve continued to have problems with that as well. Currently the interface seems to delete sections I’ve done or doesn’t add a check mark to things to say items have been completed. That’s been really hard, especially when I’m trying to figure out why some lines of code are right or wrong.

I understand why a lot of the class is geared towards making sure we can figure out how things are broken on our own, but I feel like I’m operating at a huge handicap every week because I don’t quite understand what the best practices are to begin with. It would be really helpful to work on foundational things in class so that way outside study can be used to hone things, not figure out what square one is.

As for my Midterm, I will be interviewing Matt Callahan. He works at The Washington Post as a designer, but mostly does what we call “enterprise” templates. These templates are for our bigger stories and are always custom designed using jQuery and JavaScript.

 

First Coding Experience & Responsive Design

1 Reply

Responsive web design:

My current employer, The Howard Hughes Medical Institute (HHMI), is completing their two-year “responsive redesign project” of our external website. It wasn’t until 2015 that our leadership understood the important of UX design and the increasing use of smartphones as our primary web browser. Through the first reading, it explained how we need to consider not only the minimizing of a website on a computer screen, but also consider different size phone screens, tablets, etc. The width of the screen can alter the layout of the page, including the number of columns on a page, images and the content on the page. W3C created a list of media queries to help web developers when creating responsive designs.

Important concepts found throughout the readings:

  • Mobile browsers are the present and future. Web sites should be flexible enough to be able to adapt to new technology.
  • Media query: allows web developers to target certain device classes and “inspect the physical characteristics of the device rendering our work.” (from Responsive Web Design)
  • Fluid Grids
  • Flexible images
  • Viewport Meta Tag: <metaname=”viewport” content=”width=device-width, initial-scale=1.0″> (from w3schools) tells the web browser how to control/scale a webpage’s dimensions based on the scale
  • Design for a mobile application first.

Experience with coding homepage prototype:

If we are being honest, coding the homepage prototype took longer than anticipated and I have a new-found appreciation for web developers and complex websites. I can’t imagine the time and planning that would need to go into creating a webpage that is both responsive and complex. While coding for the homepage, which I created for a food blog, I ran into trouble translating some of what we learned through the Codecademy lessons to the assignment. I struggled most with the lack of being able to see in real time the effect that one small piece of code was having on my site and went into panic-mode when two lines of CSS code altered the entire feel of the site. My biggest struggle was finding ways to create exceptions to rules that I had created within the CSS code early on that affected the layout of the page once I began adding content. I couldn’t find an easy way to create rule exceptions within the code and instead found roundabout ways to add in additional lists. How can we create rule exceptions?

Secondly, what I struggled with this week was adding in an image. I spent close to two hours trying to link an image I had on my desktop to the code and have it display correctly. Eventually, I decided to choose different pictures that were already uploaded to my Facebook page and used those URLs instead. Despite searching endlessly on Google for an answer to my question, I still am unable to link an image that is on my desktop to the HTML. Does anyone have any experience or advice for how I may be able to do this?

Finally, uploading to GitHub was no easy feat. I had created a repository using the desktop app, but it wasn’t properly uploading the files I had created using Sublime. Through Google, this article and the help of my fellow classmates (thanks, Jaclyn!), I was able to upload the files successfully. The article has been bookmarked for future use.

Looking forward to creating a responsive design and using other coding languages, I’m nervous, but excited to see what I can create!