Web Developer Internship

I cannot believe how many internship experiences I’ve had this semester and they all brought new and exciting things. I learned so much from all my clients and I was fortunate enough to have very understanding clients. I learned how to deal with different types of people and different types of projects.

Thanks to the internships I did, I now feel more confident in my abilities and more knowledgeable than before. Some concepts have finally come together and some I realize I still need to work on.

Some of my most challenging projects were the last three at the end of my internship-working with Joomla! I think because I never used Joomla! before it took me awhile to complete the training through Lynda.com and I had to keep going back to videos or other sources to figure out how to use it. Since I did three websites using this content management system though, I am becoming much more familiar with it and have grown to like it. In fact, I think in some ways I prefer it over using Dreamweaver. Here are a few benefits I see in it over Dreamweaver:

• If you get a template that was created correctly, it is very versatile and can be displayed without errors on any platform
• There are so many components, modules, and plug ins through the Joomla! extensions directory and many are easy to use
• Editing templates is easy and helps sharpen knowledge of CSS
• You can very easily change the whole look and feel of a site by changing the template
• Clients can edit content once the site is complete
• The majority of generated code is automatically corrected resulting in less errors

While there still are some things that are not quite as easy as Dreamweaver like adding attachments or implementing Google Maps right in a web page, or using a splash page, I would definitely consider Joomla! as an option.

In summary, this course has given me many opportunities and opened up a whole new advancement in my career options. For now I will keep helping people with websites and do freelancing, but who knows where I will end up in the future…

While I did just post a blog about a day ago, it is always exciting for me to share some of my latest discoveries-especially when it is a pressing issue that has taken me awhile to figure out. Today, I learned how to successfully transfer a Joomla! site from the local server to the remote server using GoDaddy. This will be an adventure, if things are different with my flower shoppe client who is using Power Web Connect, so I’m not sure how that will go. Anyway, after much agony of trying different solutions and searching, I came across a great website that had the one answer I had been searching for. This is the site on how to use Joomlapack to transfer from the local to remote host.

I had tried multiple solutions, such as phpmyadmin, and Joomlapack, which is now AkeebaBackup. I watched my instructor demonstrate how to use phpmyadmin to transfer to a server, but I still had little success. I think I would need to see a demonstration once again, despite that I took good notes because there were still some things I was unclear on. I discovered Joomlapack on Youtube when searching how to transfer your Joomla! site and read excellent reviews on it. It is a process either way to transfer a website-a lot more complex than just connecting using Dreamweaver. Anyway, I discovered that I not only need to use the .jpa file that was created in AkeebaBackup, but I needed to use Kickstart as well, which is a php file that sets up the website on the server.

You can read through the tutorial on transferring a site with Joomlapack for more information. It is very descriptive and the only thing I got confused on was the username and password when using Kickstart. I tried a few and finally got it.

The Office Plus site still needs to be uploaded to the correct URL, but can be currently viewed at: http://cathiesfreelancework.com/officeplus/. I included many things in here like a random image module so every time the page loads it displays a new image, a calendar, a poll, and an RSS feed. I had a lot of fun learning new things in this site and realized just how many things you can do in a Joomla! site-and it’s easy to do.

I am currently working on revising the template for the flower shoppe as I discovered I accidentally deleted nearly all the module positions in the original template. Fortunately, I did not have that much added to it yet, so I just re-installed the directory and now am working on entering content that I finally received. I need to style the headings accordingly so they match the template as well as organize the information into sections and categories.

I was so happy the day I discovered how to center the logo in the Joomla! milky way template. It’s hard to believe the answer was not very easy to find. There are tons of articles on how to change the image, but after spending a long time searching, I finally came across a forum where someone posted a solution! It is so good there are forums out there to help out. So here it is, if anyone wants to know how to center an image in Joomla!

“Believe I cracked the code!  The key was to use 50% instead of zero for the left position, and offset the left-margin by half the width.  This works for my logo (which was 600 pixels wide):

div#logo {
position: absolute;
left: 50%;
top: 0;
float: left;
width: 600px;
height: 75px;
background: url(../images/logo.gif) 0 0 no-repeat;
margin-left: -300px;
margin-top: 25px;
}

Hope this helps someone else that is new to .css and template design.

Regards,
kwc”

This helped me out so much and all I did was experiment with the margins and padding to get my logo exactly where I wanted it. I think brushing up on my CSS will help a lot too in being able to customize Joomla! templates better.

Another discovery I made, which I believe I mentioned earlier, was how to use Phoca Image gallery. After weighing a few different options, I think Phoca will work best for my client to be able to upload images. Unfortunately, it is not as easy to use as a Java-based image uploader, but I think if I provide details on how to do so, it will work just as well.

Another solution I found was adding a watermark to each image. My client does not want any of her images to be stolen and while it is practically impossible to prevent this, there are a few ways to protect pictures. The best solution is to include a watermark on each image. Unfortunately, I could not find any clear tutorial on how to do this, but after playing around a bit on my own and putting a few details together, I discovered how to do this.

First I found this site that informed me Phoca can include a watermark. That seemed to be all I kept finding and it does not give much detail as to what size to make the watermark or how to get it to work properly. It seemed rather vague to me. I discovered in the Phoca Gallery Parameters it lists the large image size and the medium image size. Therefore I created a document in Photoshop that was 640 x 480 pixels and typed the watermark to what size I wanted it to appear on the image. I cropped it down and saved it as a PNG-8.  For some reason, the watermark did not display on images I had already uploaded though, so I tried to upload a new image and then it displayed. I found the PNG-8 was still too fuzzy, so I upgraded to a PNG-24. This fixed the prolbem. I then created a document that was 100pixels x 100pixels as displayed in the parameters for the medium watermark. I then cropped down my text to the size I wanted it to be on the image. Last step is to upload it to the root folder. I had no clue what the root folder was, so after searching on the internet, I discovered it is within the images/phocagallery folder. (Screen shot below.)

Here are the settings:

watermark-large.png: 640 x 480px (crop down accordingly)

watermark-medium.png: 100 x 100px (crop down accordingly)

Save as PNG-24 and place in root folder. Watermark will not change until after you have re-uploaded images.

Besides all this, I tried to show the Office Plus site to the person in charge. Unfortunately, I could not get it to display the site, which I think means I need to export the database from my computer. I will need to practice doing this anyway because I will eventually need to export the database from the local Wamp server on my computer to the remote server on GoDaddy. Let’s hope I get it to work!

The Office Plus site seems to be a success so far. With Joomla! sometimes it is more difficult to do just the basic things such as add an attachment. I wanted to include samples for viewing, but needed to download a plug-in titled Attachments for content articles. This attachment works great and has a video on how to use it directly from the site. One thing to look for is the settings in the parameters. Although I followed the video, I realized that I needed to still change one of the parameters to being that anyone can view an attachment because it was set to logged in users.

Last week I met with my instructor Dom and the web developer club to learn how to transfer Joomla! from the local server to the remote server. This seems a lot more complicated than I had thought, but hopefully I will be able to manage after taking precise notes and asking a lot of questions. I also can check online for some YouTube videos or other tutorials on how to do this. Another thing  I learned at the meeting was how to customize the footer in Joomla! and how to hide certain elements by using display: none; in the CSS. I also got a few suggestions on creating an image gallery that my client can use herself. One option was Phoca, but that is still pretty complicated for someone who is only somewhat computer savvy. Another option is to us an iframe and include a website that has that capability. I had used the concept of iframes for the photo galleries in my photography website, but did not realize exactly what  it is. Apparently a good example of an iframe is Google Maps. The map itself is interactive to the user and contained in an iframe.

iframe example in Google Maps

I am currently tweaking the Office Plus site and still learning how to edit the template. Unfortunately, the first template I chose looked great, but had too many bugs in it. I noticed some files were not named consistently and only one module worked. I guess that’s the risk you take when downloading a free Joomla! template. I am currently working in the milky way template because it is the easiest to work with and is guaranteed to work. I am trying to change the favicon, which I learned is the icon in the upper left of each tab and will be identified in a bookmarked page. Unfortunately, even after clearing the cache, which I thought may be the issue, it still does not display. That is the least of my worries right now though.

I am still waiting for content for one of my sites, but have been keeping busy updating previous client’s sites. I gained some insight after discussing with one of my classmates, how to do pricing and contracting. She suggested doing a set contract for maybe a year if the client is consistently going to be updating and then I can make a consistent pay rate. I think that is a great idea and may make things a bit less confusing.

One last tip for those who tend to spend way too much time trying to figure out problems, such as myself, it seems to work best to limit my time trying to find a solution-let’s say 15 minutes. Then if I cannot find a solution, write down the problem. Either come back to it later or ask an instructor and when you get the answer, write it down. This saves headaches in the long run!

While I have been waiting for content from clients, fortunately, I received work from some previous clients to revise their websites. One client needed the monthly specials page revised and a link added to make it stand out more. I came up with an idea to use photos to draw attention rather than having just text. To compare the difference, you can see that the original page had just text and the revised page, has an image.

In the meantime, another client wanted me to update some pricing, the banner, and some photo galleries. I think one of my greatest challenges was determining how to revise the photo galleries easily and quickly to match what I currently had. I originally used Adobe Photoshop CS3’s automated photo gallery feature. While this worked out well, I updated my software and now use Adobe Bridge CS4 to create photo galleries. As a result, I ended up updating all the image galleries so they were consistent. I did not feel it would be right, however, to charge the client for changes on the other image galleries because it is not his fault I updated my software and cannot do things exactly the same. Fortunately, creating image galleries with this method is quite simple  and took me no more than 5 minutes more to do. I also wanted to apply my newly learned skills in updating the home page slideshow. I originally used an animated gif in Adobe Photoshop CS3. However, since the client wanted more images added, I chose to create a flash slideshow that would have smoother transitions and work better with the browser. While both create slower load times for the page, I felt that the page would still load faster if I include a .swf file instead of an animated gif. You can see changes made here.

One of the greatest challenges in creating this slideshow was determining what approach to use. There are so many different methods of creating a slideshow and then you need to find the right tutorial in showing you how to create it. I chose Adobe Flash CS4 and after much searching, came across a helpful tutorial from Tutorial5.com. One last thing I wanted to learn for the slideshow was creating a stop and pause button for it. This took me awhile to figure out the correct method since, again there are tons of different scenarios in creating a stop and play button on something. I finally found this YouTube video that gave me a general idea on how to do this. While I had taken a course on Adobe Flash CS3, I realized that when you don’t apply concepts very often, you soon forget. The way my textbook was set up, it is useful to an extent, but was very specific in that you needed to follow a tutorial to get exact results, and with a different scenario, sometimes it is easier to just look on the internet. I think for next time, though I need to put a limit on how long I search for information because I think I spent way too much time trying to get the information and wasted a lot of time doing so until I finally got what I wanted and then of course, things kept going wrong. Sometimes it is best to just walk away from a problem for awhile and when you get back to it, it will work.

Another important lesson learned was to be sure and test out a site on your own server before you load it on the client’s. I’m very glad I tested my client’s site on my server first because it did not seem to load everything properly. My style sheet was not attached and my links didn’t go to the correct files. It turns out that somehow the cache in Dreamweaver had been re-created and went to an external hard drive on my computer, therefore linking the files to the external hard drive and not retrieving them. I did not realize this problem until after walking away from it and coming back the next day.

One last thought for now, I am realizing how important it is to create a clear contract and be sure that both you and the client understand it. With doing revisions for clients, I am looking back and my contract and I have pricing for all different things. It seemed fine when doing the website, but when the client needs changes, do I charge my web development fee of $15/hour, my desktop publishing fee of $1/minute, or if they want a slideshow revised, is it the $10/slideshow again? I also put an hourly rate of graphic design for $40, bu then it is $1/minute, which does not make sense. It is important to understand how everything works together in the contract even after the site is complete.

This past week I learned quite a bit about how versatile Joomla! is. I am working with two sites in Joomla! and trying to find ways to customize templates that are already designed. I think it’s great there are so many free templates out there for Joomla! and also so many extensions and plugins all for free! Instead of using Sigplus image gallery, I went to YouTube and discovered the Phoca Photo Gallery. This is a useful video I cam across on working with it: http://www.youtube.com/watch?v=rqli23NE1mA. The Phoca Gallery will be used in my floral shoppe website and I am hoping it will be easy enough for my client to use as well for changing images. It seems to have a user friendly interface. I was hoping there would be a simple plugin like a Java application similar to the one that Facebook uses, but I have not been lucky enough to come across such a thing.

Phoca Gallery Control Panel

Besides the Phoca Gallery for the floral shoppe, I am going to attempt at using a tabs plugin- the Core Design Magic Tabs Plugin. In my honest opinion, unfortunately the support website is not user friendly-at least not for me. I feel like I need to search for information and it keeps sending me in circles, not leading me directly to the answers I need. I also discovered that I not only need to download one plugin, but another script plugin as well. I’ve tried other tab plugins like the Tabs & Slides Plugin, however I keep getting PHP errors every time I try to use it, and I am using it according to the instructions. I suppose I could have created a template from scratch and sliced it with tabs, but the functionality and ability of adding things such as new modules would be more difficult. Also, in editing pre-designed templates, I have a better chance of my site working properly in other browsers. It does seem more time consuming because I need to search for which file is controlling which portion of a page.

Fortunately, despite my frustrations in discovering how each element of a template are working together, I feel it is getting a little easier the more I work with it. There are also two great tools out there- the Web Developer Toolbar add-on for Firefox, and the Firebug extension for Firefox. It is very convenient to edit CSS directly within the site to see what may happen, but the changes are only temporarily made. Firebug and the Web Developer Toolbar allow me to discover where specific elements may be located on the page.

Edit CSS option in web developer toolbar

Firebug at work

In the next couple of weeks, my goal will be to better familiarize myself with these tools and the different Joomla! templates. I am constantly discovering new extensions as well, like the Frontpage Slideshow. This  site has a great demonstration of it, and I think this will really add to a website and make it eye catching. Joomla! sites can have so much added to them and almost always look professional. Even if you do not have all the coding skills in using Joomla! you can still do quite a bit with it.

I am currently working on a site layout for Crescent Moon Florals. With the fact that this site will be designed in Joomla! I am trying to make the layout as simple as possible to avoid any complex changes that need to be made. One thing I would like to do is have the home page of the site with a banner that Graphic Center Inc. created for the company. I think it is very eye catching and will draw the viewer into the site. The only concern of mine is site optimization.

The main page before entering the site will be all images and I know that is not very search engine friendly. I really want to use this as the home page, however. I am thinking when the user clicks on the “home” link, it will open up another page with an introduction, and any other information. Then if the user needs to click on the home page link, it will not bring them to just the page with images and links. To illustrate this, the image below on the right will be the first page the viewer sees and the left image will be within the site.

I am struggling with the main banner, however. I want it to be simple, and have nothing distract from the main logo. The logo and company name, however are together and it would not look right to separate them. So for now I put contact information on either side. I am contemplating using flower images, but that may not fit since the logo is the main focus and is more like a cartoon image, which would not mix well with realistic photos. Normally, web banners come easy for me to design, but this one is kind of a challenge.

I have been looking into ideas for my client to easily include images and be able to change them without my help or needing to know html. Fortunately there is an extensive list of photo gallery extensions for Joomla!. I am considering the sigplus Image Gallery Plus because it seems the easiest to use and supports many different formats.

After going through my training with Joomla! through Lynda.com, I have a better understanding of how it works and I still need to go back sometimes to the videos to remember how to do things. Once you get the hang of it, creating a custom template from scratch is not so bad, however I am learning how limiting it is when you create your own template vs. using an already created one. For instance, I chose to implement a breadcrumbs module because for some reason, the CSS rollovers I implemented do not stay the specified color for a visited link. I figured the breadcrumbs will help the visitor understand where they are in the site a little easier besides the page titles and headings. However, if I wanted to move the breadcrumbs module to the top of the navigation, I would need to go back to my original design and create a spot for it, then change the various XML and PHP files and re-upload them. Also, to solve the Internet Explorer bug, I just kept trying to install and re-install the directory for the site until it finally functioned properly. I also needed to re-do some of the modules, CSS, and articles I had previously created. I think in my next Joomla! projects, I will try changing an already existing template. Although it may be a little more time-consuming, at least I will not have as many problems between browsers and more aspects of the site can easily be added without changing the original file and starting all over.

breadcrumbs and html table

Another challenge with Joomla! will be on my client’s end when the site is complete. The WYSIWYG editor is rather limiting so tables, for instance need to be hand coded in HTML. One of my clients has a schedule of shows that will be changed monthly and to make it more visually appealing, I put this in a table. However, if she chooses to add more dates or less dates, she will need to understand how to hand code HTML tables to enter more data if needed. I am also going to have to look into a way to allow clients to easily change images. I’ve worked with multiple clients who want to be able to change images to a site, however the only way I am familiar with this is by using Adobe Photoshop and implementing the HTML code. Perhaps I can find some sort of add on like a Java application. If a site like Facebook can do something so easily, perhaps there is something out there I can implement in my sites as well.

Lastly, with my overall experiences in general web design, I am getting a much better feel of scope creep. We were warned about it in our WDIM class and now that I am working with clients I understand how it can affect budget and schedule. Communication is extremely important and ensuring that you are clear on how many times things can be edited and what to do if the project ends up going over budget. It is always a good idea to warn clients ahead of time too, otherwise they may become upset. I’ve experienced this before with desktop publishing customers and if I do not warn them of the charge, sometimes I end up sitting there for longer than anticipated and losing out on time that should be charged.

And again, I am coming across new situations and trying to identify new ways to deal with them. I spent quite some time building a site and modifying it in Joomla! only to find out it does not function properly in IE. Of course, there seems to be no easy solution for this and after emailing one of my instructors, he recommended I modify an existing template to avoid this. A few lessons learned here-always test the site as you are building it before you get too far, and ask around for best advice on how to approach building a new site. Here is the new site so far:

Firefox displays excellent

Internet Explorer 8-not so much

Unfortunately, it has something to do with the sections and categories I created. The contact form, which is built into Joomla! originally works just fine, but everything I did for the main content is not displaying. This is rather frustrating and my only solution to ensure it functions correctly is to reinstall the directory and modify a pre-existing template. This seems like a lot more work because I need to identify what parts of the template relate to what html or css file and where it is located. It was so much easier with a template I was already familiar with, but unfortunately it does not work so great.

Dan’s website is finalized and I handed it off to him. Now I am beginning to work with Deborah of Deborah’s Doll Shoppe and am taking on two other projects. I will be working with Cindy, an instructor from school on a Joomla project and Petra who owns a flower shop in Mayville. I believe this is going to be a busy month for me seeing as all my clients want to use a content management system. I will be using Joomla and training from Lynda.com to help me out with this.

Now that I am finally adjusting to the idea of how to charge for websites I have a new challenge. My other clients just wanted a site I could build for them. Now I am getting requests that the client wants to be able to easily add photos and text. I suppose a content management system is the easiest way besides building a template and having the client purchase software. No idea exactly how difficult this may be, but I guess it will be a useful learning experience. I also need to try and figure out pricing for a content management system. According to the web developer club- a content management system costs more because it is more time consuming. For Deborah’s Doll Shoppe, however, I am starting out low because she wants a basic site and I have no idea how much time it will take me. This will be a good trial run.

My training goal: I will complete the following Lynda.com Joomla! training sessions:

Joomla! 1.5 Essential Training

Joomla! Creating and Editing Custom Templates

Joomla! Advanced CSS

That is a total of 8 hours of training so I will have to divide this up into sections and watch a few hours each day. I am glad I have some experience in Joomla! from my Emerging Web Technologies & Trends class so it will not be completely foreign to me.