As a user, I want a flawless website so that I can enjoy a great experience

[vjpixel]

Deadline: Thu 20:00

Since we have users that use different web browsers, we want to have the website compatible with web browsers with more market share. Also, we want to make sure that our code is valid on W3C.

This task needs to be done after all implementations are sent to review.

We need to update the website to be compatible with Google Chrome, Mozilla Firefox, Apple Safari, and Microsoft Edge; and validated at W3C.

---

To facilitate the test (and review) this tutorial will guide you through validators and compatibility tests.

Remember:

1. At this point, we have two one page to test: the main page. and the about page. Remember to analyze both the page at both online testers.
2. The testing was has to be made with the alpha.bucoli.co version of the site.

The analyzes were made in two different sites for different effects: the W3C Validator checks if the code is ok and within the specification, the page is using; the BrowseEmAll verifies the compatibility with known browsers to point out if something will not work or work partially.

W3C Validator

1. open the W3C Validator and type (or paste) the URL for the page you are testing;
2. Hit or click at the "Check" button just below the box, to the right. That's it! The verification should get an OK status with no errors or warnings.

BrowseEmAll

1. Open BrowseEmAll, click the big orange button "Let's Find Out";
2. Click the "Download HTML from URL" just below and to the right of the big "Input" text;
3. Type (or paste) the URL for the page you are testing;
4. Click at the "Analyze" button to the right of that box; That's it! A few very old browsers will show some problems with some modern JavaScript or not supporting some elements like the SVG HTML element.

[vjpixel]

@tiagobugarin how about creating a new version of the tutorial, just using the URLs?

[tiagobugarin]

@tiagobugarin how about creating a new version of the tutorial, just using the URLs?

great idea. streamlines the process and simplifies the use. will give it a go!

[tiagobugarin]

This new version of the tutorial has a few less steps and got a lot less technical in the process making it easy to follow by any one interested. :)

To facilitate de review this little tutorial will you through validators and compatibility tests.

Remember:

1. At this point we have two pages to test: the main page and the about page. Remember to analyze both pages at both online testers.
2. The testing was made with the alpha.bucoli.co version of the site.

The analyzes where made in two different sites for different effects: the W3C Validator checks if the code is ok and within the specification the page is using; the BrowseEmAll verifies the compatibility with known browsers to point out if something will not work or work partially.

W3C Validator

1. open the W3C Validator and type (or paste) the URL for the page you are testing;
2. Hit or click at the "Check" button just below the box, to the right. That's it! The verification should get an OK status with no errors or warnings.

BrowseEmAll

1. Open BrowseEmAll, click the big orange button "Let's Find Out";
2. Click the "Download HTML from URL" just below and to the right of the big "Input" text;
3. Type (or paste) the URL for the page you are testing;
4. Click at the "Analyze" button to the right of that box; That's it! A few very old brosers will show some problems with some modern JavaScript or not supporting some elements like the svg HTML element.

[tiagobugarin]

The code is good for this week sprint. Although, at the W3C Validator, for the home page, there is a warning about a section lacking a heading it is not a major problem here as the section element is not being used for its original intent (separate information in sections) but to encapsulate the menu structure. Will change this structure for the next sprint to avoid this warning.

[tiagobugarin]

So, @vjpixel, would you please review this issue?

[vjpixel]

In the W3C Validator I've got the following errors/warnings in the About page. Since GitHub is messing with the formatting, I'm attaching an image.

Error: Duplicate ID about. From line 30, column 5; to line 30, column 35 k↩ início

Warning: The first occurrence of ID about was here. From line 1, column 16; to line 2, column 30 TYPE html>↩↩<head

Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections. From line 32, column 3; to line 32, column 11 ↩

↩ <

fixed that

[tiagobugarin]

@vjpixel can you go for a second round of review?

[vjpixel]

I review and it's ok!

[vjpixel]

@tiagobugarin I updated this task description.

[vjpixel]

Also, I reviewed the tutorial and included it in the task description, so it's easier to find.

[tiagobugarin]

believe it is ok to go through the process. would you @vjpixel review it.

keep in mind that there is no more 2 pages to test, just one. i wll update the task description to make it clear.

[vjpixel]

Great! No errors or warnings!

[tiagobugarin]

This week I barely touched the code so that everything stayed as good as before in regard to validators and testing...

@vjpixel would you review, pls

[vjpixel]

I checked and everything is OK.