Williamsport Web Developer Weblog

Now that I’ve worked as a freelance web developer and as a web developer working for a small company that does a variety of Internet consulting and I.T. related work I have some thoughts on choosing one over the other. In my opinion, you are better off hiring a freelance web developer rather than giving your project to a firm. It does not matter how large or small the web development firm is, there will be serious disadvantages in having your project done by any firm that handles multiple projects.

For one thing, a web development firm is unlikely to spend much time on search engine optimization. They may offer SEO as a service but they are probably more interested in getting projects completed than they are in seriously helping a company rank well in the search engines. In order to get your web developer really involved in your search engine optimization efforts, you need a more intimate relationship with the developer who has to have some dedication to your project. Without this business relationship you are just going to get token efforts and a lot of reports that make it look like some SEO work is being done. SEO requires various technical skills and should not be treated as a purely marketing matter without any web developer involvement.

Another thing that firms tend to neglect is web application security. A web development firm is unlikely to want to spend the time to protect your web site from SQL injection attacks. Encrypting sensitive data to prevent embarrassing data thefts is also an extra step that a firm is unlikely to take. However, when you hire a freelance web developer that person will be free to dedicate more of his time to your project and therefore he can put in the extra effort to make the web application secure. This is particularly important for custom web applications that don’t have the built-in security of open source or commercial web applications.

In my experience, both search engine optimization and web application security are rather involved matters that require specialized knowledge which the typical web developer is unlikely to delve into. Developers tend to be isolated from the marketing concerns vital to search engine optimization. And developers are not inclined to build in web application security because they are more focused on functionality and opening up permissions to get their web applications running. Management is focused on getting projects done in a timely manner which means no extra effort will be made to promote your business or secure your data.

Last night I installed the Joomla open source content management system on my local web server and explored its ability to consume XML data feeds (web services, developer APIs, and RSS news feeds). The News Feed module did not allow me to specify a news feed stylesheet, aka XSL file, so I had to look for an extension to add this functionality. I found botMosXslt, a Mambot allowing processing from xml/xsl file using xslt processor and render the result in content. There were no instructions on how to install it so I will describe how to do so on a Windows web server running PHP 5.0:

1. Copy mosxslt.php and mosxslt.xml to C:\Inetpub\wwwroot\joomla\mambots\content
2. Create directory for XSL files at C:\Inetpub\wwwroot\joomla\custom\xml
3. Select Mambots / Site Mambots in Joomla Administrator!
4. In the Mambot Manager [Site] click the New button
5. Enter “botMosXslt” for the Name field
6. Leave content selected for the Folder field
7. Enter “mosxslt” for the Mambot file field
8. Leave Yes radio button selected for Published field
9. Click the Save button

The new botMosXslt mambot should now appear in the list:

Next I will describe how to use it to display LiveVideo Featured Videos and deal with an error:

1. Select Content / All Content Items in Joomla Administrator!
2. Click the New button
3. Enter a title
4. Enter the title alias
5. Select a section
6. Enter “{mosxslt GetFeaturedVideos.xml FeaturedVideos.xsl} ” as your content
7. Click the Save button
8. Copy GetFeaturedVideos.xml and FeaturedVideos.xsl to C:\Inetpub\wwwroot\joomla\custom\xml
9. If Fatal error on xslt_create function, edit mosxslt.php

I got a fatal error because I did not have the required libraries to process XSLT using PHP on my system. Fortunately, I had already figured out an alternative way of doing it using the built-in capabilities of PHP 5.0. So if you get the following error add the code I list below it:

Fatal error: Call to undefined function xslt_create() in c:Inetpubwwwrootjoomlamambotscontentmosxslt.php on line 74

Edit the mosxslt.php file to work around this problem:

/* // Process xml
$xh = xslt_create();
$xsltResult = xslt_process($xh,
$fullXmlFilename, $fullXslFilename);
if ($xsltResult)
$htmlContents = $xsltResult;
else
$htmlContents = "!!! Error in executing XSLT !!!";
return $htmlContents;
*/

// Process xml on Windows
// edited by Robert S. Robbins 02/24/2007
$xml = new DOMDocument;
$xml->load($fullXmlFilename);
$xsl = new DOMDocument;
$xsl->load($fullXslFilename);
// Configure the transformer
$proc = new XSLTProcessor;
$proc->importStyleSheet($xsl);
// attach the xsl rules
return $proc->transformToXML($xml);

As you can see I finally got this to work for me. However I did have to use a static XML file rather than pull the current list of LiveVideo Featured Videos using their Developer XPI.

I devote a lot of time each week to studying new technology. It is very important for a web developer to keep up his skill set because his expertise is his major asset. I prefer to learn incrementally because most programming languages and software have too many details or features to master. I can’t spend all day studying so I just try to pick up one new language feature or software feature to document and experiment with during the day. Sometimes it is just a regular expression or a JavaScript function that I found useful.

I’ve decided to give up on my plans to study Eiffel and Java Server Pages. There isn’t much work to be found in those programming languages and I do need to specialize. JSP was only of interest because a local company, Brodart, is always looking for JSP developers. I will continue to expand upon my knowledge of ASP.NET 2.0, XSLT, PHP, and C#. In regards to software, I will continue to study DotNetNuke 4.0 and After Effects 6.5. I should mention that my study of ASP.NET 2.0 will include the AJAX extensions.

I recently finished learning to use some additional aspects of database management using the new ASP.NET 2.0 Data Server Controls. I tried out the DetailsView, GridView, and FormView server controls that can be used to insert, edit, or delete records without writing any code. I also learned about CommandFields, DataKeyNames, and Parameters which are new properties and tags associated with these server controls. I’ll probably be doing more of my work in design mode within Visual Studio 2005 because it has many wizards and graphical user interfaces for working with these server controls. I rarely use design mode in Visual Studio 2003 because it does not compare with FrontPage 2003.

I have learned that DotNetNuke 4.0 has a module for XML and XSL transformations which is probably better suited for the developer APIs that return data as XML.

I put a foam windscreen on my StudioProjects B1 Cardiod Condenser Microphone and it really helps to reduce plosives, pops, and spikes.

Tonight I tried to use some of the XSL stylesheets I created for my ASP.NET 2.0 web parts mashup in the DotNetNuke 4 web portal. I was very pleased to find that most of them work when used with the News module. The News module allows you to specify both the news feed and its news feed stylesheet so you can actually use any kind of XML feed. You can use web services, developer APIs, or RSS feeds. If you are not actually consuming a news feed then you just use your own stylesheet to control how the data is formatted.

I was able to use several of my web parts in my DotNetNuke 4 web portal because they were basically just XSL used to style XML feeds. Please see the screen shot below. I was able to use my local weather widget, the show my IP address widget, LiveVideo featured videos widget, and the actual news feed for the Newsvine Web Development Group (did not require a stylesheet). Therefore it appears as though my work with web parts will port to this web portal as long as it is based mostly on XML and XSLT (stylesheet transformations). DotNetNuke 4 does not use web parts but you can still minimize modules and move them from place to place when logged in as an administrator. I have the book Professional DotNetNuke 4 by Shaun Walker and others from WROX Press.

I’ve switched form using ASCX user controls for my web parts to using VB class files that are real web part controls. I made the switch because you can use title icon images in your web parts when they are actual web part controls. I really wanted those icons in my project because I’m an icon freak. I have a large collection of web site favorite icons. You can use regular Windows icon files .ico for web parts as long as they are 16×16 pixels. I have noticed a major drawback to web part mashups. Web parts do not use AJAX so there is an annoying refresh of the web page every time I make a change.

Today I purchased RegexBuddy, a tool for creating and testing regular expressions. Regular expressions are strings that describe or match a set of strings, according to certain syntax rules. In other words, a regular expression is a complex syntax for searching through text. It is very handy for search and replace and many mundane programming tasks that require text manipulation. I bought RegexBuddy because I am doing a lot of work with XSL, stylesheets for XML. Unfortunately, there are many occasions when XSL is not sophisticated enough to pull data from a RSS or XML feed. It is often necessary to do additional string parsing using JavaScript. One of the more useful features of JavaScript is its support for regular expressions. RegexBuddy is great for creating complicated regular expressions and testing them against sample data. It will even generate some of the JavaScript code you need to use regular expressions. RegexBuddy is only $29.95 so I found it affordable.

I need to write some JavaScript functions for my XSL stylesheet I’m developing for the YouTube user RSS feed. This XML feed is using RSS 2.0 with the xmlns:media extension. The description tag has been causing me a lot of grief because it breaks the design principles of XML. The description tag actually contains 5 pieces of information; the video thumbnail, the video description, the author, the keywords or tags, and the date added. All of this information is provided as HTML within a <![CDATA[...]]>. CDATA sections instruct the XML processor that the content included in a section is not markup and should not be parsed. This makes it very difficult to extract the video description.

So far I have written the JavaScript function to strip out the newlines in the HTML, because regular expressions don’t work well on multiline text, and the function to trim the description. I’ve also come up with a good regular expression to find the text contained within the first paragraph HTML tags <p></p> which surround the video description. However, I am still having problems with the XSL which needs to pass the description element to my JavaScript function and then return a string I'll use within a title tag attribute as a tooltip. When you mouse over the video title I want to display the video description.

Some people are quite fearful of programmers and web developers. When a company has to let go of a developer there is usually a lot of fear that the disgruntled employee will hack their network or web site. There will usually be a frantic rush to change passwords and tighten security. Quite frankly, this is a misguided precaution because most programmers and web developers don’t know much about hacking. The truth is hacking is hard work and a specialized skill. Most programmers don’t have the time to learn how to hack sites or networks. A serious developer will only be interested in learning skills that have some value in the workplace. He will not want to spend a lot of time and hard work doing something that could only get him in trouble.

However there are some forms of hacking that a web developer should be familiar with in order to create secure web applications. A web developer needs to understand SQL injection attacks and cross-site scripting attacks. These two types of vulnerabilities are specifically due to poor web application design and can only be corrected by sophisticated coding. I’ve bought a book entitled Hacking the Code: ASP.NET Web Application Security by Mark M. Burnett and James C. Foster which I plan to read soon.

Another security issue that web developers usually need to deal with is the web server configuration. Disabling a web site’s directory browsing and managing anonymous access and authentication are common tasks. Unfortunately, most web developers are more interested in opening up permissions in order to get their web applications working than they are in tightening permissions.

It is not enough to just learn how to prevent SQL injection and cross-site scripting attacks. A lot of books and technical articles limit themselves to describing best practices and never tell you how to execute these attacks or provide working exploits. Although this is an understandable precaution, you can never be sure that your counter measures will work unless you can test it. A very minor coding error can leave you vulnerable and the only way to ensure your security is to try the exploit against your web application as a test. You can never assume that you are secure without testing it and this requires actual knowledge of how to make an attack.

And by the way, it is usually a bad idea to let go of your web developer. Not because of security concerns but because your web developer will have built up considerable expertise in working with your web applications and you should not throw that away.

I have upgraded to Visual Studio 2005 Professional and I now have the XML menu with the Show XSLT Output and Debug XSLT submenu items. Unfortunately, it does not appear to work. I get an error. I searched on the Internet and only found one forum thread about this error so apparently not many developers are trying to debug XSLT. I think this is a clue that not many developers are doing anything complicated with XSL. I’m also not finding much discussion about web parts. XSL can get quite complicated and I think developers really need better tools to work with it. While working with the YouTube API yesterday I ran into three more problems that required solutions. First, I had to construct a link using an XML element in the URL. Second, I had to format a number to use commas to show thousands. And third I needed to convert seconds into minutes. That proved to be the most complicated problem of all.

For the first problem involving the link, I found the solution was to use curly braces to create an attribute value template which allows you to assign a value to an attribute in the output using an expression, rather than a fixed value:

A link with link text.

<xsl:if test="position() mod 2 = 1">
<tr bgcolor="#EFF3FB">
<td valign="top">
<b>From: b>
<a href="http://www.youtube.com/user/{author}">
<xsl:value-of select="author"/>
</a>
<b> Views: b>
<xsl:value-of select=”format-number(view_count, ‘###,####,###’)“/>
</td>
</tr>
</xsl:if>

Yesterday I created a web part to show video comments using the LiveVideo API. The API returns XML so I had to format it using XSL (Extensible Stylesheet Language) which is a stylesheet for XML. I used Visual Studio 2005 Standard Edition. Unfortunately, the XSLT editor/debugger features are only included in the Professional and higher levels of Visual Studio 2005. Since many web services and APIs (Application Programming Interface) return XML, I thought it was worth the time to explore transforming XML through XSL.

I ran into three problems requiring solutions. First, I had to display an image using the web address for the image found in an XML tag. Second, I had to format a date that wasn’t in a very readable format. Third, I wanted to alternate the table row colors.

For the first problem involving the image, I found the solution at TopXML. The exact syntax gave me a lot of problems because you should not use the @src they show.

<img>
<xsl:attribute name="src">
<xsl:value-of select="profileThumbnail" />
</xsl:attribute>
</img>

For the second problem involving the date format, I found the solution at John Workman's weblog. You need to use another XSL template to format a date. I had to edit his FormatDate template because it did not format the date as I wanted it.

<xsl:call-template name="FormatDate">
<xsl:with-param name="DateTime" select="entryDate"/>
...................
</xsl:call-template>

For the third problem involving alternating table row background colors, I found the solution at William Pohlhaus’ Web Site. It is a neat trick using the XML element position and the math function mod.

<xsl:if test="position() mod 2 = 1">
<tr bgcolor="#EFF3FB">
</xsl:if>
<xsl:if test=”position() mod 2 = 0″>
<tr bgcolor=”#FFFFFF”>
</xsl:if>

After solving those problems for my web part I explored XSLT using PHP. Unfortunately, my web hosting company does not appear to have any of the required extensions installed to support XSLT in PHP. I have PHP 5.0 installed on my local web server and I found the following code works:

Today I investigated several other mashup sites to get an idea of how this technology can be used. I was impressed by the range of content you can include on your start pages. You can even submit your own content, i.e. blog feed, or develop your own widgets. I searched for a directory of pre-built web parts to use in an ASP.NET 2.0 mashup but there does not appear to be any.

One of the mashups I already knew about is Pageflakes which is famous for its innovative use of AJAX. I spent some more time customizing my content on this site. I was able to add YouTube user videos and DailyMotion featured videos. I was unable to find any widgets for LiveVideo or Stickam on any of the mashup sites I looked at. On the Reading page I added some RSS feeds that interest me including Slashdot, The Code Project which is about ASP.NET, and TechCrunch. I submitted this blog’s feed and it was accepted so I’ve added a Pageflake chicklet that you can click to automatically add this blog RSS feed to your Pageflake content. This is a good example of how you can use mashups to distribute your content and promote your web site. There is also an eBay widget available for Pageflake which allows you to keep track of your bids, your auctions, or search for items. This web site is genuinely useful because on one page I can see if my favorite vlogger has posted a new video, search Google, search Wikipedia, check my eBay bids, and watch the clock!

Another mashup I looked at is Netvibes. It features a video search that includes Google Video, YouTube, and DailyMotion plus three others. I found Newsvine listed in the feed Directory under Top Headlines, US. I was able to add my blog feed and publish it on the Netvibes ecosystem. I liked the wide selection of news feeds and information sources. You can also add blog search, eBay, an aquarium with fish, and a calculator.

The most interesting thing I found on Webwag is live French TV which I wound up watching rather than exploring the site. The only channel you can watch is BFM TV. I’ve cancelled my cable TV so even French television is better than nothing. However, Webwag does not appear to have very many widgets available and even the RSS feeds are limited although I was able to add my blog feed.

Protopage has a very colorful user interface. It has the Protopuppy which appears to be a virtual pet toy. The Video Podcasts page had a lot of unfamiliar content. I only recognized the Ask A Ninja podcast because he seems to be everywhere. I was also able to add my blog feed to this mashup. I did find a widget for YouTube’s recently featured videos but it failed to index my favorite vlogger’s RSS feed.

Last, but not least, I should mention My Google, or Google IG which is their AJAX desktop (also known as “Personalized Home”). It features a wide variety of widgets. You can even add a Microsoft Outlook widget which will display emails in your Inbox, your calendar, your tasks, or your contacts. Then there are odd widgets like Buddhist Thought Of The Day, ImageShack Hosting, and tiny games like Haunted House which will randomly try to scare you. If you search for homepage content using the keyword “Williamsport” you can add my blog feed but it is not a very obvious method.

I really like the new web portal applications you can create in ASP.NET 2.0 so I have used this technology to create a custom mash up for myself. A mashup is a website or application that combines content from more than one source into an integrated experience. My portal features four web parts which I created based on my personal interests. Each web part is actually a custom user control. I’ve never done much with user controls except for a few that I use with Storefront 6.0.

The first web part is headlines from Newsvine. I used the RSS feed for the Web Development Group on Newsvine because that topic is interesting to me. For the code, I used Scott Mitchell’s RssFeed, an open source custom ASP.NET server control that displays the contents of a specified RSS feed in an ASP.NET web page. I had to recompile it for ASP.NET 2.0 using Visual Studio 2005 and then import its dll into my project.

The second web part shows the Stickam online presence of several YouTube celebrities. This is based on some custom programming that I wrote using the Stickam API which returns data as XML. I just converted my ASPX page to a ASCX page to make it a user control. It is useful for telling me when my friends are available for live web cam chat.

The third web part gave me a lot of trouble. It shows the local weather from the National Weather Service. There were several web controls available for this purpose but I tried three of them until I found one that works. The best method used NOAA’s National Weather Service XML feeds and formatted the result using a XSL file. An XSL file is like a style sheet for XML. You can find the source code at: http://aspalliance.com/1121

After that I was getting tired of struggling with other people’s code so I just created another user control for a RSS feed. YouTube provides RSS feeds for a users’ videos so you can watch somebody’s videos in a RSS feed reader without being counted as a subscriber. My forth web part just shows the YouTube videos of a comedian I choose because he doesn’t have a lot of videos.

Unfortunately, I don’t have an ASP.NET 2.0 web site to host my custom web portal. It is running on my local development web server which is fine for my personal use. However, you can view a screenshot below to see how it looks. Click on the thumbnail for a larger view:

I have finally begun to study ASP.NET 2.0. I am currently reading ASP.NET 2.0 For Dummies by Bill Hatfield. I am up to chapter 13. Unfortunately, everything I have read so far has been really basic review of ASP.NET. So I skipped ahead to Part VIII, Exploring New ASP.NET 2.0 Features which has 4 chapters. I think these 4 chapters may represent the only new material in the book. I’ve read the chapter on master pages and the chapter on skins and themes. The other chapters are on security and web parts.

I may need to buy another book on ASP.NET 2.0 to learn more details about the new features. Before I do that I want to sell some of my other old technology books because I have books piled up all over the place.

I have updated my Client List to reflect the current state of my business. I have severed my business relationship with Car Accessories because they owe me a lot of money and refuse to pay it. I had to sic a collection agency on them.

I’ve removed the sentence about not accepting any new clients. That should not have been left up there. I am currently still very busy and have enough work to do, but I may need to find more clients soon. It depends upon how much work I can get done.

I would still like to find a full time job that pays benefits if I could find a job in the local area. I need to update all my online resumes because I don’t want to use Car Accessories as a reference anymore.

I’ve discovered a new social networking site today, Newsvine, which is based on news rather than video. Newsvine allows you bookmark any newsworthy content you find on the Internet which then becomes part of the news gathered on the site. You can also write articles and create your own column. You may even earn money from your column if it becomes very popular.

Some other features of Newsvine make it genuinely useful. You can create a collection of virtual newspaper clippings by clipping any news content you find interesting. You can comment on news articles and chat with other users about the news. Unfortuately the live chat is based on individual articles so you are unlikely to find anyone to chat with. This feature is pretty worthless. Even the top stories never have any people chatting. Like most social networking sites, you can add people to your friends list.

I have added their chicklet to my blog so you can seed newsvine with links to my blog articles if you find them newsworthy. In fact, I discovered Newsvine on LiveVideo which has the Newsvine chicklet on videos so you can do some social bookmarking.

I have completed the first three chapters of Creating Motion Graphics With After Effects Volume 1: The Essentials. I read about keyframes and compositions and explored many features of the program. I also jumped ahead and read chapters 25, 26, and 28. I have begun to make better use of After Effects in my videos and recently completed a video using my photographs of the Lycoming Creek Flash Flood of 1996. I was able to zoom in on the photos and pan the camera from left to right and right to left to make the still images more dynamic.

A few professional filmmakers and film producers are now participating on the video sharing sites. You can even chat with people in the film industry on Stickam. They have generated a lot of excitement among the videobloggers who are learning how to do many sophisticated video effects like chroma keying (i.e. green screen).

I’ve been too busy to blog but earlier in the week I had an opportunity to work on a web site design using Photoshop. I did not create a new design from scratch. I had to modify an existing web site design which was unable to stretch vertically or horizontally. The web site was using IFRAMES for the content area which created some problems with the cookie. The cookie was getting two email address values because the IFRAME page and the parent page where both setting the cookie. Using IFRAMEs is a terrible idea so I needed to modify the web site design to eliminate them.

First I had to create a sliced PSD of the original web site design because I did not have one. Then I used a copy of that PSD to erase some images that made the page difficult to split horizontally and vertically. That required a lot of tedious blending of the background color which used a gradient.

I learned a few new Photoshop tricks involving slices while working on this project. I disliked how the exported sliced images were numbered. This is terrible for search engine optimization because the file names are not meaningful. Also, you are unable to easily find an image in the images directory if they are all named the same except for a number. The way to avoid this is to right click a slice in Photoshop and select “Edit Slice Options”. You will then see a dialog box where you can change the name of the slice and enter the Alt tag. The name of the slice will be used as the file name when you export the design as HTML. You should definitely take the time to set those slice properties for the sake of organization and search engine optimization. This is the sort of detail that web designers too often overlook.

I also picked up a few tricks on controlling my slices which can be tricky. Just one pixel more and you wind up with an additional table row with a one pixel image. I learned to use layer based slices and I control my layer dimensions by inverting a selection and deleting everything except my selection.

Today I installed DotNetNuke 4.4.0 on my local web server. DotNetNuke is a web application framework written for ASP.NET. The installation gave me considerable problems because the installer could not establish a SQL Server database connection.

Then I created a second installation using Visual Studio 2005 and the DotNetNuke StarterKit. This went a lot more smoothly and gave me a Visual Studio project so I can begin to work on customizing DotNetNuke. DotNetNuke uses 62 database tables so it is a huge web application. I’m not sure I want to invest much time on it unless a client will pay me to use it for a project.