Unit2.pdf

Attached is a pdf of the following text for easier readbility

Throughout this unit, I have begun implementing my website (UltimateXI Advisor) in HTML, which I had designed previously in Unit 1 using Figma, while learning many things about accessibility and standards along the way. The following learning diary will summarize my findings and how I connect them to the learning goals.

HTML Templates Critique

General Formatting Issues: 

The code does not seem to comply with XHTML standards.

Improperly structured nested tags (General Examples: tag inside and tag that is unclosed.) Inconsistent indentation, difficult readability for developers. 

Initial Observations: 

1. Provided templates are missing XHTML-compliant attributes. 
2. The rendered webpage of sample1.html has unappealing visuals. 
3. Inconsistent font sizes and difficult reading of lists and tables. 
4. There are some spelling mistakes.

Specific Complaints: 

1. Missing  tag in sample1.html.
2. Tag  is empty in sample1.html is reoccurring and should either be omitted or filled with a title.
3. Improper formatting in the  tag (indentation missing). 
4. Header tags need consistent capitalization for clarity.
5. Deprecated  tags for italics, (may be achieved through CSS instead). 
6. The  tag lacks proper closure to compile with XHTML.
7. The lists display full sentences, recommend using proper list examples.
8. Improper use of tables for text formatting; tables should display data.

Learning Outcomes 

Connection to Updated Personas and Scenarios 

Hussain's persona perfectly captures the spirit of UltimateXI Adviser. As a fan of competitive FIFA gaming, Hussain's desire to assemble a strong Ultimate Team on a budget that's limited fits in nicely with the goals of our platform. By offering a robust budget filter and insightful data on player card value for coins, we cater to consumers like Hussain. His strategy mimics the main features of our website, where he can easily select the best player to fit his desired structure and financial restrictions.

Ammar's persona fits perfectly with the capabilities of UltimateXI Advisor. His desire to imitate the players from his favourite club and emphasize chemistry is in line with our platform's goal of providing specialized recommendations. We provide player nationality, club, and position filters so that Ammar may simulate the dynamics of his team in FIFA. His ideal advisor in building a squad that captures the reality he desires is UltimateXI Advisor.

Lyan is an example of a FIFA player that enjoys playing the game casually. The user-friendly design of UltimateXI Advisor makes it easier to find people that enhance the quality of entertainment of her squad. Our platform's straightforward rules and advice fit Lyan's strategy nicely, making it simple for her to find players who are compatible for her casual gaming sessions.

Ameer's persona captures the spirit of FIFA friendlies and family time. The strategy used by UltimateXI Advisor fits with Ameer's goal to build a simple, balanced squad. Ameer can quickly identify people that are simple to play with thanks to our player ratings filter, which make his family-friendly matches fun and stress-free.

Quality Assurance After Revision for UltimateXI Advisor:

Well-Structured Code: The underlying code has undergone meticulous revision to ensure it adheres to the latest HTML5 standards. This guarantees clean code that fosters maintainability and scalability.

Accessibility & Usability: UltimateXI Advisor prioritizes accessibility and usability. I implemented alt text for all images, ensuring that any user can engage with our platform seamlessly. Moreover, we've maintained a consistent styling throughout the website, following general accessibility guidelines to enhance the overall user experience.

Effective Communication: UltimateXI’s content and layout has been fine-tuned to align seamlessly with the needs and preferences of our personas: Hussain, Ammar, Lyan, and Ameer. This commitment ensures clarity and effectiveness in communication, making it easier for users to access the information they seek.

Broad Range of HTML tags: Usage of 

File Organization: To maintain a clean and organized directory structure, each page is in a file with its respective CSS file and its images in a folder called “skins”, simplifying management and future updates.

Image Optimization: We understand the importance of fast loading times without compromising image quality. The website employs web optimization techniques to ensure optimal image performance. 

A user-centric and well-balanced approach has been achieved as an outcome of the iterative development method used to match UltimateXI Advisor's design and functionality with the various personas and scenarios.  Every choice made, whether it be regarding the content, navigation, or upcoming layout and design, stems from our dedication to provide the personas a customized and simple user experience. In addition, the goal is to provide the varied user population that UltimateXI Advisor strives to serve the same outstanding experience.

The following is a zip folder of my HTML pages for UltimateXI Advisor

UltimateXI Advisor