Adobe Creative Cloud Subscription for Business Catalyst Website

by filip 21. June 2012 12:40

We recently got the Adobe Creative Cloud subscription at work, and I wanted to check out their web hosting plan – one of the features is hosting for up to five websites.

Step 1: Creating a Website

I’ve never hosted a website with Adobe (or, more specifically, Business Catalyst), so I wasn’t sure where to start.  I looked around the website, and eventually found that there are three ways to create a website:

  • Muse: an Adobe program for non-programmers to create websites
  • Dreamweaver: an Adobe program for programmers to create websites (last time I used this was maybe 12 years ago)
  • BusinessCatalyst.com: an online management tool for websites

The documentation I read on Adobe.com indicated that even if I go the Muse or Dreamweaver route, I’ll eventually need to use BusinessCatalyst to manage my site for things such as DNS, so I went to BusinessCatalyst.com.  Also, I didn’t really feel like installing Muse or Dreamweaver, as I have no intention of using either of those programs (I like to use Visual Studio for those types of tasks).

Well, turns out that creating my website with BusinessCatalyst.com was a mistake. Creative Cloud subscriptions come with five webBasic websites. These types of websites can be created from Muse (or possibly Dreamweaver).  However, creating from BusinessCatalyst.com will create a webCommerce site. I noticed the problem when I tried to promote my site to live. When clicking the “Upgrade” button, it started asking for my credit card info. After a chat with their CSR, my site was “downgraded” to webBasic and I was able to push the site to live.

Step 2: DNS – Creating a Subdomain

I did not want to move my website to Business Catalyst. What I wanted was a place to store files on the Adobe Cloud, while keeping my website where it was.  To do that, I wanted a subdomain, images.bloodforge.com, to be hosted on Adobe’s cloud. Everything else with bloodforge.com would remain where it was.

The first step is to go to the administration section of the website created in Step 1 above, clicking on Manage Site-> Site Settings –> Site Domains. Click on “New Domain” button on the top of the page, and configure the domain. In the “Domain” field, enter the full domain name of your site. So, in my example, I entered “images.bloodforge.com”, without the quotes. Select “Use an external DNS server” radio button option, and copy the IP address listed. You will need this in the next step.  Click on the “Save” button.

Now that you have the IP address of your site, log into the DNS manager of your current website (which in my case was Arvixe, but it could just as well have been GoDaddy or something similar.  You will need to create an “A” record for your domain, and point it to the IP address you just copied from BusinessCatalyst when creating your domain. So, in my example, I created an “A” record for "bloodforge.com” with a name of “images”, and pointed it to the correct IP address.

At this point, you should be able to go to the domain you just created. Type the full domain (in my case, images.bloodforge.com) into your browser and you should now be at the BusinessCatalyst website.

Step 3: FTP files to your Adobe/Business Catalyst website

You’ll need to obtain the FTP settings for your website from BusinessCatalyst. Log into the admin section of the website created in Step 1, and go to “ManageSite” –> “Site Manager” –> “File Manager”, and click on the “Upload Files” button at the top of the page. There should be a Tip on this page, and if you click on the “See Details” button, it will show you the details for your FTP login info. In my case, it was:

  • host: images.bloodforge.com
  • username: images.bloodforge.com/{Business Catalyst username}
  • password: {Business Catalyst password}

I use FileZilla to FTP, and I entered in the information above. I was rather disappointed that BusinessCatalyst used standard FTP with plain text encryption. Doesn’t seem very secure, but it is what it is.

I was able to upload “.aspx” pages to the site, however, it did not execute. Seems like the handler for the file types is disabled. However, other files, such as images, serve up just fine. One thing to keep in mind is that if you upload HTML files, they will not be exactly the same when you access them with a browser. BusinessCatalyst adds some of their own stuff into your files.

Tags: ,

Personal | Web Development

Improving Google Page Speed Score for BlogEngine

by filip 22. February 2012 17:47

I was getting a 72/100 score from Google Page Speed, so I attempted to improve that a bit.

I added caching to static resources via the web config, which raised my score by about 10:

<staticContent>
  <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
  <remove fileExtension=".mp4" />
  <remove fileExtension=".gif" />
  <remove fileExtension=".htm" />
  <remove fileExtension=".html" />
  <remove fileExtension=".jpeg" />
  <remove fileExtension=".jpg" />
  <remove fileExtension=".js" />
  <remove fileExtension=".png" />
  <remove fileExtension=".txt" />
  <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
  <mimeMap fileExtension=".gif" mimeType="image/gif" />
  <mimeMap fileExtension=".htm" mimeType="text/html" />
  <mimeMap fileExtension=".html" mimeType="text/html" />
  <mimeMap fileExtension=".jpeg" mimeType="image/jpeg" />
  <mimeMap fileExtension=".jpg" mimeType="image/jpeg" />
  <mimeMap fileExtension=".js" mimeType="application/x-javascript" />
  <mimeMap fileExtension=".png" mimeType="image/png" />
  <mimeMap fileExtension=".txt" mimeType="text/plain" />
</staticContent>

New page score: 82/100

I then made sure that all of my custom javascript files went through the javascript handler in BlogEngine, which raised my score to by 3:

<script language="javascript" type="text/javascript" 
src="/js.axd?path=%2fmyuploads%2fbf_script.js&minify="></script>

New page score: 85/100

I then uninstalled the syntax highlighter extension from BE. This upped my page rank by another 3.

New page score: 88/100

There's still some room for improvement, though... I want to get as close as possible to 100 :)

Tags: , , , ,

Web Development

Internet Explorer 9 (IE9) CSS3 Support – Platform Preview

by filip 16. March 2010 16:05

I downloaded the platform preview version of IE9 today to test out some CSS support. I ran a few tests through it, with the following results.  The picture on the left was generated using Firefox 3.6 (keep in mind that I did have to use the “-moz” prefix in front of all but one style to make it work in FF). The IE content is on the right.

 

It certainly is possible that IE requires some vendor-specific suffix like Firefox did. However, I did not use any prefix, so the style may actually be supported in some form.

In any case, the only supported feature out of the four I tested was border-radius (and that is actually the one I’m most excited about). The box-shadow would be next on my list. Hopefully that gets put in the next preview.

Tags: , ,

Web Development

Extract Formatted Text From Excel Cell With C# (Rich Text Format)

by filip 17. September 2009 02:17

I was writing an application that needed to convert text in a cell in an Excel workbook to HTML. It is fairly trivial to get formatting for the entire cell, but each individual character in the cell could have different formatting itself, so I needed something more specific than cell-level formatting info.

At first, I started using the Excel.Range.get_Characters( pos, len ) method to get info out of the cell.  The code would loop through all characters, get them one by one, and check the formatting.  For example:

   1: Microsoft.Office.Interop.Excel.Range Range = (Microsoft.Office.Interop.Excel.Range)Cell;
   2: int TextLength = Range.Text.ToString().Length;
   3: for (int CharCount = 1; CharCount <= TextLength; CharCount++)
   4: {
   5:     Microsoft.Office.Interop.Excel.Characters charToTest = Range.get_Characters(CharCount, 1);
   6:     bool IsBold = (bool)charToTest.Font.Bold;
   7:     bool IsItalic = (bool)charToTest.Font.Italic;
   8:     // other formatting tests here
   9: }

However, that method proved to be incredibly slow for cells that have more than just a few characters.  For cells that have 1000+ characters, it would take several minutes to run the test across all characters. I kept playing around with different ways to speed up the whole process, but it just became apparent that making the call to Excel to get all of this information was not going to be acceptable.

Finally, I think I’ve found the solution. It is possible to copy the text from a cell to the clipboard, and then use the Clipboard class to retrieve the formatted text, and parse it with C#. I ended up using the System.Windows.DataFormats.Rtf format to extract the data from the clipboard in the following way:

string rtf = (string)System.Windows.Clipboard.GetData(System.Windows.DataFormats.Rtf);

Then, I create a System.Windows.Forms.RichTextBox, and use that to parse the data. The following is a sample of the solution, and it is reasonably quick.

   1: Microsoft.Office.Interop.Excel.Range Range = (Microsoft.Office.Interop.Excel.Range)Cell;
   2: Range.Copy(System.Reflection.Missing.Value);
   3:             
   4: string rtf = (string)System.Windows.Clipboard.GetData(System.Windows.DataFormats.Rtf);
   5: System.Windows.Forms.RichTextBox rtb = new System.Windows.Forms.RichTextBox();
   6: rtb.Rtf = rtf;
   7:             
   8: int CharCount = rtb.Text.Length;
   9:  
  10: for (int CharNum = 0; CharNum < CharCount; CharNum++)
  11: {
  12:    rtb.Select(CharNum, 1);
  13:    System.Drawing.Font Font = rtb.SelectionFont;
  14:    bool IsCharBold = Font.Bold;
  15:    bool IsCharUnderline = Font.Underline;
  16:    bool IsCharItalic = Font.Italic;
  17:  
  18:    // other code here


I was also asked about getting the color in the comments. To get the color, you can use:

System.Drawing.Color color = rtb.SelectionColor;

There are also other properties of rtb dealing with selection, such as SelectionAlignment, SelectionBackColor, etc. See the RichTextBox class for more info.

Tags: , , ,

Windows Development

Flexible AutoComplete (Suggested Words) Code for Text Input Fields using JavaScript

by filip 14. November 2008 12:32

As I'm sure you've seen on many websites, displaying suggestions while a user types text into a text field has become quite popular. However, I was rather disappointed with the solutions I've found out there. The solutions I've found had any combination of the following problems:

  • No cross-browser support: Obviously, any acceptable solution needs to work across the major browsers.
  • Limited to a single text field per page: The solution needs to be flexible enough to allow multiple text fields on a page to either display the same suggestions, or display a completely different set of suggestions.
  • Ease of use: The solution needs to be simple to use, yet powerful enough to allow the designer to fairly easily modify the way the code works and change the look of the suggestions.

With that in mind, I attempted to improve on an existing library. I started working with this one, but pretty soon I realized that I would need to rewrite basically all the code. Below is a description of the code. In order to make this work, you will need to add the following to the <head> of your HTML page:

<script language="javascript" type="text/javascript" src="autocomplete.js"></script>

The file referenced above can be downloaded here.


It's probably best to see what we're doing, so below is an example of a text field that uses the autocomplete code. It only auto-completes some text that starts with the letter t, so make sure you type that as the first letter.


Suggests words after the user types in a T (ex: two, three )

Assuming you have the autocomple.js file correctly included in the page, the way to populate the autocomple drop down is with the collowing code:

<input type="text" size="40" autoComplete="mygroup1" /> 
<script language="javascript" type="text/javascript"> 
    autoComplete.Set("mygroup1", new Array("two", "three", "twenty", "tweak", "tool", 
"two hundred", "testing", "two-thirds", "terran", "tomato", "tower", "twin", "task",
"toolbar", "test")); </script>

In order to demonstrate that this is flexible enough to support multiple text fields on the same page, here is another example of a text field, along with the code necessary to display it. Also, notice that I'm creating a new "group", which allows me to display different suggestions in the text field. If I wanted to, I could simply assign the same "group", and this second text field would have identical suggestions to the one above.


Suggests words after the user types in a F (ex: four, five )

<input type="text" size="30" autoComplete="mygroup2" /> 
<script language="javascript" type="text/javascript"> 
    autoComplete.Set("mygroup2", new Array("four", "five", "fifty", "fast", "filip", "fun", 
"feast", "farse", "football", "fantasy", "fork", "fanta", "festival", "fall", "foo")); </script>

Obviously, people will want to style the drop downs differently. The autocomplete.js file contains script which registers a default style, but it also allows you to pass in a style using the autoComplete.Set() method. In the example below, I've created a new style, and assigned it by passing the class name of the style as the third parameter into the Set() method.


Suggests words after the user types in a A (ex: apple, art )

<style type="text/css"> 
.newPopupStyle { font-family:Verdana; font-size: 9pt; color:aqua; width: 150px; margin: 3px; 
background-color: Red; font-weight: bold; } .newPopupStyle div { top: -3px; left: -3px; background: brown; border: solid 1px blue;
position: relative; overflow: auto; max-height: 100px; } .newPopupStyle span { cursor: default; margin: 2px; display: block; } .newPopupStyle span.wordSelected { background: yellow; color: Fuchsia; } </style>
<
input type="text" size="30" autoComplete="mygroup3" /> <script language="javascript" type="text/javascript"> autoComplete.Set("mygroup3", new Array("apple", "aspen", "art", "artistic",
"abracadabra"), "newPopupStyle"); </script>

There is more you can do with the code. The javascript file is farily well documented, so hopefully if you need to change anything, it will be pretty straightforward. You can actually greatly reduce the size of the file if you remove the comments.

KNOWN ISSUES:

  1. If the margin of the body tag is not 0, the drop down will not render in the appropriate spot in IE. Apply a margin (ex: <body style="margin: 0;"> ) to fix the problem.

UPDATES:

  1. Feb. 25, 2009 – Fixed a problem in autocomplete.js.  It should now also work on Safari 4.0 beta.

LICENSE:

  • I have received a few questions about the license for this code.  You can use this code for any purpose, including commercial.  If you do find issues or bugs with the code, I do ask that you let me know so that I can put in a fix.

Tags: , ,

Web Development

About Filip Stanek

Death Note Pic I'm a developer at ACG in Cincinnati, OH. I like ASP.NET, Flash, and other web technologies, & enjoy playing chess, video games, etc.

Currently playing:
- StarCraft IIE-mail me Send mail

Disqus

Month List