<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Port 80 Solutions</title>
	<atom:link href="http://blog.port80solutions.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.port80solutions.com</link>
	<description>Port 80 Solutions&#039; services, products, and discussions</description>
	<lastBuildDate>Thu, 24 Nov 2011 22:32:46 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Social Media</title>
		<link>http://blog.port80solutions.com/2011/11/03/social-media/</link>
		<comments>http://blog.port80solutions.com/2011/11/03/social-media/#comments</comments>
		<pubDate>Thu, 03 Nov 2011 17:43:06 +0000</pubDate>
		<dc:creator>jshwaluk</dc:creator>
				<category><![CDATA[Social Media]]></category>
		<category><![CDATA[web manager]]></category>
		<category><![CDATA[web tips and tricks]]></category>

		<guid isPermaLink="false">http://blog.port80solutions.com/?p=352</guid>
		<description><![CDATA[Do you want to start leveraging social media technologies on your web site?  If so, read on for our introductory blog about embedding social media tools in your website. Today we will outline the steps necessary to link to your Twitter feed or Facebook page using the Web Manager by Port 80 Solutions.  We will [...]]]></description>
			<content:encoded><![CDATA[<p><em>Do you want to start leveraging social media technologies on your web site?  If so, read on for our introductory blog about embedding social media tools in your website.</em></p>
<p>Today we will outline the steps necessary to link to your <a href="http://twitter.com">Twitter</a> feed or <a href="http://www.facebook.com/">Facebook</a> page using the <a href="http://www.port80solutions.com/content/web-manager/index.asp">Web Manager</a> by Port 80 Solutions.  We will also go over the steps for embedding a <a href="http://www.youtube.com/">YouTube </a>video on your site.  Linking to your feeds is only the first step, but it is an important one.  We will go over more advanced techniques in future blog posts.</p>
<h2>Twitter / Facebook</h2>
<p>The following steps outline how to link to your Twitter feed or your Facebook page (or both!).  For this example, we will link to the BBC&#8217;s twitter feed (<a href="http://twitter.com/BBC">twitter.com/BBC</a>) and Facebook page (<a href="http://www.facebook.com/bbcnews">facebook.com/bbcnews</a>).</p>
<p><strong>Note:</strong> The following steps outline how to create these links using the <a href="http://www.port80solutions.com/content/web-manager/seamless-editing-system.asp">Seamless Editing System</a> (SES).  More detailed information for the can be found in the <a href="http://www.port80solutions.com/images/ses/ses-guide.htm#common-tasks" target="_blank">SES FAQ</a>.  Instructions for the classic editor can be found in the <a href="http://www.port80solutions.com/Groups/Client%20Support/Web%20Manager%20Administrator%20Guide.pdf" target="_blank">Web Manager Administration Guide</a>.</p>
<h3>1) Upload the appropriate image(s) to your site</h3>
<p>Download these images to your computer:</p>
<p><img class="alignleft size-full wp-image-358" title="twitter-large" src="http://blog.port80solutions.com/wp-content/uploads/2011/11/twitter-large.png" alt="" width="38" height="39" /> <img class="alignleft size-full wp-image-359" title="facebook-large" src="http://blog.port80solutions.com/wp-content/uploads/2011/11/facebook-large.png" alt="" width="38" height="39" /></p>
<p>&nbsp;</p>
<p><em>Right-click each image and select &#8220;Save Image As&#8230;&#8221; or &#8220;Save Picture As&#8230;&#8221; (depends on your web browser)</em></p>
<p>Now, <a href="http://wm.p80.ca/admin/login.asp">login to the Web Manager</a> and upload the image(s) to your website using the &#8220;Manage Files&#8221; interface.</p>
<p><img class="aligncenter size-medium wp-image-360" title="social-media-manage-files" src="http://blog.port80solutions.com/wp-content/uploads/2011/11/social-media-manage-files-239x300.jpg" alt="" width="239" height="300" /></p>
<p>Take note of which folder you&#8217;ve uploaded to for later reference.</p>
<h3>2) Add the image to a page on your website</h3>
<p>Now, edit the page you would would like to add the link to.  Use the &#8220;Insert Image&#8221; dialog and &#8220;Browse Server&#8221; to find the appropriate file that you uploaded in Step 1.</p>
<p style="text-align: center;"><img class="aligncenter size-medium wp-image-361" title="social-media-image-properties-1" src="http://blog.port80solutions.com/wp-content/uploads/2011/11/social-media-image-properties-1-300x267.jpg" alt="" width="300" height="267" /></p>
<p>The next screen shows the Twitter image being used.</p>
<p><img class="aligncenter size-medium wp-image-362" title="social-media-image-properties-2" src="http://blog.port80solutions.com/wp-content/uploads/2011/11/social-media-image-properties-2-300x266.jpg" alt="" width="300" height="266" /></p>
<p>The image should be previewed in the dialog.  <strong>Don&#8217;t click OK yet!</strong></p>
<p><strong>Important:</strong>  Set the &#8220;Border&#8221; field to &#8220;0&#8243; (zero) to prevent the <a href="http://webdesign.about.com/od/beginningtutorials/f/blfaqimgborder.htm">ugly default HTML border</a> that will automatically be placed.</p>
<h3>3) Link the image to your Twitter Feed or Facebook page</h3>
<p>Click the &#8220;Link&#8221; tab option.  Put the entire link to your Twitter feed or Facebook page in the &#8220;URL&#8221; field.</p>
<p><img class="aligncenter size-medium wp-image-363" title="social-media-image-properties-3" src="http://blog.port80solutions.com/wp-content/uploads/2011/11/social-media-image-properties-3-300x267.jpg" alt="" width="300" height="267" /></p>
<p>Click &#8216;OK&#8217; and you&#8217;re done!  Publish your changes and your visitors will be able to easily find your Twitter feed and Facebook page!</p>
<h2><strong>YouTube</strong></h2>
<p>An excellent way to stream videos for FREE is to embed a YouTube video on your website.  Follow the instructions at <a href="http://www.youtube.com/">www.youtube.com</a> to sign up and get your video posted.  Once it is streaming at YouTube, you can embed it on your website.</p>
<p>For this example, we&#8217;ll use this video:</p>
<p><a href="http://www.youtube.com/watch?v=_xMz2SnSWS4" target="_blank">http://www.youtube.com/watch?v=_xMz2SnSWS4</a></p>
<h3>1) Get your video&#8217;s embed code</h3>
<p>Follow these steps to get the HTML embed code:</p>
<ol>
<li>View the video at YouTube:<br />
<a href="http://www.youtube.com/watch?v=_xMz2SnSWS4" target="_blank">http://www.youtube.com/watch?v=_xMz2SnSWS4</a></li>
<li>Click the &#8220;Share&#8221; button<br />
<img class="alignnone size-full wp-image-366" title="social-media-share" src="http://blog.port80solutions.com/wp-content/uploads/2011/11/social-media-share.jpg" alt="" width="295" height="37" /></li>
<li>Click the &#8220;Embed&#8221; option<br />
<img class="alignnone size-full wp-image-376" title="social-media-share" src="http://blog.port80solutions.com/wp-content/uploads/2011/11/social-media-share1.jpg" alt="" width="459" height="411" /></li>
<li>Copy the &#8220;Embed&#8221; code to your clipboard.<br />
<strong>Tip:</strong> An easy way to keep it handy is to paste it into a <a href="http://www.microsoft.com/resources/documentation/windows/xp/all/proddocs/en-us/app_notepad.mspx?mfr=true" target="_blank">blank Notepad document</a>.</li>
</ol>
<p>Alternatives steps for obtaining this code are available at the YouTube Help section:<a href="http://www.google.com/support/youtube/bin/answer.py?answer=171780" target="_blank"></p>
<p>http://www.google.com/support/youtube/bin/answer.py?answer=171780</a></p>
<h3>2) Paste the Embed code onto your web page</h3>
<p>Now, <a href="http://wm.p80.ca/admin/login.asp">login to the Web Manager</a> and edit the web page you would like to add the YouTube video to.  Edit the region you would like to add the clip to and click the &#8220;Source&#8221; toolbar option:</p>
<p><img class="alignnone size-full wp-image-369" title="social-media-source-1" src="http://blog.port80solutions.com/wp-content/uploads/2011/11/social-media-source-1.jpg" alt="" width="316" height="75" /></p>
<p>This will open a dialog that has all of the current region&#8217;s HTML source code.  Make sure that you only modify the code between the <span style="color: #ffff00;">&lt;body style=&#8221;width:100%; overflow:hidden&#8221;&gt;</span> and <span style="color: #ffff00;">&lt;/body&gt;</span> sections.</p>
<p>Paste the Embed code obtained into the Source dialog:</p>
<div id="attachment_370" class="wp-caption alignnone" style="width: 310px"><a href="http://blog.port80solutions.com/wp-content/uploads/2011/11/social-media-source-2.jpg"><img class="size-medium wp-image-370" title="social-media-source-2" src="http://blog.port80solutions.com/wp-content/uploads/2011/11/social-media-source-2-300x242.jpg" alt="" width="300" height="242" /></a><p class="wp-caption-text">Click for a full sized image.</p></div>
<p><strong>Important Note:</strong> If you are embedding the Video into a region that already has text and content, you need to be careful where you place it so you do not corrupt the existing HTML.  The simplest way to do this is to place the code immediately after the <span style="color: #ffff00;">&lt;body style=&#8221;width:100%; overflow:hidden&#8221;&gt;</span> code  (top of the region) or immediately before the <span style="color: #ffff00;">&lt;/body&gt;</span> code (bottom of the region).</p>
<h3>3) Test</h3>
<p>After the code has been entered into the Source dialog, click &#8220;ok&#8221;.  The clip will show up in your editor.   If it is too large, or too small, return to Step 1, and pick different sizing options from YouTube&#8217;s embed dialog and replace the code in Step 2 with your new code.</p>
<p>Once everything looks good, Publish the web page and it will be available to your website visitors!</p>
<h2>Conclusion</h2>
<p>Embedding a YouTube video is a powerful way to add more life to your website.  Linking to your Twitter feed and Facebook page is just the first step to integrating these social media technologies into your website.  Check back for future articles that will explain how to more tightly integrate your Twitter and Facebook accounts with your Port 80 Solutions Web Manager site!</p>
<p><strong>Resources</strong></p>
<ul>
<li>Facebook Social Plugins<br />
<a href="http://developers.facebook.com/docs/plugins/">http://developers.facebook.com/docs/plugins/</a></li>
<li>Twitter for Websites<br />
<a href="https://dev.twitter.com/docs/twitter-for-websites">https://dev.twitter.com/docs/twitter-for-websites</a></li>
<li>YouTube &#8211; Uploading Videos<br />
<a href="http://www.google.com/support/youtube/bin/topic.py?topic=16547" target="_blank">http://www.google.com/support/youtube/bin/topic.py?topic=16547</a></li>
<li>YouTube &#8211; Sharing Videos<br />
<a href="http://www.google.com/support/youtube/bin/topic.py?topic=16569" target="_blank">http://www.google.com/support/youtube/bin/topic.py?topic=16569</a></li>
<li>Seamless Editing System (SES) Guide<br />
<a href="http://www.port80solutions.com/images/ses/ses-guide.htm" target="_blank">http://www.port80solutions.com/images/ses/ses-guide.htm</a></li>
<li>Web Manager Administration Guide<br />
<a href="http://www.port80solutions.com/Groups/Client%20Support/Web%20Manager%20Administrator%20Guide.pdf" target="_blank">http://www.port80solutions.com/Groups/Client%20Support/Web%20Manager%20Administrator%20Guide.pdf</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://blog.port80solutions.com/2011/11/03/social-media/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Isolating content with tables</title>
		<link>http://blog.port80solutions.com/2011/07/13/isolating-content-with-tables/</link>
		<comments>http://blog.port80solutions.com/2011/07/13/isolating-content-with-tables/#comments</comments>
		<pubDate>Wed, 13 Jul 2011 22:45:47 +0000</pubDate>
		<dc:creator>ksawatski</dc:creator>
				<category><![CDATA[seamless editor]]></category>
		<category><![CDATA[web manager]]></category>
		<category><![CDATA[web tips and tricks]]></category>

		<guid isPermaLink="false">http://blog.port80solutions.com/?p=308</guid>
		<description><![CDATA[This article is the second in a series that&#8217;s dedicated to providing help tips and tricks for working with our online content editor.  If you missed the first article, you can view it here: http://blog.port80solutions.com/?p=220. You can dramatically reduce the time it takes to manage and format content on your web pages with a bit [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;">
<p>This article is the second in a series that&#8217;s dedicated to providing help tips and tricks for working with our online content editor.  If you missed the first article, you can view it here: <a href="http://blog.port80solutions.com/?p=220">http://blog.port80solutions.com/?p=220</a>.</p>
<p>You can dramatically reduce the time it takes to manage and format content on your web pages with a bit of planning and the careful use of TABLES. The idea is that you want to group chunks of text that are going to be formatted the same way into their own &#8220;container&#8221; &#8211; in this case, a table cell. While tables are not the preferred way to lay out content, they can come in handy particularly for novice content editors who have used a word processor before but have limited experience with web page publishing and HTML.</p>
<p>Outside of the usual branding (logos, banner images and navigation menus), a typical page content consists of the following items:<br />
1. A main heading<br />
2. One or more paragraphs of content mixed with images and links<br />
3. one or more links to a supporting resource file, social media sharing, etc</p>
<p>This is simple enough to build with a table, after a bit of planning.   We&#8217;ll create a table with three rows and a single column, laid out like this:</p>
<div id="attachment_313" class="wp-caption alignnone" style="width: 310px"><a href="http://blog.port80solutions.com/wp-content/uploads/2011/07/Table-Layout.png"><img class="size-medium wp-image-313 " title="Table Layout" src="http://blog.port80solutions.com/wp-content/uploads/2011/07/Table-Layout-300x82.png" alt="Table Layout" width="300" height="82" /></a><p class="wp-caption-text">Layout of a typical article post</p></div>
<p>To add a table to your content, locate the <img title="Table Icon" src="http://www.port80solutions.com/images/ses/icons/table.gif" alt="Table Icon" width="25" height="25" /> icon in the editor toolbar. The following image shows how we&#8217;ll configure the table.  If you know the exact width of the table, you can specify the size in pixels.  Otherwise, choose 100 percent so that the table will fill its page region.</p>
<div id="attachment_314" class="wp-caption alignnone" style="width: 310px"><a href="http://blog.port80solutions.com/wp-content/uploads/2011/07/Table-Properties.png"><img class="size-medium wp-image-314 " title="Table Properties" src="http://blog.port80solutions.com/wp-content/uploads/2011/07/Table-Properties-300x159.png" alt="Table Properties" width="300" height="159" /></a><p class="wp-caption-text">Configure table layout</p></div>
<p><strong>TIP</strong>: <em>Some browsers will show a faint outline of the cells so that you can see where your content is in relation to the rest of the table.  If yours doesn&#8217;t show the outline, right click on the table and select Table Properties, and then set the border size to 1.  This will outline the cells for you.  It&#8217;s best to remove the border when you&#8217;re finished by going into the Table Properties again and setting the border to 0.  The default border style just isn&#8217;t very attractive.</em></p>
<p>Now we&#8217;re ready to populate our content.  Simply type the heading text into the top row, enter the main body of the content in the middle, and put any supplementary links or information in the bottom.</p>
<p><a href="http://blog.port80solutions.com/wp-content/uploads/2011/07/Content-in-Table.png"><img class="size-medium wp-image-319 alignnone" title="Content in Table" src="http://blog.port80solutions.com/wp-content/uploads/2011/07/Content-in-Table-300x155.png" alt="Populated content in table" width="300" height="155" /></a></p>
<p>Now we have our content but it needs a bit of dressing up.  We can apply styles or other formatting as usual by selecting the text and assigning the desired style or applying colours, bolding etc.  Since each &#8220;chunk&#8221; of text is isolated in its own table cell, it&#8217;s easy to select only the text we want and make changes without it affecting anything else, and future updates will be that much simpler.</p>
<p><a href="http://blog.port80solutions.com/wp-content/uploads/2011/07/Completed-Table.png"><img class="size-medium wp-image-320 alignnone" title="Completed Table" src="http://blog.port80solutions.com/wp-content/uploads/2011/07/Completed-Table-300x179.png" alt="Completed content" width="300" height="179" /></a></p>
<p>We can add more rows to the table once we have new content.  Simply right click on the bottom row and choose to add another row after the current.  You can add as many as you want, however if subsequent posts require different layouts it may be best to just add another table underneath with its own set of rows and columns.</p>
<h2>The DIV element</h2>
<p>A DIV is a simple block-level HTML container, which is just a fancy way of saying that it will take up an entire line (or lines) and will be separated from content above and below it.  They essentially act like a table cell, but without the table, so there&#8217;s consequently a lot less HTML markup code required.</p>
<p>By default, the content editor will automatically place your content in a DIV container, and create a new one when you press the ENTER key.</p>
<p>TIP: <em>If you&#8217;re working on content within a DIV container, and you want to add some line spaces but keep the content in the same DIV (so that it&#8217;s easier to format the content together all at once), press and hold the SHIFT key when pressing the ENTER key.  This will add a simple line break rather than creating a separate DIV for the next line of content.</em></p>
<p>Want to see how your content is constructed as far as the HTML markup is concerned?  Click the Show Blocks icon <img class="alignnone" title="Show Blocks icon" src="http://www.port80solutions.com/images/ses/icons/showblocks.gif" alt="Show Blocks icon" width="25" height="25" /> and a faint outline will appear around each block level element.  Your content should be organized so that similar formatted content are grouped together in their own blocks.</p>
<h2>Summary</h2>
<p>It&#8217;s important to isolate sections of content into their own HTML containers so that you can accurately apply formatting to each section.  Isolating the content also means that it&#8217;s much easier to avoid inadvertently formatting neighbouring content &#8211; for example applying a Heading style to the heading portion of the text only instead of the article text.  An easy way to isolate content is through the use of TABLE and DIV elements.  TABLE elements give you a bit more control over what content appears where, but it also produces much more HTML code which can make it harder to read and manage.  When in doubt, use the Show Blocks icon to see how your content is being laid out, and adjust from there.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.port80solutions.com/2011/07/13/isolating-content-with-tables/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Content Editing Tips</title>
		<link>http://blog.port80solutions.com/2011/05/16/content-editing-tips/</link>
		<comments>http://blog.port80solutions.com/2011/05/16/content-editing-tips/#comments</comments>
		<pubDate>Mon, 16 May 2011 19:47:02 +0000</pubDate>
		<dc:creator>ksawatski</dc:creator>
				<category><![CDATA[seamless editor]]></category>
		<category><![CDATA[web manager]]></category>
		<category><![CDATA[web tips and tricks]]></category>

		<guid isPermaLink="false">http://blog.port80solutions.com/?p=220</guid>
		<description><![CDATA[One of the most common complaints about working with an online content editor is related to problems that arise when formatting content.  Common formatting commands such as bolding/underlining text, applying a style, or creating and deleting list items all can have unexpected results which include, but are not limited to: Structure and layout changes &#8211; [...]]]></description>
			<content:encoded><![CDATA[<p>One of the most common complaints about working with an online content editor is related to problems that arise when formatting content.  Common formatting commands such as bolding/underlining text, applying a style, or creating and deleting list items all can have unexpected results which include, but are not limited to:</p>
<ul>
<li> Structure and layout changes &#8211; blocks of content shift up or down the page or disappear entirely</li>
<li> Selection expansion &#8211; applying a bold format, or a colour affects more text than what was selected</li>
<li> Pasted content appears differently than in the original source document</li>
</ul>
<p>For the most part, these problems can be traced back to how formatting is interpreted by the web browser.  Every time you apply a formatting command to a piece of text, it is wrapped in an HTML tag that defines the formatting to apply, and the beginning and end of the formatting.  For example, <span style="text-decoration: underline;">this is underlined</span> is actually generated through the following markup: &lt;u&gt;this is underlined&lt;/u&gt;. There are many different tags that are available to achieve formatting such as bolding, underline, colours, fonts and more.</p>
<p>When a block of text has more and more formatting applied to it over time, the code behind the scenes can get quite messy and this is usually where the trouble begins.  The problem can be exacerbated when content is pasted in from another source, such as a Word document, as the source&#8217;s proprietary tags are usually included though they are not applicable to the web.</p>
<p><a href="http://blog.port80solutions.com/wp-content/uploads/2011/05/PasteFromWord.jpg"><img class="size-medium wp-image-228 alignleft" style="margin-top: 60px; margin-bottom: 60px;" title="Content pasted from Word" src="http://blog.port80solutions.com/wp-content/uploads/2011/05/PasteFromWord-300x105.jpg" alt="Content pasted from Word" width="300" height="105" /></a></p>
<div id="attachment_229" class="wp-caption alignleft" style="width: 310px"><a href="http://blog.port80solutions.com/wp-content/uploads/2011/05/PasteFromWordSource.jpg"><img class="size-medium wp-image-229" title="Messy Source Code" src="http://blog.port80solutions.com/wp-content/uploads/2011/05/PasteFromWordSource-300x166.jpg" alt="Messy Source Code" width="300" height="166" /></a><p class="wp-caption-text">The word content brings with it a LOT of invalid and unnecessary code.  This makes it difficult for the browser to interpret and near impossible for a user to read.</p></div>
<p><strong style="clear: both;">Working with &#8220;clean&#8221; content:</strong><br />
Sometimes if the content is too difficult to work with, the best thing to do is cut it out of the editor, and then repaste is using the Paste as Plain text icon.  You can also paste it into a text editor such as notepad, which will strip all the formatting from it, and then paste it back into the editor.</p>
<p>Once the content has been reduced to plain text, then apply the formatting but try to keep it to a minimum.  For example, if you have a heading, a main paragraph of text, and a link which will all be using the Verdana font in various sizes, apply the font format to the entire block of text, then adjust the sizes individually rather than changing the font and size for each part.  This will reduce the amount of formatting applied, which will make it easier to manage later.</p>
<div id="attachment_291" class="wp-caption alignnone" style="width: 310px"><a href="http://blog.port80solutions.com/wp-content/uploads/2011/05/CleanedSource.jpg"><img class="size-medium wp-image-291     " title="Clean Source Code" src="http://blog.port80solutions.com/wp-content/uploads/2011/05/CleanedSource-300x167.jpg" alt="Clean Source Code" width="300" height="167" /></a><p class="wp-caption-text">Here is the source code after it was re-pasted as plain text and then formatted.  Much cleaner!</p></div>
<p>Play the video below to see a brief walk through of how to successfully paste and format the content.</p>
<p>
<object width="695" height="255">
<param name="movie" value="http://blog.port80solutions.com/wp-content/uploads/2011/05/PlainTextPaste_controller.swf"></param>
<param name="quality" value="high"></param>
<param name="wmode" value="window"></param>
<param name="menu" value="false"></param>
<param name="bgcolor" value="#FFFFFF"></param>
<param name="allowScriptAccess" value="always"></param>
<embed type="application/x-shockwave-flash" width="695" height="255" src="http://blog.port80solutions.com/wp-content/uploads/2011/05/PlainTextPaste_controller.swf" quality="high" bgcolor="#FFFFFF" wmode="window" menu="false" ></embed>
</object>
</p>
<p>In the next article, we&#8217;ll discuss how to isolate chunks of content using the TABLE and DIV elements.  Stay tuned!</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.port80solutions.com/2011/05/16/content-editing-tips/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Create a simple form in Form Builder</title>
		<link>http://blog.port80solutions.com/2011/03/24/create-a-simple-form-in-form-builder/</link>
		<comments>http://blog.port80solutions.com/2011/03/24/create-a-simple-form-in-form-builder/#comments</comments>
		<pubDate>Thu, 24 Mar 2011 22:56:29 +0000</pubDate>
		<dc:creator>jshwaluk</dc:creator>
				<category><![CDATA[Form Builder]]></category>
		<category><![CDATA[products]]></category>
		<category><![CDATA[web manager]]></category>
		<category><![CDATA[web tips and tricks]]></category>
		<category><![CDATA[contact]]></category>
		<category><![CDATA[forms]]></category>

		<guid isPermaLink="false">http://blog.port80solutions.com/?p=159</guid>
		<description><![CDATA[Today, we are going to take a look at the Form Builder tool.  This powerful, WYSIWYG tool gives you the power to create advanced web-based data collection forms.  Data collected from these forms can be: Stored in an online database, exportable to a spreadsheet file. Emailed to a contact list. Creating advanced forms requires a [...]]]></description>
			<content:encoded><![CDATA[<p>Today, we are going to take a look at the <a href="http://www.port80solutions.com/content/web-manager/Components/form-builder.asp">Form Builder tool</a>.  This powerful, <a title="What you see is what you get." href="http://en.wikipedia.org/wiki/Wysiwyg" target="_blank">WYSIWYG</a> tool gives you the power to create advanced web-based data collection forms.  Data collected from these forms can be:</p>
<ol>
<li>Stored in an online database, exportable to a spreadsheet file.</li>
<li>Emailed to a contact list.</li>
</ol>
<p>Creating advanced forms requires a much more indepth tutorial.  Therefore, this post will be an overview of the Form Builder tool along with instructions for creating a simple &#8220;Contact Form&#8221; that is emailed to a specific address.<br />
<span style="text-decoration: underline;"><br />
Please note</span>:<strong> </strong>Microsoft Internet Explorer must be used to create and update Form Builder forms.  Resulting forms can be filled out and submitted using any web browser.</p>
<p><strong>Create a new form wizard</strong></p>
<p><span style="text-decoration: underline;">Step 1</span> &#8211; Simply provide a name for the form.</p>
<p><span style="text-decoration: underline;">Step 2</span> &#8211; Select a form type.  For this example, we will select an <strong>Email</strong> form.  Data submitted from clients will be sent to contact(s) specified in Step 3.</p>
<p><span style="text-decoration: underline;">Step 3</span> &#8211; Select the contact information.  The <strong>To</strong> address will have all the form data emailed to it.  The <strong>From</strong> address is the sender.  To help with spam filters, this should be a valid email address.  The <strong>Subject</strong> field&#8217;s value will be appended to the form&#8217;s name to help identify the data for the recipient.</p>
<p><span style="text-decoration: underline;">Step 4</span> &#8211; Pick a <strong>Success URL</strong> to send users to after they have submitted the form.  It should have some simple data in it thanking the user for her/his submission.  The <strong>Failure URL</strong> is used when an error occurs while processing the form.</p>
<p>When you have completed the wizard, click the <strong>Finished</strong> button to begin working with the form.</p>
<p><strong>Form Builder Layout</strong></p>
<p>Closing the wizard will present you with a blank form page.  Here are the main sections:</p>
<div id="attachment_176" class="wp-caption alignright" style="width: 310px"><a href="http://blog.port80solutions.com/wp-content/uploads/2011/03/form-2.jpg"><img class="size-medium wp-image-176 " title="Form Builder Layout" src="http://blog.port80solutions.com/wp-content/uploads/2011/03/form-2-300x286.jpg" alt="Form Builder Layout" width="300" height="286" /></a><p class="wp-caption-text">Click to see the full size</p></div>
<p style="text-align: left;">
<p style="text-align: left;"><span style="text-decoration: underline;">Yellow</span> &#8211; these are the form elements that you will use to collect data.  Simply click and drag an element into the form body (red section) to add it to the form.  See below for an explanation of each control.</p>
<p><span style="text-decoration: underline;">Blue</span> &#8211; the tool bar is used to format text and save/publish your form.  See below for an explanation of the key buttons.</p>
<p><span style="text-decoration: underline;">Green</span> &#8211; this is the properties box.  The contents here are context-specific.  The screen on the right shows the form body&#8217;s properties (width, default font, etc).  The properties listed here will depend on which controls you have selected in the form area.  You can modify the fields that are not greyed out.</p>
<p><span style="text-decoration: underline;">Red</span> &#8211; this is your form&#8217;s body.  The contents in the box will be shown on any page you add the form to.</p>
<p><strong>Key Toolbar Elements</strong></p>
<p><img title="btnProperties.gif" src="http://blog.port80solutions.com/wp-content/uploads/2011/03/btnProperties.gif" alt="" width="15" height="16" /> Form Properties &#8211; opens the form wizard so you can change the type of form, the email settings, or the destination URLs.</p>
<p><img title="btnSave.gif" src="http://blog.port80solutions.com/wp-content/uploads/2011/03/btnSave.gif" alt="" width="15" height="16" /> Save &#8211; saves the form without publishing it.  For forms that are in use, this is akin to saving a &#8220;draft&#8221; of your changes.  Clients will not see the changes, and you will be able to continue with your edits in the future.</p>
<p><img title="btnBuildDB" src="http://blog.port80solutions.com/wp-content/uploads/2011/03/btnBuildDB.gif" alt="" width="15" height="16" /> Set Form Live &#8211; this &#8220;publishes&#8221; the form so that clients can interact with on page(s) it has been added to.  Any time you modify an existing form, you must  &#8220;Set Form Live&#8221; to update the page(s) the form is on.</p>
<p><strong>Form Elements</strong></p>
<p><img src="http://blog.port80solutions.com/wp-content/uploads/2011/03/fb-icon-TextBox.gif" alt="" /> Text Box &#8211; A simple one-line text box used to collect text or numeric data.  Use the &#8220;required&#8221; property to indicate whether or not the field is mandatory for form submission.</p>
<p><img src="../wp-content/uploads/2011/03/fb-icon-TextArea.gif" alt="" /> Text Area &#8211; multi-line text answers.  Let users submit longer answers in paragraph form if desired.</p>
<p><img src="http://blog.port80solutions.com/wp-content/uploads/2011/03/fb-icon-DropBox.gif" alt="" /> Dropdown Box &#8211; A list of items, allowing a user to select ONE of the options listed.</p>
<p><img src="../wp-content/uploads/2011/03/fb-icon-SelectBox.gif" alt="" /> Select Box &#8211; a list of options in a scrollable box.  Multiple options can be selected by using &#8220;CTRL + Click&#8221;</p>
<p><img src="http://blog.port80solutions.com/wp-content/uploads/2011/03/fb-icon-RadioButton.gif" alt="" /> Radio Button &#8211; present a list of options.  A user can select one item from each group.</p>
<p><img src="http://blog.port80solutions.com/wp-content/uploads/2011/03/fb-icon-CheckBox.gif" alt="" /> Check Box &#8211; present a list of options.  A user can select any number of the available options.</p>
<p><img src="http://blog.port80solutions.com/wp-content/uploads/2011/03/fb-icon-SubmitButton.gif" alt="" /> Submit Button &#8211; submit the form for processing.  Each form must have a Submit Button in order to save and email the submission.</p>
<p><strong>Text and Decoration Elements</strong></p>
<p><img src="../wp-content/uploads/2011/03/fb-icon-Label.gif" alt="" /> Label &#8211; textual content on the form.  Format the text using the formatting toolbar.</p>
<p><img src="http://blog.port80solutions.com/wp-content/uploads/2011/03/fb-icon-Frame.gif" alt="" /> Frame &#8211; borders around sections of the form.  For appearances only.</p>
<p><img src="http://blog.port80solutions.com/wp-content/uploads/2011/03/fb-icon-Image.gif" alt="" /> Image &#8211; used to add an image to the form.</p>
<p><strong>Creating A Sample Contact Form</strong></p>
<p>The following video shows how to create a simple contact form.  Elements are dragged onto the screen and have their properties updated.  When the form is ready to go, simply click the <img src="http://blog.port80solutions.com/wp-content/uploads/2011/03/btnBuildDB.gif" alt="" /> (Set Form Live) toolbar button.</p>
<p><span style="color: #ff9900;"><span style="text-decoration: underline;">Note</span>:  The most important property for each input control is the &#8220;Name&#8221; property.  This is the user-friendly identifier for each control and should describe the data collected by the control.  Eg:  &#8220;First Name&#8221;, &#8220;Email&#8221;, &#8220;Comments&#8221;.  See the sample email at the end of this blog to see the relationship between the &#8220;Name&#8221; property and each respective user-submitted value.</span></p>
<p>
<object width="547" height="498">
<param name="movie" value="http://common.port80solutions.com/videos/Create%20a%20simple%20form_controller.swf"></param>
<param name="quality" value="high"></param>
<param name="wmode" value="window"></param>
<param name="menu" value="false"></param>
<param name="bgcolor" value="#FFFFFF"></param>
<param name="allowScriptAccess" value="always"></param>
<embed type="application/x-shockwave-flash" width="547" height="498" src="http://common.port80solutions.com/videos/Create%20a%20simple%20form_controller.swf" quality="high" bgcolor="#FFFFFF" wmode="window" menu="false" ></embed>
</object>
</p>
<p><strong>Add the Form to a Web Page</strong></p>
<p>When you are satisfied with the form, it will need to be added to a page on your website so that users can interact with it.  The Forms are &#8220;components&#8221; in the Web Manager.</p>
<p>To add a form to a page, follow the &#8220;Add Component&#8221; instructions in the Seamless Editing System.  See &#8220;Managing Components&#8221; in the &#8220;SES Guide&#8221; &#8211; <a href="http://www.port80solutions.com/images/ses/ses-guide.htm#common-tasks" target="_blank">www.port80solutions.com/images/ses/ses-guide.htm#common-tasks</a></p>
<p style="text-align: center;">
<div id="attachment_199" class="wp-caption aligncenter" style="width: 301px"><a href="http://blog.port80solutions.com/wp-content/uploads/2011/03/live-form.jpg"><img class="size-medium wp-image-199 " title="Contact Form" src="http://blog.port80solutions.com/wp-content/uploads/2011/03/live-form-291x300.jpg" alt="Contact Form" width="291" height="300" /></a><p class="wp-caption-text">The Contact Form on a Web Page - click to see a full size view.</p></div>
<p style="text-align: left;"><strong>Email Notification</strong></p>
<p style="text-align: left;">Once the form has been filled out and submitted, an email with the data will be sent to the contact(s) specified in Step 3 of the Wizard.</p>
<p style="text-align: left;">
<div id="attachment_200" class="wp-caption aligncenter" style="width: 310px"><a href="http://blog.port80solutions.com/wp-content/uploads/2011/03/form-email.jpg"><img class="size-medium wp-image-200" title="form data email" src="http://blog.port80solutions.com/wp-content/uploads/2011/03/form-email-300x250.jpg" alt="form data email" width="300" height="250" /></a><p class="wp-caption-text">Form Builder Email - click to see full size.</p></div>
<p><strong>Summary</strong></p>
<p>The Form Builder tool is a very powerful <a href="http://www.port80solutions.com/content/web-manager/index.asp">Web Manager</a> component.  It provides you with the ability to quickly create an advanced, professional form that retrieves all the relevant data from your clients, visitors, and/or members.</p>
<p>Check back in the future for more Form Builder-related blogs as we explore more powerful capabilities such as reporting and using lookup tables.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.port80solutions.com/2011/03/24/create-a-simple-form-in-form-builder/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Inviting Users in Virtual Office 2.0</title>
		<link>http://blog.port80solutions.com/2011/03/03/inviting-users-in-virtual-office-2-0/</link>
		<comments>http://blog.port80solutions.com/2011/03/03/inviting-users-in-virtual-office-2-0/#comments</comments>
		<pubDate>Thu, 03 Mar 2011 15:55:06 +0000</pubDate>
		<dc:creator>jshwaluk</dc:creator>
				<category><![CDATA[products]]></category>
		<category><![CDATA[services]]></category>
		<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[virtual office]]></category>
		<category><![CDATA[invitations]]></category>
		<category><![CDATA[registration]]></category>
		<category><![CDATA[roles]]></category>
		<category><![CDATA[vo2]]></category>

		<guid isPermaLink="false">http://blog.port80solutions.com/?p=136</guid>
		<description><![CDATA[Virtual Office 2.0 allows organizations to group people into organizational units, limiting access so that users with specific tasks or jobs can only access specific areas.  For example, there can be a &#8220;Management&#8221; VO2 Office, an &#8220;Accounting&#8221; VO2 Office, etc. In most cases, access to Offices in VO2 is managed by the office  administrator. However, [...]]]></description>
			<content:encoded><![CDATA[<p>Virtual Office 2.0 allows organizations to group people into organizational units, limiting access so that users with specific tasks or jobs can only access specific areas.  For example, there can be a &#8220;Management&#8221; VO2 Office, an &#8220;Accounting&#8221; VO2 Office, etc.</p>
<p>In most cases, access to Offices in VO2 is managed by the office  administrator. However, and office can be configured so that members of an office can invite other users in the organization, or non-registered users into the office.</p>
<p>Inviting users into an office has several advantages:</p>
<ol>
<li>A large number of users can be quickly invited into the office &#8211; all that&#8217;s required is an email address for each user.</li>
<li>Administrators are saved the task of creating accounts for new users and then assigning them to the office.</li>
<li>Invited users are able to specify their own details while registering.  Therefore, there is no need to confirm the spelling of names or to create and relay temporary passwords.</li>
<li>Administrators can designate a default &#8220;role&#8221; for invited users, so they are automatically granted a specific permission level.</li>
<li>Users have the ability to ignore or decline an invitation.  They only appear in the member list if they have accepted an invitation so it is easy to tell who has accepted an invitation and is ready to participate in the office.</li>
</ol>
<p><em>The following is an overview of how to setup an office to allow invitations, and the steps involved in accepting an invitation.</em></p>
<p><strong>Administration &#8211; Setting Up Invitations</strong></p>
<p>By default all VO2 offices allow invitations to be made.  It is the role-permissions that control whether or not a user can invite users into an office.</p>
<p>The first step to controlling invitations is to specify a default role invited users are assigned to.  When editing or creating an office, the Administrator should pick a &#8220;Default Invitation Role&#8221;.  This is the role assigned to users that accept an invitation into the office.</p>
<div id="attachment_138" class="wp-caption aligncenter" style="width: 595px"><a href="http://blog.port80solutions.com/wp-content/uploads/2011/03/default-invitation-group.jpg"><img class="size-full wp-image-138" title="default invitation role" src="http://blog.port80solutions.com/wp-content/uploads/2011/03/default-invitation-group.jpg" alt="default invitation role" width="585" height="76" /></a><p class="wp-caption-text">Users invited into an office are assigned a specific role.</p></div>
<p>The administrator is able to control who can invite users by setting up the permissions for specific roles.</p>
<div id="attachment_139" class="wp-caption aligncenter" style="width: 329px"><a href="http://blog.port80solutions.com/wp-content/uploads/2011/03/invite-new-members-permission.jpg"><img class="size-full wp-image-139" title="invite new members permission" src="http://blog.port80solutions.com/wp-content/uploads/2011/03/invite-new-members-permission.jpg" alt="invite new members permission" width="319" height="373" /></a><p class="wp-caption-text">Only users with the &quot;Invite New Members&quot; permission have the ability to invite people.</p></div>
<p>Users who belong to a role with &#8220;Invite new members&#8221; checked are presented with the &#8220;Invite Users&#8221; command while in the office.</p>
<p>That&#8217;s it!  Once these settings have been setup by the administrator, then specific users within an office will have the ability to invite new and existing users into their Virtual Office 2.0 office environment for future collaboration.</p>
<p><strong>Inviting User(s) into a VO2 Office</strong></p>
<p>Users in a VO2 Office belonging to a role that has been granted the &#8220;Invite New Members&#8221; permission can invite new users into the office in the &#8220;Members&#8221; section.  When in the &#8220;Members&#8221; section, there will be an &#8220;Invite Users&#8221; menu option.</p>
<div id="attachment_140" class="wp-caption aligncenter" style="width: 584px"><a href="http://blog.port80solutions.com/wp-content/uploads/2011/03/invite-users-button.jpg"><img class="size-full wp-image-140" title="invite users button" src="http://blog.port80solutions.com/wp-content/uploads/2011/03/invite-users-button.jpg" alt="members area - invite users button" width="574" height="56" /></a><p class="wp-caption-text">Use &quot;Invite Users&quot; in the &quot;Members&quot; area to start the wizard.</p></div>
<p>Clicking the button will start the &#8220;Invite Users&#8221; wizard.  The first step asks for a list of one or more email addresses to send an invitation to.  Each email address should be entered on a separate line.  There is no limit to the number of users to invite.</p>
<div id="attachment_142" class="wp-caption aligncenter" style="width: 587px"><a href="http://blog.port80solutions.com/wp-content/uploads/2011/03/invite-users1.jpg"><img class="size-full wp-image-142" title="invite users" src="http://blog.port80solutions.com/wp-content/uploads/2011/03/invite-users1.jpg" alt="invite users" width="577" height="279" /></a><p class="wp-caption-text">Each email address should be on a separate line.</p></div>
<p>After entering the email address(es), clicking &#8220;Next&#8221; will show the default invitation email&#8217;s message.  This can be customized to contain specific information for the invitation.</p>
<div id="attachment_143" class="wp-caption aligncenter" style="width: 589px"><a href="http://blog.port80solutions.com/wp-content/uploads/2011/03/invite-message.jpg"><img class="size-full wp-image-143" title="invite message" src="http://blog.port80solutions.com/wp-content/uploads/2011/03/invite-message.jpg" alt="invitation message" width="579" height="558" /></a><p class="wp-caption-text">Provide a custom message to accompany the invitation.</p></div>
<p>Clicking &#8220;Send Invitation(s)&#8221; will send the message to all the email addresses entered in the first step.  A confirmation dialog will then be displayed.</p>
<div id="attachment_144" class="wp-caption aligncenter" style="width: 587px"><a href="http://blog.port80solutions.com/wp-content/uploads/2011/03/invite-confirmation.jpg"><img class="size-full wp-image-144" title="invite confirmation" src="http://blog.port80solutions.com/wp-content/uploads/2011/03/invite-confirmation.jpg" alt="confirmation of invitation" width="577" height="221" /></a><p class="wp-caption-text">The status of each invitation is shown here.</p></div>
<p>Each invitee will receive the notification email and will be able to accept or ignore the invitation.   Now we will look at the process required to <em>Accept </em>an invitation to a VO2 Office.</p>
<p><strong>Accepting an Invitation to a VO2 Office</strong></p>
<p>To accept an invitation, click on the link in the notification email.  Upon reaching the login screen, the user will be presented with the following message:</p>
<div id="attachment_145" class="wp-caption aligncenter" style="width: 398px"><a href="http://blog.port80solutions.com/wp-content/uploads/2011/03/invitation-notice.jpg"><img class="size-full wp-image-145" title="invitation notice" src="http://blog.port80solutions.com/wp-content/uploads/2011/03/invitation-notice.jpg" alt="Invitation Notice" width="388" height="101" /></a><p class="wp-caption-text">This message is displayed above the login dialog.</p></div>
<p>If you are already registered, login as usual.   Unregistered users should click the &#8220;Register Now&#8221; link below the login box.  Upon completing the registration process, return to the login page and login to the system.</p>
<p>Upon logging in to Virtual Office 2.0, see the &#8220;Invitations&#8221; box on the left-hand side.  It will list any VO2 offices that you have been invited to.</p>
<div id="attachment_146" class="wp-caption aligncenter" style="width: 222px"><a href="http://blog.port80solutions.com/wp-content/uploads/2011/03/invitation-list.jpg"><img class="size-full wp-image-146" title="invitation list" src="http://blog.port80solutions.com/wp-content/uploads/2011/03/invitation-list.jpg" alt="VO2 invitation list" width="212" height="142" /></a><p class="wp-caption-text">All pending office-invitations will be listed here.</p></div>
<p>Clicking an office will present you with a brief description of the office.  You can then choose to &#8220;Accept&#8221; or &#8220;Decline&#8221; the invitation.</p>
<div id="attachment_147" class="wp-caption aligncenter" style="width: 588px"><a href="http://blog.port80solutions.com/wp-content/uploads/2011/03/accept-invitation.jpg"><img class="size-full wp-image-147" title="accept invitation" src="http://blog.port80solutions.com/wp-content/uploads/2011/03/accept-invitation.jpg" alt="Invitation Offer" width="578" height="148" /></a><p class="wp-caption-text">An administrator provides the office overview - choose whether or not to accept the invitation.</p></div>
<p>Clicking on &#8220;Accept Invitation&#8221; will add you to the office, and you will be assigned the role selected by Administrators and granted the permissions available in that role.</p>
<div id="attachment_148" class="wp-caption aligncenter" style="width: 577px"><a href="http://blog.port80solutions.com/wp-content/uploads/2011/03/invitation-complete.jpg"><img class="size-full wp-image-148" title="invitation complete" src="http://blog.port80solutions.com/wp-content/uploads/2011/03/invitation-complete.jpg" alt="vo2 invitation complete" width="567" height="62" /></a><p class="wp-caption-text">You have successfully joined the office.</p></div>
<p>By following these simple steps, any number of users can be quickly invited to participate in a VO2 Office, collaborating via discussions, live meetings, and sharing documents.</p>
<p>Check back soon for more information about how <strong>Permissions</strong> and <strong>Roles</strong> work Virtual Office 2.0.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.port80solutions.com/2011/03/03/inviting-users-in-virtual-office-2-0/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Image optimization for the web</title>
		<link>http://blog.port80solutions.com/2011/02/17/image-optimization-for-the-web/</link>
		<comments>http://blog.port80solutions.com/2011/02/17/image-optimization-for-the-web/#comments</comments>
		<pubDate>Thu, 17 Feb 2011 21:44:35 +0000</pubDate>
		<dc:creator>ksawatski</dc:creator>
				<category><![CDATA[web manager]]></category>
		<category><![CDATA[web tips and tricks]]></category>
		<category><![CDATA[image optimization]]></category>
		<category><![CDATA[page editor]]></category>
		<category><![CDATA[tips]]></category>

		<guid isPermaLink="false">http://blog.port80solutions.com/?p=90</guid>
		<description><![CDATA[Image optimization is an important step to take when planning and deploying content to your website, yet often people miss this step when they publish their pages. Why is this a problem?  For most people, the most readily available source of images is their own personal digital camera which store the images in a high [...]]]></description>
			<content:encoded><![CDATA[<p>Image optimization is an important step to take when planning and deploying content to your website, yet often people miss this step when they publish their pages.</p>
<p>Why is this a problem?  For most people, the most readily available source of images is their own personal digital camera which store the images in a high resolution format that isn&#8217;t suitable to the web.</p>
<p>These hi-resolution images can easily take up to 5MB in storage space and they must be resized in order to fit on the page.  This results in a poorer experience for your website&#8217;s visitors because of:</p>
<ol>
<li>Long wait times when viewing, particularly when you have several large images on a page.  Even with a high-speed connection it can take up to a minute to download a web page, and most people will lose interest before that happens.</li>
<li>Browsers aren&#8217;t great at scaling down images on the fly, so images often look blocky or fuzzy and are difficult to read.</li>
<li>Storing and downloading large files can add to the cost of website hosting.  If a large image is placed in a common area such as a banner or footer, you could be committing your visitors to a large download on every page of your website.</li>
</ol>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<p><div class="wp-caption alignnone" style="width: 335px"><img class="  " title="Unoptimized digital camera image" src="http://www.port80solutions.com/images/blog/unopt.jpg" alt="Unoptimized digital camera image" width="325" height="214" /><p class="wp-caption-text">Original image, scaled down in the browser - note the artifacts and jagged lines.  Image size: 1.8MB   ---  Time to download: 15 secs</p></div></td>
<td>
<p><div class="wp-caption alignnone" style="width: 335px"><img class=" " title="Resized, web optimized image" src="http://www.port80solutions.com/images/blog/opt.png" alt="Resized, web optimized image" width="325" height="214" /><p class="wp-caption-text">Resized, web optimized image - lines are smooth.  Image size: approximately 100kb  --- Time to download: &lt;1 sec</p></div></td>
</tr>
</tbody>
</table>
<div>
<p>It&#8217;s a good idea to do some planning before adding any images (or content for that matter) to a page.  Are you going to be using the image on a number of different pages or just one?  Does your hosting provider charge for bandwidth use? &#8211; A lot of really large, high-resolution images can eat up your bandwidth limit in a hurry!  Does the image require a transparent background so that you can place it on top of another image or background colour?</p>
<p>Once you&#8217;ve determined your needs, there are a few steps involved in optimizing the image:</p>
<ol>
<li><strong>Choose a file type</strong>.  Popular file types are .<a href="http://en.wikipedia.org/wiki/GIF" target="_blank">GIF</a>, .<a href="http://en.wikipedia.org/wiki/JPEG" target="_blank">JPG </a>and .<a href="http://en.wikipedia.org/wiki/Portable_Network_Graphics" target="_blank">PNG</a>.  JPG files tend to compress the best, but don&#8217;t support transparencies.  GIF is widely supported but often won&#8217;t compress very well.  Both GIF and PNG will allow transparent backgrounds to varying degrees, while PNG tends to blend a bit better when placed over a background colour or image. ﻿﻿Also, PNG is the only image type that supports graduated blending, but it is not well supported in older web browsers.</li>
<li><strong>Determine the dimensions</strong>.  You&#8217;ll want to resize the image so that it fits easily into the area of the page.  If you&#8217;re going to be using the same image in several different places, try to determine the maximum size that it will be so as to reduce the amount of resizing the browser will need to do.  You may find that even your resized version of the image just doesn&#8217;t scale down well in your browser, so in this case it&#8217;s best to have multiple versions of the same image that are sized appropriately.</li>
<li><strong>Save the image as a web version</strong>.  Many graphic editing programs such as  Adobe Photoshop include a &#8220;Save to Web&#8221; feature which will strip out a lot of the colours and extra information that the human eye can&#8217;t pick up, or at least won&#8217;t really be noticed when removed from the original version.  There is a bit of compromise on image quality, but saving the image optimized for the web will result in a much smaller file size that will display much faster, which can really improve the experience for the end user.</li>
<li><strong>Upload the image</strong> to your website and add it to your web page(s).  It may help to organize the images into several folders.  For example, have one folder for profile pictures and another for thumbnails.</li>
</ol>
<p>If you don&#8217;t have Adobe Photoshop on your computer, there are many free tools available that you can download which will resize images for you.  There are even online services that will do this for you.  Simply upload your image, specify the dimensions and options that you want, and a web-optimized version will be generated that you can download.  A simple search for &#8220;<em>free image resize</em>&#8221; should yield many such programs and services.</p>
<p>Optimizing your images is one step toward making your website easier to use for your visitors.  Keep checking back at the <a href="http://blog.port80solutions.com">Port 80 Solutions blog</a> for more tips on how to make your website work better and add more value to your organization&#8217;s online presence.</p>
<p><em>Looking for web hosting? <a href="http://www.port80solutions.com/content/about-us/Contact.asp">Contact Port 80 Solutions</a> for information about hosting for your organization. Leverage our powerful Content Management system, or host simple sites, WordPress blogs, and other open-source solutions.</em></p>
</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.port80solutions.com/2011/02/17/image-optimization-for-the-web/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Seamless Editing System</title>
		<link>http://blog.port80solutions.com/2010/07/26/seamless-editing-system/</link>
		<comments>http://blog.port80solutions.com/2010/07/26/seamless-editing-system/#comments</comments>
		<pubDate>Mon, 26 Jul 2010 17:17:00 +0000</pubDate>
		<dc:creator>ksawatski</dc:creator>
				<category><![CDATA[seamless editor]]></category>
		<category><![CDATA[web manager]]></category>
		<category><![CDATA[cms]]></category>
		<category><![CDATA[latest news]]></category>
		<category><![CDATA[page editor]]></category>
		<category><![CDATA[products]]></category>
		<category><![CDATA[ses]]></category>

		<guid isPermaLink="false">http://blog.port80solutions.com/?p=36</guid>
		<description><![CDATA[When it comes to establishing yourself or your company on the web, there are several options available to you.  These include building and managing the website yourself, hiring a web master to do it for you, or using a Content Management System. For the purposes of this article, I&#8217;ll be focusing on the option of [...]]]></description>
			<content:encoded><![CDATA[<p>When it comes to establishing yourself or your company on the web, there are several options available to you.  These include building and managing the website yourself, hiring a web master to do it for you, or using a Content Management System.</p>
<p>For the purposes of this article, I&#8217;ll be focusing on the option of using a Content Management System, or CMS.  CMSes were designed to make it simple for the average person with little to no technical skills to manage a website.  They provide a simple editor as well as built in gadgets such as intake forms, polls, photo galleries and more that do all the heavy lifting for you.  A CMS allows you to manage your website without needing to wait for a web master to get around to it, and avoid paying costly fees for every change.</p>
<p>Using a CMS doesn&#8217;t come without its own set of problems, however.  One is that editing is usually done in a pop-up window, or a text-only box, or sometimes even in an articles section that is totally disconnected from the page upon which the content is published. Without the instant feedback of seeing how your content will look in the page as it&#8217;s composed, it may take several edits to get it just right &#8211; often a frustrating experience!</p>
<p>Another issue can arise if the editor toolset is limited.  Most toolsets provide simple formatting functions such as bold, italic, underline and perhaps some colour options which makes it difficult to maintain a standard way of presenting elements such as headers and links. As a result, pages built using a CMS often look strung-together and inconsistent, particularly if several different people were responsible for maintaining them.</p>
<p style="text-align: center;"><a href="http://ses.port80solutions.com/" target="_blank"><img class="size-full wp-image-66 aligncenter" title="SES Demo" src="http://blog.port80solutions.com/wp-content/uploads/2010/07/sesdemo.jpg" alt="SES Live Working Demo" width="300" height="294" /></a></p>
<p style="text-align: center;"><strong>The Seamless Editing System</strong></p>
<p>Enter the Seamless Editing System (SES). Included in our <a href="http://www.port80solutions.com/content/web-manager/index.asp" target="_blank">Web Manager CMS</a>, This is a new system that ventures beyond traditional editing systems.  When using the SES, you simply click on the page where you&#8217;d like to edit and start typing! Now you can see exactly how your content will look while it&#8217;s composed.  In addition, the  SES employs a template-based page structure that, when coupled with your own style set, ensures a uniform layout for all pages and a consistent look for all your headings, links, and text.</p>
<p>The SES makes managing your content simpler than ever and is ready to go whenever and wherever you are!  To demonstrate how quickly you can develop your own home page, we&#8217;ve created the following video which walks through the process in <strong>under 5 minutes</strong>.</p>
<p>Watch the <a href="http://assets.port80solutions.com/flash/SES%20Demo/SES%20Demo.html" target="_blank">video demonstration</a>.<a href="http://assets.port80solutions.com/flash/SES%20Demo/SES%20Demo.html" target="_blank"><img class="alignright size-full wp-image-71" title="SES Video" src="http://blog.port80solutions.com/wp-content/uploads/2010/07/sesvideo.jpg" alt="SES Demonstration Video" width="300" height="232" /></a></p>
<p>Want to give it a try for yourself? Visit our <a href="http://ses.port80solutions.com/" target="_blank">online working demo</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.port80solutions.com/2010/07/26/seamless-editing-system/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Virtual Office 2.0</title>
		<link>http://blog.port80solutions.com/2010/03/25/virtual-office-2-0/</link>
		<comments>http://blog.port80solutions.com/2010/03/25/virtual-office-2-0/#comments</comments>
		<pubDate>Thu, 25 Mar 2010 22:15:37 +0000</pubDate>
		<dc:creator>jshwaluk</dc:creator>
				<category><![CDATA[announcements]]></category>
		<category><![CDATA[collaboration]]></category>
		<category><![CDATA[document repository]]></category>
		<category><![CDATA[products]]></category>
		<category><![CDATA[services]]></category>
		<category><![CDATA[virtual office]]></category>
		<category><![CDATA[vo2]]></category>

		<guid isPermaLink="false">http://blog.port80solutions.com/?p=4</guid>
		<description><![CDATA[Virtual Office 2.0 provides a powerful new way to collaborate online.  Visit Port 80 Solutions to discover how your organization can leverage this technology to save money and improve productivity.]]></description>
			<content:encoded><![CDATA[<p>Virtual Office 2.0 is an exciting new online collaboration product.  It incorporates all the features of our original Community of Practice, while adding new features that will increase your organization&#8217;s productivity and help you save money.</p>
<p>Share documents and communicate online in a discussion forum format, or meet real time with our integrated web-conferencing  software.</p>
<p>Read on to get a feel of what makes Virtual Office 2.0 special and how it can help your organization.</p>
<p><span id="more-4"></span>First off, when you sign up for Virtual Office 2.0 (VO2), your organization gets its own copy of the system, with a customized look that matches the branding and colouring of your website.  No need to hire a designer, or programmer to create and modify templates.  The styles are setup when you sign up.</p>
<p>Once your system has been setup, one or more administrators are assigned to manage your organization.  An administrator has complete control of an organization&#8217;s structure to create and manage users, offices, events and documents.</p>
<p>Each organization has its own distinct layout.  The number of offices depends on the plan, but an unlimited amount of users can access the system and belong to one or many offices.</p>
<div id="attachment_17" class="wp-caption aligncenter" style="width: 544px"><a href="http://blog.port80solutions.com/wp-content/uploads/2010/03/vo2-layout.gif"><img class="size-full wp-image-17" title="vo2-organization-layout" src="http://blog.port80solutions.com/wp-content/uploads/2010/03/vo2-layout.gif" alt="Virtual Office Organizational Layout" width="534" height="372" /></a><p class="wp-caption-text">Control how your offices and users are organized.</p></div>
<p>What if you don&#8217;t divide units into &#8220;offices&#8221;?  What if you refer to them as &#8220;Sections&#8221; or &#8220;Departments&#8221;?  Let us know, and we can re-label the major sections and items of the system to match your organization&#8217;s standards.</p>
<p>Each office can be used for:</p>
<ul>
<li><strong>Secure document repository</strong> &#8211; documents are stored in a secure, central location.  When documents are uploaded or modified, each member of the office will be notified and can login to access the new files.</li>
<li><strong>Central discussion board</strong> &#8211; documents or messages can be discussed in a secure location.</li>
<li><strong>Event management</strong> &#8211; upcoming events can be scheduled in the system and all members are notified of the event information</li>
<li><strong>Permissions</strong> &#8211; each office can be setup so that some groups of users can only &#8220;read&#8221; some sections, while others are allowed to &#8220;read&#8221; and &#8220;write&#8221; in some sections.</li>
</ul>
<p>There are many ways for organizations to leverage the Virtual Office.  It&#8217;s very easy to use, while providing you with the flexibility and power your organization needs to keep communicating with clients, contractors, and co-workers.</p>
<p>Visit this blog in the future, and we will discuss several ways that VO2 can be leveraged, helping any organization (small, large, private, public, not-for-profit) experience long-term savings!</p>
<p style="text-align: center;"><a href="http://www.port80solutions.com/content/virtual-office/free-trial.asp">Find out about our free 30-day, obligation-free trial!</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.port80solutions.com/2010/03/25/virtual-office-2-0/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Port 80 Solutions&#8217; Blog</title>
		<link>http://blog.port80solutions.com/2010/03/25/port-80-solutions-blog/</link>
		<comments>http://blog.port80solutions.com/2010/03/25/port-80-solutions-blog/#comments</comments>
		<pubDate>Thu, 25 Mar 2010 17:03:46 +0000</pubDate>
		<dc:creator>jshwaluk</dc:creator>
				<category><![CDATA[announcements]]></category>
		<category><![CDATA[discussion]]></category>
		<category><![CDATA[hints]]></category>
		<category><![CDATA[latest news]]></category>
		<category><![CDATA[tips]]></category>
		<category><![CDATA[usage]]></category>

		<guid isPermaLink="false">http://blog.port80solutions.com/?p=14</guid>
		<description><![CDATA[The Port 80 Solutions blog will be used to broadcast news and announcements regarding Port 80 Solutions' products and services.  There will also be articles with tips and how-to's to help better leverage our technology.]]></description>
			<content:encoded><![CDATA[<p>Welcome to Port 80 Solutions&#8217; blog, where we will periodically post information and articles relevant to our products and services.</p>
<p>The goal of our blog is threefold:</p>
<p><strong>1)  Latest News</strong><br />
We will post information regarding news, events, and product announcements related to Port 80 Solutions.  Check back for information about new products, services, and special offers.</p>
<p><strong>2)  Hints, Tips, Usage</strong><br />
To provide a resource for our clients regarding the usage and behaviour of our products and services.</p>
<p><strong>3)  General Discussion</strong><br />
To provide a medium for posting and discussing thoughts and processes that occur while we continue to develop our products and services.</p>
<p>Over time, we have collected a lot of information and we hope to share our knowledge via articles in our blog.</p>
<p>Feel free to request new blog entries via our comments section below &#8211; we look forward to hearing from you!</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.port80solutions.com/2010/03/25/port-80-solutions-blog/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

