Web Applications

image.png

Introducing WebMatrix a new way to publish

imageI’m excited to announce that Applied Innovations has partnered with Microsoft and is providing free beta hosting for WebMatrix users. If you’re not familiar with WebMatrix, (that’s probably because it was launched less than an hour ago), let me bring you up to speed.

WebMatrix is a new, easy to use tool from Microsoft that integrates a web server, a file based database server, the web application gallery and as ScottGu put it: “A new view-engine option for ASP.NET that enables a code-focused templating syntax optimized around HTML generation” (that’s fancy talk for you can embed ASP.NET commands right inside your HTML markup).

What makes WebMatrix Cool?

So WebMatrix is one of those tools that makes building new websites for guys like me really easy. You see, I can’t code C# to get save my life (I try but I realize it’s a hack job). What I can do though is take an off the shelf product like WordPress and make it pretty bad ass!.  That’s what WebMatrix will help me do.

Everyone knows I love WordPress. It’s one of those tools let’s a guy like me throw up a quick website and make it look really professional. A great example of this is, www.terryhoffconstruction.com. Terry’s my cousin and builds beautiful homes for a living. His previous website became dated and was difficult for them to manage. So I thought “Hey, we can throw a nice WordPress theme on that site, a couple modifications and have a really nice, professional website” and thus 2 hours later we had Terry’s new website built, deployed and ready to go live.  I’m lucky because I have access to 2000 web servers and just have to spin up a new site or a new VPS server and can build, test and deploy a site like this in no time. But for someone that doesn’t have unlimited access to a thousands of servers, it’s not so easy.

That’s where WebMatrix comes in for you and why it’s cool.   WebMatrix will install the IIS Developer Express server for you, connects to the Web Application Gallery (Part of the WebPI) and let you build a new website on any of a number of open source applications. If you don’t have something that’s required for your particular application (like MySQL or PHP installed) no worries, it will go out download it, install it and configure it all for you with just a click or two.  Then you’ll be able to build a new website on your local machine in no time!   But let me show you.

Building a local WordPress site with WebMatrix

When you start WebMatrix you’ll get a few options as seen below:

image

I’m going to open to install a site from the Web Gallery and it’s going to give me a list of over 2 dozen different applications I can install:

image

I’m going to build a WordPress site so I highlight WordPress and click next and this brings me to a screen that tells me what I’m missing (I’ve already installed PHP and MySQL on my dev machine otherwise it will let me know I needed to download and install those too):

image

After I click “I accept”, it goes out, downloads the installation pack and then asks me for some application specific entries (in this case, it’s my MySQL database info):

image

Runs for a little while

image

and then .. BA-BAM!! All done:

image

And see that installer log? If it runs into any problems, you can view the log and see where it ran into a problem (like if you typed the wrong MySQL root password .. not that I did that before or anything Smile )

Now that it’s built my screen looks like this

image

and if I click on the link http://localhost:38623 there I will see my wordpress site:

image

Run through the wizard and my new WordPress site is ready to build out locally. Now I can add my themes, my plugins, test it out, make sure everything is ready go and then when I’m done locally go ahead and deploy it.

Deploying my WordPress site with WebMatrix

Before I can deploy my site, I’ll need WebMatrix Hosting. I’m going to head over to http://www.appliedi.net/webmatrix and signup for a free WebMatrix hosting account. After I signup I’ll get an email with my information.  Since I plan to connect my WordPress site to a MySQL database I’ll need to log into my control panel and create the MySQL database first (don’t worry instructions on how to do all of this is included in the welcome email).

Then I’m going to start the deployment process. First thing I’m going to do is select the configure publishing settings by click on the arrow below the publish icon:

image

Then I’ll review my Welcome email with instructions on how to publish using Web Deploy:

image

I’ll also want to go ahead and publish my Database so I’ll enter my connection string:

image

As I was instructed to do in the welcome email:

image

So my entire screen looks like the below image:

image

I’ll click the “Validate Connection” to make sure my publish is going to happen correctly. and then click the Publish button.

It’s going to check and see what files need to be updated:

image

And then I’ll tell it to publish everything INCLUDING the MySQL database (let’s see your other web editor do that for you!)

image

After I click publish it starts doing it’s work:

image

And then in a few minutes… My publish is completed

image

and if I click the link…

image

My WordPress site is installed and ready to go.. But don’t just take my word for it. Go check it out yourself: http://testall.web01.appliedi-labs.net/

image.png

The easy way to create your first WordPress Theme.

Tired of trying to find just the right wordpress theme? There’s millions of them to choose from afterall. Would love to create your own but have less artistic talent now than you did in Kindergarten with a box of busted chunks of crayolas? (You know what I’m talking about. First week of school you had brand new Crayolas by the second week they were all bits and pieces and nubs)

Well No worries! Artisteer to the the rescue!  If you can use word, if you can click a couple buttons you can create your own WordPress theme with ease.

Creating your first wordpress theme is as easy as 1, 2, 3

After you download and install Artisteer you’ll want to run (uh duh, tell me something I didn’t know Jess). You’ll be prompted to pick what kind of theme you want to create and it supports more than just WordPress. In fact today it supports WordPress, Joomla, Drupal, an HTML template, an ASP.NET Application and a CodeCharge Studio Template (CodeCharge is for wannabe programmers just like us wannabe artists, I’ll talk about it in the next series and yeah, I use it too and no real programmers use it too).

Here’s the startup screen:

image

You’ll select WordPress and then get a screen like this:

image

Now with absolutely ZERO artistic ability and effort. I could export that theme and have just created my first WordPress theme. Let me show you how.

First you’ll click on the Export Button on the top right.  and it will prompt you with a screen:

image

You’ll give it a name and set a path to where you want it to export to as I did above and then click the OK button to let the magic happen. Open up that folder you had it export to and ta-dah! There it is:

image

That’s it upload that folder to your  wwwroot/wp-content/themes folder and you’ve got your own theme installed and ready to go.

Here’s my blog right now (that uses an artisteer theme)

image

and Here’s my blog with that new theme we just created selected as the theme to use:

image

Just as easy as 1, 2, 3 I was able to completely change up my blog’s design.

Making the Artisteer theme, your theme.

Here’s the thing. I don’t really care for the yellow sunburst, the palm trees or  general layout of this theme so let’s change it up. By clicking the “Suggest Design” a few times, artisteer will randomly create some suggested designs for me and every time it’s something completely different.

After three clicks I got this:

image

I like the design, but I don’t care for the colors. So I click the suggest colors button a few times and I get:

image

Those are colors I can live with but I don’t like the background so guess what, I click suggest background:

image

Now I can go through and get suggestions for every element of my theme and I can also go in and tweak the particular features of the theme as well. Let’s look at the header. I want to change it up. So at the top I click Header and get a new menu bar at the top:

image

Now I can change the background image, the text location, add a foreground photo, etc, etc, etc.

With a little playing around (and don’t worry if you goof it up just click the undo button at the very top to roll back) this is what I came up with:

image

Yeah, I know what’ you’re thinking. That’s one scary clown Jess.. But you get the idea, you can tweak every single element of your theme and if you actually have (unlike me) more artistic talent than you did in kindergarten with those broken bits of crayola, it will look pretty nice.

If you haven’t grabbed artisteer yet, definitely do head over and give it a whirl.