Have you ever tried to perform a structural search on web pages? A search that takes into consideration not only the text of a page but its HTML structure.

Let’s say you want to find out what meta keywords your competitors are using. The first thing you need to do is get access to the source code of each web page in your competitors site.  Next, you will probably write some sort of regular expression to identify the strings you are looking for.  Then you have to collect all the occurrences of those strings and put them in a spreadsheet and then analyze them. It sounds like a pretty time consuming activity to me. 

This is when Online Smart Search comes into play.  You just need to input an URL, a search pattern and we’ll find and tabulate all the occurrences for you.

Online Smart Search will crawl the site starting at the URL (it crawls all pages “below” the starting directory you write in the URL) and apply the search pattern to each page.  If the page contains more than one occurrence of the pattern all will be collected.  You can analyze the data immediately or you can export it to an XML file that can be easily read using excel.

The magic sauce is in the search pattern language.  Online Smart Search uses the same Search language (which is way simpler and way more powerful than a regular expression) than our desktop line of web optimization tools Smart Search and Replace feature.  Please read the full Search L anguage Specification. The Online Search not only parses all of the HTML / XHTML code, it also structurally fixes it before it starts searching.  This will ensure the best results with minimal effort even on structurally incorrect pages.

Let’s look at a few search examples:

Find all the meta keywords my competitors are using: <meta name=”keywords” content=”$KeyWords” />

Find all the meta tags and their value on a page: <meta name=”$metaName” content=”$content” />

Find all the anchor text for a given page: <a>$anchortext</a>

Find all the anchor text and the corresponding href: <a href=”$href”> $anchortext</a>

Find all the links in a page: <a/>

Get all the h1 text for a site: <h1>$h1text</h1>

Get all the text that is marked as bold: <b>$boldtext</b>

I am sure you’ll be very creative.  Let us know which searches do you find most useful.

Now, where do I find this new functionality? It is a new option for our Online Web Optimization tool. Remember we are still in Beta but I am sure you will find it very useful.

In the following screenshots you can see the input interface.  Select the URL, input the Search Pattern and click “Search”

The results will look like the following example.  You just need to navigate the tree structure to analyze the details.

If you want to export the results, they will be formatted as XML:

which can be directly imported by Excel where you can add further processing:

In summary, the Smart Search feature is a Find that understands markup. This feature lets you run searches on HTML code patterns within the page or across multiple pages in a site.  Just provide the URL and the Search Pattern.  You will be surprised by the usefulness of the results.

I am sure it has happened to all of you. You are browsing a page and you see gibberish characters printed out, maybe where a vocal with tilde was supposed to be...

This is still a very common problem with certain types of printer and certainly with web pages.  This is most annoying if you are browsing non english pages and the author does not handle the special characters correctly.

To make special characters and accented letters show up on your pages, use a special set of codes called character entities, which you insert into your HTML code and which your browser will display as the corresponding symbols or characters you want.

The most common character entities have been collected by the International Organization for Standardization and compiled in an ISO Latin Alphabet table, which includes special characters, letters with diacritical marks (accents, umlauts, etc.), and scientific and currency symbols. The Latin-1 table contains 255 characters.

Of course, you don't want to learn the name or number of 255 special characters!  So, up until now, verifying and fixing the correct handling of Special Characters has been a painful and slow process.  With a new feature of our Online Web Optimization tool this is now a simple task.

When using our Silverlight interface, choose the "Replace Special Characters" task and you will:

- Fix malformed entities: XHTML entities should always begin with an & and end with a ; character. Some browsers render them even when they are not correctly defined, which leads to inconsistencies.

 The product is still in Beta but it is fully functional.  Tell us what you think.

By the way, if you like the features of the Online tool, don't be shy and try out the full featured Aggiorno products, the Visual Studio Add In version or the Standalone version. 

 Aggiorno Online is finally ... Online!  Well, at least in Beta!

 Today we are releasing parts of the Aggiorno functionality through a new web interface.  All you need to enjoy several of the web optimizations that Aggiorno provides is Silverlight 2.0.

 With Aggiorno Online all you need to do is provide some HTML/ASP/ASP.NET/XHTML... input through one of our 3 input methods: URL, File Upload or a Copy/Paste Text entry; choose the right optimization and its options and just execute it. 

 We are providing 6 Optimizations that we feel are super useful for web developers:

 - Fix Structural Errors: This optimization helps you find all the syntax errors that are present in a web page (invalid tag structure, unclosed tags, shuffled tags... avoid the tag soup!)

 - Fix Syntax Errors: This optimization helps you find all the syntax errors that are present in a web page (missing doctype declaration, wrong label case, wrong use of quotes, add entities, declare default values, remove duplicate attributes)

 - Fix Deprecated Elements: Find and fix depreacated elements in your web source code (CENTER, FONT, many other deprecated tags and attributes)

 - Add IE8 Compatibility flag: Add the IE8 Compatibility Flag to your pages

 - Generate Google Sitemap: This option allows for the generation of the Google sitemap, one of the newest additions to our SEO optimization series.

 - Generate ASP.NET sitemap: This option allows for the generation of the ASP.NET sitemap, an important input for many ASP.NET controls.

 We are using Silverlight so we can provide a rich interface, specially for our "explain" feature.  Aggiorno shows you all the changes that are happening to your source file (unlike many other WEB optimization tools) and you can analyze them before proceeding.

Enough said!  Please try it out and let us know what you think: http://www.aggiorno.com/Application.aspx

Your feedback is more than welcome!

One of the most frustrating and time consuming tasks a web developer must endure is making a site cross browser compatible. No wonder why there are so many people talking about the lack of standardization among the web browsers, specially the IEx family.

As you may already know there is a variety of online rendering services: like Browsershots or Litmus. Most of these services provide a way to render your page in different browser versions running on several operating systems, and sometimes it’s possible to test your pages in different resolutions too.   Here at Artinsoft we believe that the approach taken by these services provides a lot of value, but we think that they fall short on helping the developer to trace the source of the problem.

Because of the problem described above we came up with our own cross browser compatibility checker browser oriented service codenamed BrowserCheckr.  You can think of this service as a complement to the rendering services. It’s similar to Dreamweaver’s BCC in the sense that we analyze the page and search for potential rendering problems, then, we give a report that point out the elements that may have problems in certain browser(s) and provide documentation of what is the problem and how can it be fixed.

In the near future we also expect to provide a way to help to fix the problems found. We are brainstorming it so feel free to share your ideas about it with us.

For the time being what we have is a prototype that showcases the user experience and makes a basic detection of 6 of the most common IE6 bugs:

·         The margin size is doubled.

·         min-height and min-width are not supported in IE6

·         The escaping floats problem  .

·         Centering using margin-left and margin-right set to auto

·         The stairs effect in menus using ul/li.

·         The inherited margin problem.

We will really appreciate it, if you take a moment to check our prototype. We are working hard to keep improving BrowserCheckr to help keep you site looking great in all the browsers. Please visit BrowserCheckr and leave a comment. Only with your continuous feedback we can get a powerful tool for you.

In the Aggiorno Team we’re always suggesting new ways to improve the final user experience, from product installation to final result delivery, each step is important and contributes to the value received by users.

In this occasion, we wanted to improve the Aggiorno Trial version setup experience.  We evaluated different options and finally changed the license activation process.  Now it is not necessary to enter any trial license key, it will be activated automatically through Internet so you do not need to worry about license keys and can start enjoying the Aggiorno benefits faster.

Additionally, you can also help us in the Aggiorno continual improvement process by allowing our products to send us general usage information.  We call this the “call home” feature, which can be activated or deactivated at the end of the installation process.

Strategy summary

This article discusses a strategy for making your websites compatible with Internet Explorer 8, which is composed of the following steps:

1.       Code according to web standards

2.       Multi browser rendering testing

3.       Design adjustments and customizations for specific browsers

4.       Increase your efficiency with development tools

Internet Explorer 8.0 is close to be released

As the availability of IE8 increases and the installed base grows, more users will start visiting your web site with IE8.  These users could have updated their previous IE6 or IE7 versions, they could be trying Windows 7, hence Internet Explorer 8.  Whatever the reasons, the IE8 audience will grow for sure.

Problems can arise when users start viewing Internet content with new browsers, different from the ones they used to have.  Differences between browser versions can include minor changes like bug fixes or specific improvements.  Major changes can also have been made, for example general modifications in the layout and rendering engine, as is the case in IE7 and IE8.  These two versions included significant changes to the core rendering engine, especially IE8, for which the rendering engine was completely reprogrammed with special attention to the W3C standards.  The magnitude of the changes can produce rendering differences that surpass the ones observed in previous Internet Explorer updates.

Users that start browsing with IE8 and were using previous IE versions or other browsers could observe important differences like the following:

·         Web page design and layout issues

·         Web page behavior issues

·         Different support levels for W3C standards

One of the main areas that were changed in IE7 and especially in IE8 is stricter adherence to W3C standards.  A high percentage of the required workarounds for previous versions of IE are no longer necessary, allowing web developers and designers to spend less time on browser customization and more time on the actual design and development.

Multi browser rendering testing

The first step in the strategy to accomplish cross-browser compatibility, including IE8, is to write your code following the W3C standards and the industry best practices.  There are plenty of resources in Internet about the subject and every hour invested in reviewing this documentation and adopting the practices will yield higher quality code, improved maintainability and understandability, better possibilities for cross-browser compatibility, and even better ranking in search engines.

The second step in this strategy is to test every representative page of your web site in all the browsers used by your intended audience.  Web site testing could be a complex process, including the following phases:

·         Visual validation of rendered pages:  Inspection of the different web page elements and their visual characteristics and layout is performed.  You should perform at least this type of testing for all your web sites, considering static pages and page templates.

·         Dynamic behavior validation:  All forms for user input and dynamic results should be verified.  Inspection of the rendered elements is performed.

·         User-browser interaction verification:  Users can change different settings in their browsers, for example font size, window size, among others.  The tested web site should continue working when the user changes browser settings.

It is recommended that at least the visual validation of rendered web pages is performed.  This step is especially important when dealing with legacy code whose adherece to web standards is unknown.  There are tools that can help in this process, for example online services for rendered web page image generation.

These web page pictures can be generated in order to let you see how is your web page rendered in a wide variety of web browsers and operating systems.  This information is essential for the third step in this strategy, which is to make all necessary design adjustments and customizations for specific browsers.

One possible approach for cross browser testing is to install different virtual machines with the necessary browser and operating system combinations.  This allows for low level control of the environment, automated tests and user interaction.  Nevertheless this approach could require considerable setup and maintenance time.

Another approach includes the usage of an online service to generate images of web pages as displayed in different browsers.  The following list provides general information about the most popular web sites for this purpose:

·         Browsershots (browsershots.org)

This is an open source project that gives web designer the ability to observe their web pages in a collection of browsers.  The user can change the browser’s resolution and color depth, also the host operating system and settings for Java, JavaScript and Flash.  There is a palette of nearly 70 browser and operating system combinations, including different versions of popular browsers.  Some browsers can have long queues of users waiting for the service, in this case, the service for the specific browser will be blocked.  

·         Browsercam (www.browsercam.com)

This is a service that offers a monthly subscription as well as a trial version.  There is a palette of nearly 45 browser and operating system combinations.  There are also remote access sessions for JavaScript testing.  A new addition to the services includes mobile device and PDA screen capture.

      ·         Browsrcamp (www.browsrcamp.com)

Browsrcamp allows users to test their websites in all the browsers available in the Mac platform, which are 11 in total.  The web page picture size as well as the quality can be selected by the user.

      ·         litmus (litmusapp.com) 

This is a high availability service with a useful combination of cross browser and cross email client testing.  It provides a free trial account, a day pass and monthly subscriptions.

·         CrossBrowserTesting.com

This service allows website designers to test their websites across 65 different browser and operating system combinations.  CrossBrowserTesting gives user access to instances of virtual machines; it is possible to test AJAX and Javascript as well as the page visual elements.

Windows 7 Beta with IE8 was recently added to the available platforms.

The third step in the strategy is making all the necessary design adjustments and customizations for specific browsers.  There is extensive documentation in the web about browser hacks and techniques to solve browser rendering differences; one usual workaround is to selectively apply CSS rules to different web page elements.

Thanks to the new IE8 compatibility meta tag it is possible to achieve low-level, page-by-page control over the rendering mode used to display a web page.  For more information about the specific meta tag values and the reasons behind it see How to make my web pages Internet Explorer 8 compatible. Page-by-page control is extremely important when testing a whole web site and suddenly you find that some pages were intended to be rendered by IE7 or previous.  A first step in the journey to web standards is to include the appropriate meta tag in the problematic pages and continue the manual adjustments following a list of prioritized web pages.  After a couple of iterations the whole website will hopefully be standards compliant and then the compatibility meta tags could be carefully removed.  After removing the meta tags, the web pages should be retested.

The task of adding the compatibility meta tags is automated by the tool Aggiorno IE8 Compatibility Wizard.  It takes into account different situations that could make a manual process fail, for example legacy code handling, several files in several nested directories and requirements to preserve file formatting.

The fourth step in this strategy is to always keep improving.  Cross browser compatibility is a long term goal that will always continue to change as new browsers and new technologies are released to the audience of our web sites.  This could be an overwhelming task and consumes resources that could be necessary for other goals like web site accessibility, design, SEO, among many others.  In situations like this it is always advisable to get help from automated tools that can increase our development efficiency.  Aggiorno, a tool made by Artinsoft (www.artinsoft.com) was designed and built with the always changing web development environment in mind, giving you a significant advantage in the cross browser compatibility field as well as in many others.

Laurent Bugnion, Microsoft MVP, was recently interviewed during edition 26 of the popular show Herding Code.  The initial focus of the interview was on the transition between SilverLight and WPF; Laurent explained how to approach the transition both from a learning perspective and from a practical hands on perspective.  Then they discussed Silverlight offline and which scenarios are interesting and then moved to a discussion between WPF or WinForms; very interesting perspective. At 44:07 in the podcast Aggiorno was mentioned as a tool that is able to understand really bad HTML and then can help to easily clean it up all integrated with Visual Studio.

 This week, Herding Code Edition 27 broadcasted a show named "What Every Web Developer Needs To Know" where Aggiorno is reviewed in depth.  Below I have extracted a few comments that caught my attention from the podcast, but I strongly suggest you listen to the complete show.

It looks like many web developers do not really understand even basic HTML. It is very important for web developers to know HTML so that they are not creating a mess in their pages.  Writing good markup is even important for intranet not only for outward customer facing apps.  If you write good markup your chances of improved cross-browser compatibility is a lot higher, there is a big maintenance improvement (lower cost!!!), better search engine optimization, faster rendering, savings in bandwidth and it even improves the ability of designers and developers to work on the same document thanks to the separation between style and content.

A lot of time web professional spend time to make it render but do not really think about usability.  It is really important to clarify what does it mean to have a web page DONE.  Does it render on multiple browsers?  Is it usable? Is it secure?  These factors make a difference in terms of the quality of the final product.

What tools are key in the web development space? Firebug, a good text editor,  a good wyswyg editor, W3C HTML validation and Aggiorno a refactoring tool for HTML (Re-Sharper for HTML??); Aggiorno is a much better tool for editing HTML.  Beyond Find & Replace.  Aggiorno helps with semantization of HTML and separation between content and style, the validation and fixing of poorly written background and in general it increases the productivity of the HTML editor. Additionally, Aggiorno is an extensible platform and many more cool features will come out in the near future.

As for my take from the podcast, Aggiorno is pictured as a really interesting tool for the web professional that needs to create and maintain markup (any web professional should be able to do it).  Additionally, Aggiorno Standalone includes all the power of Aggiorno together with a full HTML editor (both text and visual) providing a lot of power in just one integrated tool.

On the other hand, the podcast also goes over the need for web developers to know regular expressions.  They agree they are useful, but they also agree that they can easily become cumbersome.  Aggiorno, with its Smart Search and Replace feature, really helps you here.  You can now write patterns that understand your HTML markup and are very powerful and easier to use than a regex.

Try Aggiorno today and let us know if you agree with the guys from Herding Code!

Today we launched Aggiorno 1.3beta.  Wow!  Things are moving fast!  I think it is good to summarize what has happened with Aggiorno since its release a few months ago and also to introduce its newest feature the Smart Search and Replace.

Let's review the main themes of the previous versions:

Aggiorno 1.0: Clean Up the Web.  The main focus of Aggiorno 1.0 was to provide enough functionality to easily convert your pages to XHTML compliance. Many developers do not care about web standards but they SHOULD care a lot more.  It is certainly important to Aggiorno.  We need pages that are at least structurally correct so that we can begin to fill our vision of providing lots of Transformation with encapsulated knowledge to maximize the productivity of webmasters.

Aggiorno 1.1: Internet Explorer 8 Compatibility.  The main focus of Aggiorno 1.1 was to help with the adoption of IE8.  Aggiorno support IE8 in several ways.  First, IE8 by default renders pages in standards compliant mode, so, if you use Aggiorno to clean up your pages your certainly making sure your pages will render correctly in IE8 (and most other modern browsers).  Second, if you are not ready to make your pages web standards compliant, then you can use Aggiorno to add the IE7 compatibility flag.  Your pages will immediately render correctly in IE8 even if you force the browser to emulate its previous version.  Aggiorno makes the adding of the flag a breeze.  Third,  Aggiorno also has a feature to simplify adoption of a new very interesting feature of Internet Explorer 8: web slices.  Aggiorno makes it very easy to introduce slices on your pages.

Aggiorno 1.2: Enabling Every Day Workflow.  The focus of Aggiorno 1.2 was to build the basis of Aggiorno as an everyday assistant for webmasters.  We focused on improving the interface making it more user friendly and we also improved the overall performance 4x.  Features like converting Text to Paragraphs or Text to List become really useful.  Once you use them you will never want to go back and format text in any other way!

Until this version, Aggiorno was exclusively available to Visual Studio users as an add-in.  Aggiorno 1.2 also introduced a standalone version so that non Visual Studio users can also take advantage of Aggiorno.  We provide a basic HTML editor so that you can open your web sites in an integrated environment and also benefit from Aggiorno.  Aggiorno Stanalone is based on Microsoft Visual Studio Shell technology.

Aggiorno 1.3:  Enabling Extensibility.  Up until this version all the Transformations came prepackaged.  Users could only manipulate them via a number of options (btw, check out the Aggiorno options for a breath of customization possibilities).  With this version we are incorporating a new feature that we call Smart Search and Replace which is basically a mechanism to write your own Transformations.  Read on to learn more about this awesome feature!

Aggiorno 1.4: Many more supported scenarios. What to expect from the next version?  Still to early to be specific but you will see many more Transformation to assist web masters in even more daily activities.

Smart Search and Replace

From the perspective of Aggiorno, Smart Search and Replace is a way to expose all the inner infrastructure to webmasters.  Aggiorno comes with a very powerful web source code parser and transformation engine that has a deep knowledge of every piece of information in a page and that is expressive enough for web developers to use directly.  

From the perspective of a web master, how would you describe Smart Search and Replace? It is very similar to Regular Expressions but with a deep knowledge of the markup syntax.  Smart Search and Replace lets you write sophisticated patterns to extract parts of your html knowing that you are searching on a markup not on plain text.  What does it mean?  It means that you can easily write things like the following that would be very difficult with normal reg exps:

• Find all heading 3 and change them to heading 4.
• Find all the content in a table and extract it into divs.
• Find all tags with a certain attribute and change that attribute.
• Find all text that is both Bold and Italic and convert it into a span with a class id.

With Smart Search and Replace you do not have to worry about trailing spaces, changes of line, text that is part of a string or a value.  You write the expression almost as writing HTML with variable content.  It is very easy and very powerful.  We have a good tutorial with samples and videos that you can follow.  I really encourage you to look at it.  It will save you many many hours of work!

In the coming days and weeks we will be publishing many more knowledge capsules in our blog and they will also contain Smart Search and Replace patterns so you can use them directly or tweak them based on your needs.

Let us know what you think and let us know if you use Smart Search and Replace to solve a specific problem.

Enjoy Aggiorno 1.3beta!

We have launched the product really just a few weeks ago and we are already collecting what I would call raving reviews.  Check out what some respected blogger think about Aggiorno:

Microsoft Joe Stagner (the Misfit geek) Artinsoft Aggiorno fixes your web pages.:"I've only started playing with it, I'm already convinced it's impressive enough to blog about. It leverages Artinsoft's "conversion" expertise but in this case convert your web page into a BETTER web page" and Aggiorno - Improving the web one tag at a time.

Two to Tango Peter Eysermans Aggiorno, the Italian colleague you've always wanted: "This tool is in my top 5 of best visual studio plug-ins."

Microsoft Tim Heuer Aggiorno, XHTML, your site and added value: "(ArtinSoft) team “gets it” which is good and they have some smart folks on the team."

Last week at PDC we showed the product to many people and got great feedback of Aggiorno 1.2 and the 1.3 version that we previewed.  Version 1.3 includes a new feature that will really rock your dev world.  Stay tuned.

Next week Aggiorno will be sharing a booth with the Internet Explorer 8 team at Microsoft PDC in Los Angeles.  We are even one of the official sponsors of the PDC Badges and here is ours:

We'll be showing off all the features that make Aggiorno an ideal companion for IE8 developers and we will also be demoing the new extensibility model for Aggiorno.  You'll be able to write your own Aggiorno Transformations on the fly.  You're productivity will sky rocket!

Visit us at the IE8 booth, get your badge and wear it proudly.  We'll have surprise prizes!