COOKING WITH GLENN

HTML sitemap is a list of all pages on a website stored on a file or separate page. The sitemap layout is usually a list of page titles with the URL to each page hyperlinked.

• Allows easier navigation for users especially for a website with many distinct pages.
• Improves accessibility by providing a simple text-based structure and clear naming schemes. This allows the website to be easily understood by all types of users such as those who are visually impaired and use screen readers.
• A large website may have a HTML sitemap that is too cluttered/bloated, decreasing user readability.

XML sitemap is a file that lists all the important pages of a website.

• This file helps search engines (e.g. Google) to scan and store your website so that it appears in the user’s search results.
• XML sitemaps are purely for search engine optimisation. It does not improve navigation for users on the website.

VS Code

Advantages

• Free and lightweight environment. Can run on low-end devices.
• Supports multiple coding languages
• Real-time error detection
• Has built-in AI tool to help with coding and debugging.
• Built-in Git integration allows developers to track changes and quickly push updates.
• Highly customisable with multiple themes, keybinds and other plugins.

Disadvantages

• Requires downloading an extension (sometimes multiple) every time you want to work with another language.
• Performance can degrade if the project has multiple extensions are running at once.
• Error detection for some languages is dependent on an additional extension.

IntelliJ IDEA

Advantages

• IDE great for developing specifically in Java language.
• Real-time error detection.
• Built-in debugging tools for testing and fixing code.
• Offers enterprise-grade tools widely used in the industry.

Disadvantages

• Difficult for beginners to start learning with this IDE
• Uses a lot of system resources. May run slower on lower-end devices.
• Separated into 2 different models, Standard vs Ultimate. Standard is free and great if you want to only focus on Java coding. If you want support for more languages and access to all the features and tools, you will need to buy the Ultimate subscription.

PyCharm

Advantages

• Specialised for developing in Python. Has all the features to support Python coding. Any other language has limited support
• Easy for beginners to set-up and use the program.
• Real-time error detection
• Supports virtual environments for isolating projects.

Disadvantages

• Uses a lot of system resources. May run slower on lower-end devices.
• Same separated models as IDEA, standard is free but limited. The Pro version has more tools and language support, but requires another subscription purchase.

Suitability: VS Code is the best option for an entry level trainee code developer due to its flexibility with many languages and low performance requirements. Although IDEA and PyCharm offer a large catalogue of tools & features, the tools are specialised to their dedicated language (Java for IDEA, Python for PyCharm) and many tools, such as those for multi-language support are locked behind the subscription-based editions.

Developers created web browsers with their own features and tools, not following any agreed standards. This caused websites to have frequent compatibility issues where they would work in a certain browser but break in another.

Organisations such as the World Wide Web Consortium (W3C) began to create web development standards such as HTML, CSS styling and the WCAG accessibility guideline. Although the standards were created, it took a significant amount of time for developers to integrate them into their browsers (either limited implementation or none at all).

This created more inconsistency across browsers as to which browsers adopted the standards and what standards were used. This inconsistency in standard implementation forced developers to:

• Write specialised code projects dedicated for certain browsers
• Create workarounds to ensure compatibility between browsers
• Spend extra time & resources identifying, testing and pushing fixes.

Nowadays, many of the most popular web browsers have adhered to web standards such as those from W3C. This has significantly reduced the compatibility problems and made it easier for developers to create websites that work across all browsers.

Browser Compatibility Testing

Used to ensure that web applications function properly across different browsers on various devices, operating systems, and versions.

Browser compatibility testing focuses on several critical areas, which include:

• Layout & design: Ensure the visual elements like fonts, CSS styles and images are consistently rendered.
• Functionality: Verify that features such as pop-ups and forms work across browsers.
• Performance: E.g. How fast the website’s pages are loaded
• Accessibility: Confirm that the website adheres to web standards such as W3C’s accessibility guidelines.
• Responsive design: Validating performance across various screen sizes and devices. Images, text or icons don’t warp when on a smaller/larger device.

Website Functionality Testing

Evaluates the features & functionality of a website, making sure that they work as expected.

Website Functionality Checklist

• Navigation: Verify navigation menus, links, and buttons for accuracy and functionality across all pages.
• Input Fields: Check input forms have proper validation (required fields, character limits, format, etc.). Also validate form submission, error messages, and redirection upon successful submission.
• Functional user account interaction: Verify login/logout, account creation, password reset, and user profile changes.
• Design: Test website responsiveness across various devices (desktop, mobile, tablet) and screen sizes.
• Browser Compatibility: Ensure the website functions seamlessly across different browsers (Chrome, Firefox, Safari, Edge, etc.) and browser versions.
• Performance & Speed: Check page loading times and overall website performance.
• Mobile Accessibility: Evaluate how easily visitors can view your website on mobile devices.
• Security & Privacy: Perform tests to identify vulnerabilities. (check SSL certificate, HTTPS, secure data transmission).

The Northern Territory Government has endorsed the Web Content Accessibility Guidelines (WCAG 2.0)

• Perceivable: Information and user interface components must be presentable to users in ways they can perceive.

  Example: Text alternatives for any non-text content so that it can be changed into other forms such as large print, braille, speech, symbols or simpler language.

• Operable: Users must be able to easily navigate and interact with the website’s features.

  Example: When an authenticated session expires, the user can continue the activity without loss of data after re-authenticating

• Understandable: Information and the operation of the user interface must be understandable.

  Example: A mechanism for identifying the expanded form or meaning of abbreviations is available.

• Robust: Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.

  Example: In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.

On the Local Computer

• Create one singular Project folder that contains all html pages, CSS style sheet, images, fonts and javascript. Everything besides the html pages should be in their own separate folder.
• Every part of the website is easy to move and back up to another location.
• Project folder should have identical structure to the website root folder so that file paths remain consistent when uploaded.
• If using an IDE like VSCode, the SFTP extension can be used to send work done locally to the web server.

Inside the website root folder (public_html)

• Structure should match the one in the local Project folder. Have your html pages within public_html and your CSS, javascript, images and fonts are in their own separate folders.
• Homepage of the web server should be designated as ‘index.html’. This ensures the homepage is automatically loaded as the default homepage when users access the website.