Category Archives: 2013 Summer class

Switching to a Manual Transmission

When I first tried to host my own WordPress site a few years ago, I didn’t know anything about coding, MAMP, Github, or child themes. Everything was automatic, and I picked out a free theme and did little to edit it. I didn’t love the theme, and I had my own ideas about how it should look and what I wanted it to do. It was, however, simple. There were only a few instructions, nothing extra to download, and it was still free.

Getting out of that automatic mindset has been difficult. When using WordPress, there are shortcuts every step of the way. When setting up my hosting, they offered a one-button install, which I did. It gave my WordPress site its title and immediately let me using the site, but didn’t necessarily make it easier to edit. In trying to edit my website, I found myself back to square one.  In class, we set up a sample webdev final project site, but in making High on Endorphins I had a lot of questions, and not enough answers for the series of questions. What was my database name? My SQL username? Should I enter “localhost” or my BlueHost information, if I was going to be running it through MAMP anyway? Are all of these answers different on my actual WordPress than on my localhost version? A lot of these simple problems were easily answered when we did it together, but now working on my own, Google is providing most of the answers to my questions.

Although Codecademy was a challenge, learning to code is only half of the battle. Simply getting the new code into a working website, using multiple applications and dozens of steps, and figuring out how to make it all run once its written is taking a while to get used to. Once I finally become comfortable with all of these steps, then I’ll really be free to really experiment with the code. For now I’m going to just keep Googling, learning, and practicing.

Making Changes

I am not sure what is going on, but since Andy’s lesson, I have felt overwhelmed. I really do not feel like I can actually stand-up a site. I am missing structured type of class settings that follow a book and/or a lab. It has been so hard for me to follow and make any progress with my development skills because the class and subject matter has been all over the place. Last week, I went into class feeling like I understood what was going on, this week I am feeling lost. It might have been information overload.

It would be great to use class time to work on our sites.  Maybe we can discuss and work on functionality which is common to all our sites during class. This way we can practice and ask questions as we encounter problems. Some of the key functionality that are probably very important to a class filled with Journalists and Public Relationists are: Social Media links, ability to rate and/or leave comments, registration to gather reader information.

As far as the assignment to create a plugin – I have no clue how to create a plugin. The steps discussed in class last week did not register. I also took notes, but they do not seem to be helpful.

I spoke to a friend last week who is going to NoVa about an introduction to web development class she is taking. One month into the course and the class already has their sites up. They are using Google sites which I am guessing are much easier to use than WordPress or it might be that the course is focused on developing the site and not building developers. As I do not aspire to be a developer and want to continue being an entrepreneur, I wish this class really focused on teaching us how to create our sites and not everything development. Covering all the different concepts which have been covered is overwhelming and I do not feel more of a developer than on day one. I cannot wait for this semester to be over.

Changes that I want to make to my site:

Change the title – to Grocery Coach, font color green, add the company modo below the main heading, modify the tabs row either the row fill or the tab colors. For these changes I will be updating the HTML and CSS files. I also want to add social media capability which i am not sure how to add. I would also like to update the layout of the page, I do not care for the menu too much. I rather have a cover page that just contains a picture, the header, and footer. I want to put details on the different tabs.

Attempt to make updates

I tried to make updates to my site and found it to be confusing. I was not able to find root files, it was a lot of code referring to master files, and arrays. I made an update to the footer in order to not break anything and found that the change which I made did not update on my site (sad face).

Learning to swim without floaties…and spell my own name

Tuesday’s class left me exasperated. I felt as if I had gone from floating in the shallow end of the pool with floaties on, to being thrown into the deep end.

The big picture was overwhelming me so I started to look at the smaller pieces one at a time. Since I couldn’t get Cyberduck to work in class, I decided to test it at home. After a number of unsuccessful tries, I reached out to Greg who pointed out that I had spelt my name wrong. Whoops. More tries ensued and still I was unable to connect. Once again, Greg had to point out that I had spelt my name wrong. By stressing about the big picture and rushing through it all, I had sent my brain into a panic and forgotten how to spell my own name. Twice.

This week made me realize that only so much of coding can be taught. At a certain point, I will have to start learning by pushing through the frustration rather than giving in to it. Of course my new rational mindset was quickly challenged when I decided to create a child theme of Twenty Twelve and mess around with it. There were so many different parts to it; I had no idea where to begin! Even though many of the things I tried to do didn’t work, I am eager to continue to familiarize myself with the code and expand my css/php knowledge. In trying to stylize my page, I discovered a neat tool (Image Color Extract) that determines the codes for all the colors found in an image – great for helping me get the exact look I want. I also realized that even though I had all sorts of questions, I knew the right words to search for the answers in the codex – a sure sign of progress!

After a few days of messing around with the code on my own, I’m not as panicked as I was on Tuesday evening. I’ve come to terms with how the learning process will go from here on out and am ready to buckle down. I’m not ready to start swimming without floaties, but I am definitely open to challenging myself by moving into the deep end of the pool. I may also sit down and practice writing my own name a couple times, just to make sure I’m not losing my mind.

Loads of Codes

After going through what seemed like thousands of free themes, I ended up choosing a WordPress theme that was already featured(go figure). Choosing my theme and getting a visual idea of what my site will look like really made me feel like we just matured from newborn to toddler. I was extremely excited, and then I started going into the files of my theme. In these files were loads of code, some that I understood immediately and others that I have a strong feeling will take me a while to figure out. I am still just as excited to get the ball rolling on this project, but we went from like 30 lines max in Codecademy to, in my case, 573 lines of CSS and that’s just one folder. Looking at all of the files was a little overwhelming and I must say, thank you Greg for NOT making us do this from scratch. I remember asking in the beginning of the semester why in the world other coders would share their codes for free. I look back now and wholeheartedly understand the reasoning. They do it for people like me and I’m extremely grateful these people exist!

What I found most interesting is that I thought I’d have more difficulty understanding the codes but I actually had more problems understanding the comments explaining the codes. Everything has an official/proper name that I’m sure all veteran coders know. For example, in Codecademy when we’d practice, I often found myself commenting like “change box thingy” or “moves grid thing to the left”. That kind of language won’t get me very far in the real world of code and also won’t aid in my understanding of what others are trying to pass along to me.

I meant to ask this in class but when we are in GitHub and preparing to update and sync things, I remember we have to write a note saying what that change does. I’m finding that I may know what something does, but I may not know exactly how to say it. I’m sure the solution to this is just practice, but I probably need to figure that out sooner than later.

Not So Breaking News: Child Themes reduce Headaches

To say that my life has changed since learning about child themes would be an understatement. I’m glad that I now know the proper way to edit styles, functions, and PHP code, on the other hand i’m upset that I have not been editing themes correctly since I first learned about WordPress.

My clients have had the misfortune of not updating their themes as they become available because I did not want to lose my styling edits in .css files and edits to html and javascript in .php files. That is one huge mistake I plan on correcting with my Web Dev Project: www.milagrocleaning.com.

I chose a theme titled Big Bang because I really found it to be a great representation of what I was looking for; a responsive and clean theme that will allow me to display the cleaning company in the right light. I think the theme is simple enough that it should allow me to make styling adjustments and edits that I deem necessary. The theme already includes a custom post type for portfolio items. I plan on adding a few custom input boxes on the custom post type portfolio to consistently display information like # of bedrooms, and bathrooms.

After looking through the different .php files in the theme, I am noticing a few discrepancies between what the theme creators have named the .php files as compared to the template hierarchy diagrams Greg has outlined in the readings for this week. It makes it a bit difficult to interpret what is actually in the files but I think I have a good understanding by looking at the code inside the .php files. It’s unbelievable to be in this position after a few short weeks of this web development class. I’m now able to differentiate and narrow down on specific pieces of code and see how I can alter things. I have yet to find redundant code or badly written code in the template .php files, but i’m sure I’ll find a few as no piece of code is perfect.

The inspector tool continues to be my best friend as it allows me to focus on a specific piece of code. I cut the class or id of a < div > or < p > tag and paste it into the child theme style sheet and override whatever the current style is. It almost feels like i’m cheating, which is worrisome because the last time I felt comfortable, JavaScript stepped up to the plate. I’m really proud with the progress I’ve made so far in the class. It couldn’t have come at a better time because my Advil was running low.  I’m positive my classmates feel the same way.

Getting More Acquainted with My Theme

It was great having Andy come in and speak to the class. While I didn’t grasp every single thing he was talking about, I now have a better understanding of the capabilities of WordPress. His discussion about child themes was especially useful for me. I’m happy he listed the 3-4 parent (and very basic) themes he recommends for creating child themes. I initially was thinking about using a very complex theme for my site, but I have now decided to go the more simple route with a theme called magazine basic.

After downloading my new theme, I spent some time looking through the various code and browsing the admin section. Since I’m creating a child theme, I know I definitely will have to create a new directly that includes a style.css file. But what about the other parent theme folders? Do I only drag the ones I want to edit into the child theme directory? I know I want to create a custom post type, which will be done through code, but what file do I create the code in?

I also spent some time trying to understand the differences between the local server and the web server, and how they “talk” to each other – for lack of a better word. I successfully connected to my local server and starting making very minor changes through the Admin section and was able to instantly view the changes on my local site (which was pretty cool!). But I’m having difficulty being able to view the changes on the web (even though I commit/synced files on GitHub and successfully connected to Cyberduck). Is it because I made changes through the Admin and not the code? My new theme is showing up, just not the text changes I made.

Ah.. so many questions still… but finally feel like I’m starting to comprehend what I’m doing.

Poking through a jungle of code

After a long, frustrating MAMP install, uninstall, reinstall, screw around with numbers and letters, rinse, repeat, MAMP still refused to work on my computer. I started from scratch on my girlfriend’s laptop, and voila! It worked. Now I could finally start playing around with the documents in my chosen theme, Eureka. I wasn’t feeling optimistic after three hours of banging my head against the wall with MAMP, but I’m glad I pushed through. It ended up being a lot simpler than I’d built it up in my head to be.

I was scared to touch the code at first! I did a lot of Command+F-ing for things like “border” and “background” and changing minor things to see if I was working in the right spot. I kept flipping back to the WordPress codex to try and decipher what I was looking at, and it took me a while to successfully make a change and see it reflected on my local host page. But I think the hardest part is over — now that I’m more comfortable with the workflow, I can concentrate on the actual content, look and functionality of the site. And It was cool to see my work show up right away on the page! I think I’ll be comfortable making cosmetic changes to the theme, but less so writing functions in PHP.

I love that the WordPress documents are separated out by their purpose rather than all being shoved into one CSS or PHP file. I think this will make it easy to find and change exactly what I want to, and the WordPress database system makes the PHP files clean enough to understand…kind of. I’m definitely going to keep studying those codex entries.

Christina Cauterucci: portfolio site

My final project site will showcase my professional work and personal projects in a portfolio sort of format. When someone Googles me, I want this to be the first result that pops up. I want the Googler to be able to go to this one website and find all the professionally relevant information that I want them to know about me, rather than letting them peruse links and assign importance to my web projects at random. As I look to a new career start in the next few months, controlling my web presence seems paramount. And why bother building a portfolio website and claiming web coding skills if the website itself doesn’t show them off?

I haven’t decided whether I want my site’s homepage to be a blog with frequent updates on my professional and personal projects or a graphic grid featuring the portfolio items of which I’m most proud. Either way, the site will include both of these pages in addition to an “about me” page, a CV/resume, links to my web projects/embedded videos and ways to connect with me on Twitter, Instagram and LinkedIn. I hope to make the site sleek and edgy and involve some interesting interactive movement with Javascript/jQuery.

URL: christinacauterucci.com

Description: This site will house the work I’m most proud of and offer a glimpse of the “professional” me with links to clips, my resume, etc.

Goals:

– Control my web presence
– Make it easy for folks to find information about me
– Offer a proof point of my limited web coding skills
– Create a visually appealing array of videos and images

Audience: I hope that potential employers, clients, partners and people who are interested in my work and side projects will visit the site.

How I’ll achieve my goals:

– Make some kind of grid or slideshow of my projects
– Include an “about me” page and my resume
– Have an “in the news” page or tab for photos or clips of instances when my projects have been covered in the media

Theme: Eureka

Planned modifications (ambitious):

– I want to make each “post” bubble into what would normally be a page (about, clips, etc) – creating essentially a one-page website with anchor tags to move up and down the page. I would need to learn how to make a floating taskbar, so…we’ll see.
– Cosmetic revamp: changing up the color scheme; making the post bubbles wider, a little less round and maybe have a thinner border; getting rid of the tabs on each post that have an icon of a piece of paper on them or whatever media the post contains.
– Create a grid of some sort with uniform icon-sized images that expand when clicked, for visual/video projects.

Veoni Vine

I had every intention of doing a portfolio website for my final project. I thought that improving my amateur-looking WordPress site would be the best use of my time. But after diving into HTML, CSS and JavaScript (cringe), I quickly realized that it would be more fun to build a site that incorporated all new content and focused on a true passion of mine.

Wine!

My husband and I like to think that we have a fairly exclusive wine collection, especially for a couple of 28-year-olds. We even have a few bottles that aren’t supposed to be opened for another 15-20 years. With that long of a wait, it’s difficult to remember where we got it, what food goes well with the wine, what year we should open it, etc. And let’s face it, in 20 years my memory is just going to get worse. So… my idea is to create an online wine cellar that houses all of our elite bottles with images, descriptions and food pairings. In addition to the wine cellar, the website would include a blog so I could document my wine experiences (such as visiting a winery, enjoying a good bottle of wine at dinner, highlighting a new local wine maker, etc.).

As far as the audience, my husband and I will benefit most from the site, at least at the beginning. But I plan on linking to blog posts from my social media channels so other people will know about the website. And who knows, maybe one day there will be a paid Virginia winery ad on the homepage. #winedreams

Post Updates
veonivine.com
Description: Veoni Vine will feature images and descriptions of my personal wine collection, as well as highlight my various wine experiences through custom blog posts.
Goals:
-Have a digital wine cellar that features prominent bottles from Italy and the US.
-Write blog posts to document my wine experiences (winery trips, dinners, etc.)
-Generate followers and encourage people to share comments on the blog posts.
Audience: My husband and I, friends and family, and hopefully other wine enthusiasts.
Achieving goals: I plan on using a WordPress template that is simple and is easily customizable. To ensure everything is organized nicely, I plan on creating custom post types. I also plan on sharing the website through social channels to drive awareness.
Theme: Magazine Basic (http://wordpress.org/themes/magazine-basic)
Functionality & Design:
-Create a child theme
-Develop a custom post type and taxonomies for ‘region’ and ‘year’
-Change the look of the theme by altering CSS code
-Import social media widget
-Add content (at least five collection bottles with images and descriptions, and one post highlighting winery experience).