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.

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!

At Aggiorno we are always looking for additional ideas for new aggiornings.  Over the past months we've been collecting a lot of information from the web from snippets of code to snippets of knowledge.  It is clear to us that web developers want to be productive and for that they need all this knowledge available at their fingertips.  We looked for a place where web developers would go and find the right information at the precise moment but we could not find it.  So... as good geeks we decided to create one: Knowledge Capsules | Practical Knowledge for Web Developers

What is knowledge capsule?  It is basically a problem and its solution.  What is an aggiorning?  It is an executable knowledge capsule!

We just started a few days ago but we are committed to create many capsules and become the place for web developers to hang out.  If you are interested in collaborating just let us know and we'll give you the tools to do so.  We also want to hear from you.  What are the most interesting topics to you?  What capsules would you like to see? There are tons of knowledge around the web, let's make it easy to access it.

Things are moving fast at Aggiorno.  We didn't even make a big splash when we launched V1.0 and it is already 1.2!  But what is really screaming fast now is Aggiorno itself. 

In the past few weeks we have concentrated on three themes:

1) Improved Performance: In version 1.2, that you can try now, the performance of the product is a completely different thing -- for the better!  If you are now applying Aggiorno on small and medium size files the response time is almost immediate.  If you had been using Aggiorno's previous versions I am sure you will note the difference.  The performance effort is tied to our goal of making Aggiorno part of the everyday workflow for web developers.  Even if most of the version 1.x features are related to making pages web standards compliant, this is just the first step, we need to create a common base of source code upon which we can start performing more Aggiorno magic.  Very soon we will be launching additional features that web developers will find super useful in everyday tasks and not only when you are having your "standardization after thought"!

2) Internet Explorer 8 aggiornings: In version 1.2 we have also included 2 new aggiornings related to Internet Explorer 8.  The first one is about the effortless introduction of the IE8 compatibility flag in all the pages of your web site.  The best way to make your pages IE8 compatible is to make them web standards compliant.  However, we know that this requires some effort (a lot less if you use Aggiorno!) and while you are working on it you can simply introduce an IE8 compatibility flag in your source code and "snap" your pages become compatible.  The second aggiorning in the IE8 wave is about taking advantage of a new feature of Internet Explorer 8: web slices.  Web slices are segments of a page that can be treated separately from the rest of a page.  You need to tell the browser that a portion of your code is sliceable, here is where Aggiorno helps you.  You only need to select the portion of code that needs to become a slice, give it a name and Aggiorno does the rest.  It generates all the required markup depending on the section of the code that you have picked.

3) Ability to invoke Aggiorno in more contexts: In previous version of Aggiorno you could apply aggiornings on files, group of files or portion of code.  Many of the early adopters asked to be able to apply Aggiorno on solutions or projects or folders.  Well, this is now possible.  If you want to apply a specific Aggiorno on a complete web site you just need to select it and go.  You still have the ability to review all the changes for every file before committing the results.

In addition to all the new features, Aggiorno now no longer requires Visual Studio to run.  If your machine does not have Visual Studio installed the Aggiorno isntaller will detect it and download a few additional dependencies and install.  The stand alone version is based on the Visual Studio Isolated Shell technology which allows us to deploy all the Aggiorno functionality as well as an IDE for web developers.  The IDE that Aggiorno deploys is fully functional and has most of the functionality that Visual Studio 2008 offers to web developers.  This is another feature that many of you have requested and it is now available.

We're eager to listen for your feedback.  Please let us know what you think.

Last week Aggiorno was selected among hundreds of companies to present at the fall 2008 edition of PlugAndPlay Tech Expo.  Let's provide some context.  PlugAndPlayTchCenter is a very successful Silicon Valley incubator that hosts a vast array of companies and has many successes under its belt.  The Expo is an event very similar to TechCrunch50 in which a small number of companies are selected to present their ideas.  The whole purpose is to get feedback generate networking and put your business plan in front of the hardest of critics: VCs!

The whole experience was awesome! Since you step into the incubator building you start smelling success!  The energy that flows in that environment is incredible.  Well... if you put together smart people, great ideas, entrepreneurship and lots of resources you are bound to create the perfect mix for the next billion dollar business.

The activity was divided into two main parts.  There was an expo floor where each company had  a small table for demos and the opportunity to make a 2 minutes pitch in front of a community of investors.  Many of the companies that participated at the expo were building web applications and therefore were potential customers of Aggiorno.  We demoed and demoed and demoed all day and received great feedback both from web developers as well as business feedback on our ideas. 

"So... tell me, what is Aggiorno?" was the most common ace breaker question and our perfected pitch was "Aggiorno is a tool to enhance the productivity of web developers". Then we continued: <Improving the web one tag at a time> is our lemma. The millions of web developers around the world are always looking for snippets of knowledge and snippets of code to deliver on their boss business requirements; for example SEO, accessibility, improved performance, lower maintenance cost.

Aggiorno is a software tool to create, distribute, and execute knowledge capsules directly into web sites’s source code. Keywords to describe its value proposition are Business oriented Refactoring Tool, Productivity Enhancer and Code Assistant, all for Web developers.

People really liked Aggiorno, they not only liked the concept, the initial focus around making pages more web standards compliant but also the "explain"features that shows you what is changing in the source code before it actually happens.

We even shot a video of the pitch that was the most entertaining of the show (and it was not only my opinion!).  We shot it with an iphone so the quality is not good, but it gives you a clear idea of what happened there.

All in all we were very proud of having been selected to participate and we the feedback we received was invaluable.

Everybody (at least all of us interested in web development) has been following and chatting about Chrome, the new browser from Google.

I personally care about how web pages will render in Chrome versus other browsers.  I looked at the Google Chrome FAQ for developers and found this explanation about rendering differences:

"

9. My site renders differently in Google Chrome than in Internet Explorer

Google Chrome uses a different rendering engine than Internet Explorer, so may display web pages differently. Apple Safari uses the same rendering engine as Google Chrome (WebKit) and should display pages the same way.

• If your site isn't rendering properly in any browser, make sure your HTML and CSS are valid by testing them at http://validator.w3.org/.
• If your site doesn't render properly in Google Chrome or Apple Safari, file a bug at webkit.org as described at http://webkit.org/quality/reporting.html.
• If your site renders properly in Apple Safari but not in Google Chrome, please file a bug against Google Chrome at http://code.google.com/p/chromium/issues/list.

"

I have some observations regarding the above statement:

1) There are 17 entries in the FAQ for developers and 6% is devoted to cross browser compatibility.  To me this is a huge percentage and it means that the number of pages that actually render differently in Chrome is probably very high.  -- Well... if about half of Fortune 500 companies have syntax errors on their home pages, what can you expect??  

2) Up until today the market share for a Safari (webkit) based browser is still low and therefore a rendering difference might not have been that important depending on your audience.  -- still... shame on you for not writing cross browser compatible code!  Or.. was it your fault?? (this is a discussion for a different post).

3) Google has the potential of altering market share numbers for browser utilization (we'll see how Google can change this in the next few months). -- This means that you should at least add Chrome or Safari as one of your test environments!

4) Once more, web standards and page validation are endorsed by a large Internet player (GOOGLE!!) as the way to fix the browser compatibility problem.  -- So... do you think web standards are important or not??

If you read some of my other posts in this blog you will find that I am building a practical argument in favor of web standards.  I am not advocating for web standards from a theoretical point of view but from a very pragmatic one.  If your code is web standards compliant or at least if your code validates your are on your way to solve many many potential problems around cross browser compatibility, search engine optimization, accessibility, performance, etc.  Web standards are a guide that you should follow in your daily coding.

aggiorno can simplify dramatically how you can make your page standards compliant with many of its aggiornings that are there to clean up the web without taking a toll on developers productivity.  How come we still have some many SYNTAX errors on our pages?  How do we expect browsers to behave consistently if we are not consistent in the use of the language and if browsers have to " guess" our intentions?  Let's standardize our pages! Let's use aggiorno to help us in this endeavor.

References:

Web Standards and SEO

Accessibility and Web Standards

Even the gurus sometime slip...

Clean HTML: why not??

PS: of course I am biased but I truly believe aggiorno is a superb product!  Why wait?  Try aggiorno out.  It has two modes of operation: as a stand alone web tool that includes a sophisticated XHTML/HTML editor and as an add-in for Visual Studio 2005/2008.

In the past few months there has been a lot of debate on the web about the support that Internet Explorer 8 provides to web standards.  Chris Wilson has an excellent post debating the motivation behind the final decision of providing an opt-in flag to indicate IE8 that it should behave in NON-standard compliant mode. 

This is why we created aggiorno express for IE8 to help you solve the problem... but let's start from the beginning... 

When Microsoft first though of IE8 the idea was to provide a fully web standard compliant browser but they were facing a dilemma.  Should the new Internet Explorer be backward compatible with IE7 or should it force the adoption of web standards?  To many of us the answer is quite straightforward, let's enforce standards!  However this is not that easy when you have such a large installed base as Microsoft has.  Microsoft had already receive quite a bit of heat when launching IE7 for breaking compatibility with IE6 and therefore causing many pages to render incorrectly.  The initial decision from Microsoft was to leave IE8 by default compatible with IE7, i.e: NON standard compliant!  If a web developer new its pages were standard compliant they would need to insert a special flag to tell so to the browser.  This initial decision was eventually reversed by Microsoft (with lots of applause from the standards community) and now IE8 by default runs in standards mode. 

However, what happens to the many pages that were "optimized" (some people would say "hacked") to run well with IE7? Microsoft included a compatibility mode in IE8. At the user level there is a compatibility toggle button that can be selected.  So, if a page renders incorrectly the user can switch modes and try to render it as Internet Explorer 7 would have. But what if as a web developer I want to make sure that my pages render well in IE8 without the need of a user action? There are 2 possibilities.

1) The best thing you can do with your pages is to make them standards compliant. This will not only help you with IE8 but also with other browsers such as Firefox, Safari, etc.  In the long term this is the best solution to solve cross browser compatibility issues.  (a long discussion on the value of standards with respect to SEO, accessibility, etc. can be found in the references below).

2) Microsoft has introduced a new meta tag recognized by IE8 to provide additional information to the browser beyond the DOCTYPE.  This meta tag tells the browser if it should interpret the page emulating other versions of Internet Explorer. The flag has 5 possible values:

a) <meta http-equiv="X-UA-Compatible" content="IE-5" />: The page will be rendered in quirks mode.

b) <meta http-equiv="X-UA-Compatible" content="IE-7" />: The page will be rendered in IE7 standards mode even if no DOCTYPE is present.

c) <meta http-equiv="X-UA-Compatible" content="IE-EmulateIE7" />: The page will be rendered as IE7 does.  This is the preferred compatibility mode.

d) <meta http-equiv="X-UA-Compatible" content="IE-8" />: This is the default IE8 and the most standards compliant mode.

e) <meta http-equiv="X-UA-Compatible" content="IE-edge" />: This prepares the page to render with any future IE version, always using the latest rendering engine.

The compatibility tag can be added as part of the server's HTTP header or as part of the HEAD for each page.  If you have access to the server and if you want to use the same tag on all the pages, then adding the flag to the server's header is the cheapest solution.  However, if you do not have access to the server and if you are transitioning to a more standard support for your pages you should add the appropriate meta tag to each page.

In order to add the flag to each page you can either write some sort of (complicated) regular expression to perform the task or you can download a free version of aggiorno express that automates this task for you.

But why does ArtinSoft care about browser compatibility?  Well, aggiorno is all about incrementing web developers productivity by encapsulating knowledge and allowing its application in the most automatic possible way.  aggiorno version 1 is mostly about cleaning up the web and helping web developers into the time consuming task of making web pages validate and standards compliant.  The next minor release of aggiorno (soon, very soon) will also help you add the IE compatibility flag and take advantage of the a new concept in IE8 called web slices (more on this feature in a later post).  In the mean time, we also wanted to support our customers with a free tool that allows for the incorporation of the compatibility flag in batch mode thus saving you time and making the transition to IE8 as simple as possible while you (using aggiorno!) make sure your pages are standards compliant!

References:

- Clean, crisp, accessible HTML - why not?

- Web Site Validation:The Fundamentals

- Accessibility Checklist and Web Standards

- Web Standards and Search Engine Optimization (SEO) -- Does Google care about the quality of your markup?

- Defining Document Compatibility (MSDN documentation for IE8)