Internship @ Pemaquid

January 25, 2011

My first day at Pemaquid was really productive. I got to sit in on a client meeting between Rob Landry and Annie from anniecatherine.com. They were working on making the final touches to the website – a process that’s been going on for over a year now! It was very valuable for me to get to see the back-end of a website and how Drupal works. I hope to incorporate Drupal in my future web work.

Rob also gave me some homework – to look into some web design blogs. He listed off a few really good ones and I picked an article to report on.

What does browser testing mean today?

I read “What does browser testing mean today?” on stuffandnonsense.co.uk. The title caught my attention right away because in all this buzz about which browser is best, rarely do I get to visually see why and have the differences explained to me. Though the particular post was a little outdated (from the end of 2009), I felt like it was valid in that it discussed a little bit of CSS3 which is still the most current version.Andy Clarke is great at explaining a rather complex scenario happening between the browsers. I’m new to the “webkits” ideas and have yet to understand what I’ve seen, but I understood a little bit more by seeing the screenshots. The browsers were labeled and described and one of the things described was whether the browser supported webkits or not. There was definitely a difference between the supporters and the non-supporters. By knowing how a page in a “webkits-supported” browser looks versus a non-“webkits-supported” browser, I can piece together what a webkits does look like or is capable of looking like.

Clarke also spit out CSS terminology like it was a noun in a sentence. While fantastically nerdy, I could also piece together the terminology like “box-shadow,” and pick out what I was seeing that was determined by it.

January 27, 2011

Today was image optimization day! That’s something I have little experience with – I’ve always cluelessly built sites with high-res images with no consideration for load times. I also learned about browser compatibility and how something may not look right in just one browser – that’s all it takes for a little frustration and a lot of messing around with code. I got to work on a project for Oakhurst Dairy. The social icons do not allow for transparent edges in IE6. Though it’s a rather outdated browser, the traffic on the site showed enough people accessing the site through IE6 for it to matter. My job was to go into Photoshop and optimize the icons, save them as transparent PNGs, (a format ideally used for small graphics, not photos) and see if they worked in IE6!

At first I was using Chrome’s extension “IE tab” which gives you a screenshot version of what the site would look like in IE. I couldn’t, however, specify what version of IE. Adobe’s Browserlab works great for that purpose. I can see what the site looks like in almost all of the browsers out there! (Except for Opera and a few other smaller-name browsers.)

Jordan, the project manager of Pemaquid assisted me in fixing some content on EJP’s page. I used my FTP/coding program to access EJP’s content and we were off! I admit, I was so confused. I have never seen jquery before and the {% block %} format of the coding was like looking at a foreign language. We added “Certificates” to the Know How sidebar. It was a success! (All thanks to Jordan, of course!)

My homework was to look into another article.

Cleaning Up The Mess: How To Keep Your Coding Workflow Organized

I read Brian Hoyt’s article “Cleaning Up The Mess: How To Keep Your Coding Workflow Organized” on Smashing Magazine. The article covered organizing a web project from the coding angle, the folder layouts, and even folder hierarchy. The contents of the article proved to be particularly helpful because Jordan and I were looking through the back-end of the EJP side and I noticed that everything had a specific place for it. She knew what was inside each folder before even opening it. That’s a sign of good organization. I hope to learn these skills here at Pemaquid. One thing that caught my attention was the idea of a “private folder” for clients – a folder that contains unfiltered information/information you wouldn’t necessarily want to send a client. This was interesting because by separating the folders, it’s a good indication right off the bat that you’re preparing the real folder separately that will be very professional and act as a tidy portfolio of the project.

As someone who doesn’t have that much experience programming, I was amazed how much goes into making a website. I don’t know much about php or jquery but I know enough that it’s coding that is very typical in the majority of sites out on the web. I would like to learn more about php/jquery/javascript.

February 1, 2011

I’m beginning to understand code more. I participated with another intern, Colleen, and Rob working on a small project. The code was relentless – we seemed to be getting nowhere! Rob had many, many solutions that would work. I took note of them all, but it was finally just cleaning up the code that fixed it. I am learning about CSS class tags and IDs like

<style>
#content
{width: 40%;
height: 100%;}
#content a.link
{border: 0px;}
</style>

This type of coding is really clean yet really specific. Rather than coding everything individually, I can name certain divs/links/h-tags/etc and style them however I want! (This is called “Semantic Markup”.)

February 3, 2011

I’m so excited to be working on client projects! They may be small, but those are the steps I need to take in order to learn how this business works. I was immediately put to work coding tables for Putney. We were already provided with the data and an excel spreadsheet table. My job was to translate that into HTML. Of course I was intimidated before. I had never really coded a table in my life! At least not while knowing what I was doing. Colleen gave me a site that had a definition of the tags like <th>, <td>, and <tr> and more complex things like naming them, captioning them, and styling them: border-collapse: collapse; and centering: margin-left: auto; margin-right: auto;.

Here is what I created!

For my homework, I have to take the template I made and translate two other data charts into HTML tables. I left Pemaquid yesterday thinking – “Wait, WHAT? I LIKE coding tables?”

February 10, 2011

Rob gave me a challenge to research and create my own favicon for a site. Just to be silly, I decided to make an “I Love Google Chrome” page that would feature the Google Chrome logo as the favicon. What is a favicon you ask? Well good thing I researched them! A “favicon” (which means “favorite icon” is a teeny tiny (16 x 16px) icon that displays in the open tab of the website or also next to the favorited web page in the bookmarks menu/bar. It’s just a nice, simple way of adding a bit of color and distinction to your website among other bookmarks.

To do this, I had to first download the plugin (.ICO file format) for Photoshop CS5 – the current version I am using. Once I did that, I took the Google Chrome logo and resized it to fit in a 16 x 16 pixel square. I adjusted the sharpening to reduce any resize blur that may have happened and then saved it as an ICO. I uploaded the file to my Pemaquid sandbox account and added this code in the <head> section of the page:

<link rel="icon" href="chromeicon.ico" type="image/x-icon">

And there it was at the top of my test page!

February 15, 2011

February 15, 2011

Today I got to work on the Portland Music Foundation’s new site! It isn’t live yet though the work that Colleen and I were doing on it may have been the finishing touches! It was so exciting getting to work on something that will be directly visible to the public!

To start, I had to login to the portlandmf site where I could see and edit the new layout. My job: add the sponsors to the footer. This meant adding an image for each sponsor as well as linking the image to their website. Luckily, the images/logos had already been uploaded to the server (YES FOLKS, I GOT TO USE DJANGO!) and resized. I had to convert them to black and white, fit them on a 120 x 90 pixel template and save them as transparent PNGs. (All of this of course was a joint effort between me and Colleen!)

(I will be sure to post some images as soon as the site goes live – so as to not spoil the surprise!)

I can honestly say that I knew exactly what I was doing. It’s so easy to navigate around the back-end of a Django-based site and Rob had me making transparent logos earlier in the month as a perfect practice for this assignment.

I really love interning Pemaquid. I learn more in three short hours there than I do in some classes! Little by little I am learning organization, the workings of FTP/content managers, and coding in general! I’m glad the focus in on coding – it’s further from my comfort zone than designing, but I know that if I designed all the time I wouldn’t be learning as much as I have been!

February 24th, 2011

Guess what? Portland Music Foundation is LIVE! Check it out! On the 24th, I helped to set up the dynamic testimonials toward the bottom of the page and also got the twitter widget to work. Pretty neat huh? Well refresh the page and take a look at it again: it’s a different testimonial! (If it randomly chose the same testimonial, refresh again!) I’m so excited about that! Rob had a fancy code he’d been working on prior to the launch and I got to help plug it into the site.

The testimonial section is a little more complicated than it looks. At first glance, it just looks like it could be a div with a background image and text inside. Well, the quote border isn’t an image at all! It’s a beautiful little border code with a -moz-border-radius (firefox compatibility) and -webkit-border-radius to get the rounded edges. The little tail on the bottom left is an image – a transparent PNG – that overlaps the border with a neat margin-top:-3px to bump it up so it touches! The silhouette image of the man next to the person who said the quote is actually a background image. I gave the <cite> tag a margin-left: 35px so the text would be bumped over and not interfere with the background image! It’s exciting stuff! I love background images and what you can do with them. I’m also understanding more and more about floated divs.

March 1, 2011

Working with forms! I worked to transform a table-style form into a list-style one. Working around the already-named ids given to the elements in the forms on the PMF website, I translated the form into a more template-friendly version. This way, we can save the code and utilize it over and over again without having to type it up from scratch. I recently saw an infographic that described the best ways to design and code and the top-rated method of being more efficient was to reuse older material! This is the perfect example of seeing that method in action!

Reflection

My final weeks interning at Pemaquid were spent working on the Maine Lobster Festival website. Though I can’t show pictures of it yet (the client hasn’t even seen it!) I can  assure you that it’s well under way. In fact, we’ve set a deadline for ourselves to be May 6! Yes – this week! I’ve been in charge of translating the photoshop mockup into HTML and CSS. I learned a LOT about absolute and relative positioning, floats, and even Django. Using references from past Django sites, I was able to turn the HTML file into a blocked out base and index template that would communicate with the pages and sections in the Django content manager: with Rob’s help of course!

I also helped jump-start an online nonprofit news organization called The New Maine Times. My partners approached Rob and we formed a successful collaboration. We launched on April 15 and have since gathered a plethora of news, editorial, analysis, and more! All original content!

Using what I learned at Pemaquid, I’ve also been incorporating semantic markup into my own sites. I’m currently building my own portfolio website with Rob’s lessons in mind. It’s far from done, but you can preview it here.

Rob hired a new project manager, Trish, a fellow Mainer! She’s an extremely wonderful woman who I have a very easy time talking to. I love how organized she is and her honesty. I think that Rob picked the perfect project manager!

I got to attend a client meeting to see how they were conducted. I took note of a lot of what was said and I was pleased to see a designer thrown into the situation. He incorporated a lot of what they had asked for in his designs.

I really love what I’m doing at Pemaquid. I love communicating with clients and hearing their input. Sure, their requests could, at times, be frustrating and hard to understand, but that’s what makes it all the more interesting. I was disappointed and dreading the days as summer approached because I knew that my internship at Pemaquid would be coming to a close. Upon talking to Rob last Thursday (4/28/11) we discussed my summer plans and it looks like I’ve got a part-time place among the Pemaquid team!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


%d bloggers like this: