This is Part 2 of How to Use Bitnami and Netbeans to Create a Local Development Site and in this session we discuss a more complex system where you are working working back and forth from a live remote website.
Rick: The next choice is a more complex system and that is where you have a local copy of a live remote website and you are working back and forth. Now I also do that routinely on complicated projects and an example of that is this one here, this Stanfield site. This is a development server that I have set up. You know, I do my Web Development under the name Tailoring the Web and so this is a subdomain under my domain called stanfield.tailoringtheweb. And I was helping a designer developer do some programming on this site. So this is the site that we were working on together.
However, this is the site where I was practicing my programming here on this Stanfield site and I can make a local copy of this Stanfield site run simply by you know, coming down here to index PHP and saying run again and it’s going to come up in Internet Explorer. Now this local copy’s going to look a lot different than the development server copy because I use this for testing the programming of this little virtual catalog and of the shopping cart that we were customizing. And so this doesn’t have all of the other designer’s customization added to it.
But the way I created this was by cloning that development site before we’ve gotten all the pretty design work done and then turning it into a local website. And then I used this local website here for me to practice my programming. And so you know, I ended up installing Thesis 1.8.2 on the site and then you know, I created some custom templates for it and brought it some customized shop files for the plugin. And then I created my own, well you know, custom functions PHP and a couple of other extra sets of functions that relate to this plugin. And I did all that work on a function to test the functionality of it before I uploaded it to this site here.
And the way I would do that is you know, by first, obviously, editing the file. And once I was comfortable with the way it looked or the way it was working locally then I would just rev up FileZilla and I have Stanfield synchronized. So let’s see, so ttw Stanfield, it’s synchronized. This is all my local drive C Wampwww.stanfield… This is my Stanfield project and this is that remote site. And so when I have something that I want to upload and in fact, what we’ll do is we’ll do it the other way around. We will download the custom CSS and custom functions PHP. Well, I’m just going to download CSS for a moment. But it works the other way too right? So that this provides me with the connection between my local project that I’m working on in NetBeans and the remote site that I am developing in.
And again, this works just fine in Firefox. So actually, let’s just refresh this and you can see what this looks like with the latest CSS files. I guess it doesn’t look much different with the latest CSS files but oh yeah, this is a little different.
Anyway, this doesn’t, from my perspective, this local version doesn’t need to be perfect because I’m not really testing what it looks like. What I’m testing is how my programming is working and you know, that’s what really matters in this testing.
However, if I wanted to, let’s just go back to that. If I wanted to use Web Developer to you know, in between both of these sites, I could easily you know, go to this existing site and then also create a version of my or go to a version of my local site and flip back and forth between them. And what Web Developer… the purpose for Web Developer in this case is just for me to be able to test stuff you know, before I actually put it on this file. I will test its appearance in Web Developer and let’s see… so Angie, I’m going to turn your microphone back on. So did that make sense?
Angie: Yes. You mind if I kind of recap it into my words and see if I’m on the right track here?
Rick: Not at all. Go ahead.
Angie: Okay so Bitnami, I can use Bitnami to set up a local copy of WordPress on my computer and I can play with that and I get my…style my own… the way I want and upload the different plugins and want to see how it’s been looking and work right?
Angie: Rick: Yup, that’s right.
Okay. NetBeans, now I take NetBeans and turn it into a project and do some more stuff and do more of the same type of thing that I can’t do with just the dashboard, correct?
Rick: Well, NetBeans is for… in particular, is for programming. So you’re going to use NetBeans to edit your custom CSS and custom function php files. That’s primarily what you do it with.
Angie: That way I can see what it’s going to look like and make sure it doesn’t break anything right?
Rick: That’s correct.
Angie: Okay and in Web Developer, now if I can do all of that with NetBeans, why do you need Web Developer?
Rick: Well, the purpose for Web Developer is for you to test what it looks like before you actually put the code in NetBeans. So yeah, for example…
Angie: So it’s more of a visual for you to actually put the code in.
Rick: It is, yeah. Let’s say you know, I want to look… I want to see what this looks like if I change this one to red, right? So if I come over here and I inspect this element and I see that you know, this element style has this color of orange… well so what happens if I change it to red? You know, do I like the way it looks now that it’s changed to red? Do I like that better? I don’t know. You know, maybe the font size needs to be bigger. Maybe I like red if it was at 20 points but I don’t like at you know… so this gives you a choice or chance to very easily change and see what it looks like when you make the change without this change being real because this change isn’t real. As soon as you refresh the screen, all your changes go away because they’re not… the changes are only in how Firefox shows you the website. They’re not real changes to the website.
Angie: Okay so now if you want to make them real then you would take that code that you just changed and you would copy that to your NetBeans project in the appropriate place, correct?
Rick: That’s correct. And so for example, under custom CSS, let’s say that I want… let’s see, let’s look at my quick link bar here and have bar, slideshow, sidebar… okay quick link drop down. Okay let’s say that the owner said, “You know, I really want this thing centered.” And so, I said, “Okay well let’s see, then that means maybe we want 100 pixels over there.” Well, that’s a little bit too much. Let’s make it 70. Okay, 60 and then you know, once I was happy with that, I’ll measure it just to make sure. Okay so that is 60 pixels there and 65 pixels… 66 pixels there. So in fact, what I really want to do is I want to make it 63. And now I’m good… pardon me, 63 pixels, turn off, measure it. And now what I can do is just copy this piece of code and go over to my custom CSS file for this thing and then scroll down to the appropriate place. There it is, quick link drop down and paste it. And now I have committed this… I have this code now on this form. I can save it and I can then upload it to my live site or I can just keep on playing until I’ve got where I want to be and then upload that stuff to the live site.
Angie: Okay so now I can say you’re comfortable developing real stuff but for someone like me who’s just getting started, will this be the scenario? Set up a NetBeans project and… I mean, set up a Bitnami in a local WordPress installation and use NetBeans and Web Developer to play around with it and learn as I go around with CSS and that way, I’m not breaking anything or harming anything.
Rick: Yes, absolutely. And you have this added benefit then of once you’ve got this set up as a project for example, you can ask yourself… well, you can say, “Okay I need to… I think I’m going to add something else.” .custom .something. And you have the benefit of this but you can say, “Well, let’s see, color red semi-colon.” This is… pardon me. Let’s go to… that’s what I really wanted to do. What I really wanted to do is say style builder… okay, there we go.
So we have style builder and I can say okay, well let’s make this Helvetica and let’s make that font size 14 point and let’s give it a background color of silver or you know, hexadecimal color. And then if you want to see what it looks like in preview, now you can see. It’s got that light grey, it’s got the red text, it’s got the larger text. And then you can say you know, shoot! I think I need a little bit of padding. And so you know, maybe you come over here and you say let’s just try 5 pixels of padding and then you can look at it in the preview.
And so you can do that and what has happened here is it’s actually written all that code for you. You didn’t type in that code, right? All you did was select options so that’s one of the benefits of doing it this way.
Angie: Right now, it’s all kind of confusing to me. I don’t know. Some things I have to do a dash or some things you do an underscore or I don’t know which at times you do which. It’s a little bit confusing.
Rick: Yeah and there’s not necessarily a right answer to that question to that anyway.
Angie: Oh okay.
Rick: Usually, you use dashes in CSS. That’s what you usually do but it’s not always that way and so, for example, Thesis in its HTML stuff will often put underscore. Now if you didn’t have an underscore under format text, if you did a format-text, it wouldn’t work because the actual name of the HTML structure is format_text. So you have to use the right one because it depends but all of Thesis’ structural elements have underscores in between them.
Angie: Oh okay.
Rick: The convention that I generally follow is that if it is structural element then I will underscore. If it’s just a style then I’ll use a hyphen. But that’s just own personal taste. It doesn’t have anything to do with what’s right or wrong. In fact, there’s not right or wrong there anyway but…
Angie: Okay so you just need to kind of develop your own and be consistent?
Angie: Okay. Well, that helps. Thank you, I think I got the…
Rick: This does make it very easy for you to… you know, for example, you notice how I put my mouse in this section under custom product box input type submit? As soon as I did that, this preview of it shows up. And so you can easily you know, go to places and just stick your cursor in that box and under the preview, you’ll see that it looks like. So you know, large, centered red text looks just like that. You know, new 16 point orange red looks like that. So that is the nice thing about this… one of the nice things about using a smart text editor like NetBeans.
Okay well, that definitely helps out a lot. Thank you.
Rick: Is that it?
Angie: That’s it. Thank you.
Rick: Okay, you’re welcome. Have a good day.
Angie: Okay you too.