Giters

Ethra8 / history_beyond_myth

HISTORY BEYOND MYTH

Home Page:http://englishgrows.com/history_beyond_myth/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

arthurian-mythoshistorymedieval-studiesmyth

HISTORY BEYOND MYTH

Project Overview

image

  • History Beyond Myth is a website that aims at providing the reader with curious coincidences between academically recognised historical facts and some of the aspects of a well-known myth, such as the Arthurian cycle. The historical investigation exposed in this site has been going on for many years, and will continue to go on, updating whatever new coincidences are found on this matter.

  • This site is useful for anyone who might be interested in history, more precisely from the European early Middle Ages, or also in myths and legends in general.

  • The users of this site will be able to sign up in order to receive a monthly newsletter containing any new findings during the ongoing investigation, as well as interesting social and cultural events around Europe, related to myths and/or history from the early Middle Ages. Visits to sites related to the curious coincidences stated in the site will also be organized periodically.

  • The users of this site who have already signed up will also be able to share any findings of their own related to the Matter of Britain, by sending the file of their choice through the form provided in the contact page.

NOTE: Responsive images of the site automatically generated through ui.dev/amiresponsive. The tool is interactive, and you can view and scroll through all pages in all the types of devices simultaneously here. I customized defect background-color attribute from amiresponsive site from black to whitesmoke, as my website is mostly in dark tones. I did it by changing the elements of the page, more precisely class="bg-brand-coal".

Live Site

  • You can view the deployed site here

Repository

  • You can check the Github repository here

Author

EDNA TORRES MUNILL

TABLE OF CONTENTS

UX

You will find in the points stated below a brief study aiming at providing the user with the best possible experience when visiting this site.

Target Audience

  • Any person interested in unsolved mysteries in general.
  • Any person who, regardless of their age, is interested in medieval history and/or myths.
  • Adults and young adults in general who love travelling and discovering new interesting places and facts.
  • Scholars, graduates, and undergraduates in Medieval History studies who might want to push this line of investigation further.
  • Adults, young adults and teenagers who are interested in the Matter of Britain (called Matter of Brittany in French), and the Arthurian cycle.
  • Parents and couples in search of fun social family gatherings to spend quality time on weekends.
  • People interested in art and culture in general.

Project Goal

  1. The project is aimed at providing the user with curious coincidences between academically recognised historic facts stated in well-preserved manuscripts from the early middle Ages and academic studies, and a well-known myth such as the Arthurian cycle from the so-called Matter of Britain.
  2. Members can share any findings of their own, which might contribute to this ever-ongoing historical investigation.
  3. Members are informed through our monthly newsletter of interesting cultural and social events related to history from the early middle ages, and/or myths around Europe, and can eventually build social networks with shared interests.
  4. Members can participate in organised visits, scheduled once in a while, to places that hold these curious coincidences between history and myth.

User Stories

1. As a first-time visitor:

  • I want to learn about curious coincidences found between academically recognised historic facts and the Arthurian legends.
  • I want to get information on how to receive follow ups in the investigation, cultural and social events, and how to become a member to get the monthly newsletter.
  • I want to find the social media links to see the website profile, to look at photos from past events, and maybe follow.
  • I want to know if they organize visits to emblematic sites related to the ongoing investigation, or interesting medieval sites.

2. As a returning visitor

  • I want to know if any new curious coincidences have been found between academically recognised history fact and the Arthurian legends.
  • I want to sign up as a new member after considering my decision, to receive new updates on possible new curious findings of the ongoing investigation.
  • I want to sign up as a new member after a conscient decision, to receive information on new social or cultural events related to history from the Middle Ages, and/or medieval myths including the Arthurian cycle.
  • I want to sign up to be informed of organized visits to emblematic places related to the ongoing investigation, or medieval sites in general.

3. As member

  • I want to know if any new curious coincidences have been found between academically recognised history fact and the Arthurian mythos, before I receive the monthly newsletter.
  • I want to check the original sources provided throughout the site, and review the digitalized manuscripts referrenced.
  • I want to share some new finding of my own, and have another opinion on this new finding, eventually adding up to this site content.

User Profiles

  1. Malia is interested in early middle ages' history and myths, and wants to learn more about curious coincidences found between academically recognised history facts and medieval myths such as the well-known Arthurian legends.

  2. Brian is a natural born traveller, and enjoys going to new places and discovering new interesting things.

  3. Sarah is an art-lover, and likes attending expositions of all sorts, including Middle Ages topic-related cultural events.

  4. Mara and Peter are fun-loving parents who enjoys family-friendly social gatherings to spend quality time ith their children of all ages on weekends and holidays.

  5. Alice and Marc are a couple that enjoy social gatherings, and all types of cultural events.

  6. Josh is a scholar historian specialised in the Middle Ages, and is keen to learn any curious coincidence found between academic history and medieval myths such as the Arthurian mythos.

UI

UI - FIXED NAVIGATION BAR

  • The user is able to interact with the responsive navigation bar, fixed to the top of every page, icluding the 404 error page. So, even when scrolling down, the user can navigate throughout all the site's pages easily. The navigation bar also includes the 'about' section from the home page.

UI - FOOTER

  • Included at the bottom of each page, and also included in the 404 error page, it allows the user to interact, and visit (or follow) the social media profiles of the site by clicking on the correspondent social media icon. The user can also instantly and seemlessly send an email to the administration of the site, by clicking on the envelope icon, or on the written email.

UI - HOME PAGE

  • Includes a site description section, which contains 3 subsections (About section, Keeping it Real, and Reasons to sign-up).
    • Subsection: Reasons to sign-up allows the user to interact with a button-like link* that redirects the user to the sign-up page.

UI - CONTENT PAGES

  • Content pages Arthur I and Avalon include:
    1. Tooltips on every section that become visible on hover, containing references of the content, and are linked to the source of every information included. These allow for user interaction, being able to check the sources, which open in a new tab.
    2. Images linked to their source, so that the user can interact by clicking on each image, and checking its original source, which will open in a new tab.
    3. Accordions on each image caption allow for user interaction, unfolding on click, to provide detailed information on each image added up to the summary, visible when the accordion is folded.
    4. Button-like link fixed at the bottom-left of Arthur I page allows for user interaction to check the original source of the digitalized manuscript placed as a fixed background image.

UI - SIGN-UP FORM

  • Included in the sign-up page, the sign-up form allows the user to interact, and send the sign-up form, which also allows to include a file stored in the user's device, which the user can easily browse and include.

DESIGN CHOICES

COLORS

I have created the color palette myself, and the Coolor.co website has only been used to display all the colors beautifully for the screenshot below. The colors selected are as follows:

  • Turkey Red #B30502 / RGB(179,5,2):

    • Use: All headers' background color.

    • Rationale: The selection of this tone is due to two main factors.

      1. It is the background color of the coat of arms of the Plantagenet dynasty, which was the dynasty ruling England (1154-1485), and to which all the main characters of the website belonged.

      2. It is also the predominant color found in the illuminated manuscripts dated around the 13th century on which most of our investigation is founded, and more precisely the roll genealogy of the Kings of England dated c.1300 where our main characters' portraits are depicted.

  • Dark Red #8F0303 / RGB(143,3,3):

    • Use: Background color for the footer, and the sign-up form.

    • Rationale: A slightly darker tone than the former which resembles bloodish red, reminding of the tragic and fatal ending of our main character, Arthur I of Brittany, who battled against John Lackland for the succession to the throne of England after King Richard "the Lionheart" died, and supposedly captured and murdered when he was only 16 years old by his opponent, who finally ruled.

  • White Smoke #F5F5F5 / RGB(245,245,245):

    • Use: Fonts that are on an Eerie Black background.

    • Rationale: To ensure clear contrast and readability for the user. Also, its name White Smoke is the signal from the Vatican when a new Pope is selected. The church was all-mighty, and its power had no boundaries back in the Middle ages, so it also brings that to mind.

  • Eerie Black #1B1B1B / RGB(27,27,27):

    • Use: Backgrounds of content pages as Arthur and Avalon.

    • Rationale: To favour contrast with the colorful captions embedded, taken from medieval illuminated manuscripts on which the investigation is based. The ink used in those early medieval manuscripts, mostly made from insects and ashes, has also inspired this selection.

  • Onyx #424242 / RGB(66,66,66):

    • Use: Fonts that have a background of White Smoke, in the home page description section, and the sign-up page sections.

    • Rationale: To gain clear contrast, and ensure users' readability, with a softer tone of dark grey.

  • Jet #2E2E2E / RBG(46,46,46):

    • Use: The navigation bar background color.

    • Rationale: It reminds of the shadows and obscurity that still cover the early Middle Ages' history and myths, still full of shadows to unveil. Also, the contrast with the Turkey Red from the headers reminds of the main plot surrounding this site investigation, full of shadows and blood.

  • Timberwolf #D6D6D6 / RGB(214,214,214):

    • Use: The headers' 1st letters, the vertical or horizontal lines in the headers that resemble a spear or sword, and for the background of the button to the sign-up page in the navigation bar.

    • Rationale: Gives a metal-like appearance. All element have a strong shadow to give it volume. Middle Ages were full of iron: armours, shields, spears, swords, etc. But also cups, and all king of everyday medieval utensils were made of metal.

    image

TYPOGRAPHY

  • I found in Google Fonts styles that match the Medieval topic of the website.
  • The headings decrease in size to ensure full responsiveness of the website.
  • Check the selection of Google Fonts here)

FONTS USED

  1. UnifrakturMaguntia: Medieval font by excellence, only used lower-case which are very readable, for index header's 1st letters, and for logo. Fall-back font to cursive.

  2. UnifrakturCook: Very similar to the previous, but upper-case are more readable, even if only available in bold. Used only for other pages than index's header, and only for the 1st letters. Fall-back font to cursive.

  3. Metamorphous: Medieval font, very readable upper & lower cases. Fall-back font to cursive. Used in all headers main text, appart from the 1st letters

  4. Jim Nightshade: Very readable old script, that fits the topic of the website. Fall-back font to cursive. Used for the second line of the headers

  5. Reenie Beanie: Only used in home page header for the word "beyond", and the 404 page header's word "modern". Being a modern script font, it brings an interesting contrast with the medieval fonts used in the rest of the header. It symbolyses modern investigation that seeks to go beyond the myth. Fall-back font to cursive.

  6. Fleur De Leah: Stylish Flowery design. Exactly the same design used in medieval manuscripts included in website, upon which the investigation lays. Fall-back font to cursive. Used for the 1st letter of the sections' headings.

  7. Montserrat: Modern sans-serif very readable font for main content.

RATIONALE OF USE

  • LOGO: Use of UnifrakturMaguntia for the single h from "history". The logo is situated to the left of the navigation bar, and as a favicon in each page meta title:

    logo

  • HEADER (HOME PAGE):

    • Use of UnifrakturMaguntia (lower case) only for the 1st letters of main words of main heading of each page.
    • The remaining text in headings use Metamorphous (upper case).
    • All headers' extra text (p) use Jim Nightshade.
    • Reenie Beanie is only used for the word "beyond" in the main page header, seeking a clear contrast between history, medieval mythos, and modern contemporary studies which precisely seek to go beyond the myth, trying to bring a modern and fresh approach to it.

    image

  • HEADERS (CONTENT PAGES): * Use of UnifrakturCook (lower case) only for the 1st letters of main words of main heading of each page. * The remaining text in headings use Metamorphous (upper case). * All headers' extra text (p) use Jim Nightshade.

    image image

  • HEADER SIGN-UP PAGE:

    • Use of Metamorphous (upper case).

      image

  • HEADER 404 PAGE:

    • Use of UnifrakturCook (lower case) only for the 1st letters of main words of main heading of each page.
    • The remaining text in headings use Metamorphous (upper case).
    • All headers' extra text (p) use Jim Nightshade.
    • Reenie Beanie is only used for the word "modern" in the main page header, seeking a clear contrast between history, medieval mythos, and modern contemporary studies which precisely seek to go beyond the myth, trying to bring a modern and fresh approach to it.

    image

  • NAVIGATION BAR:

    *Use of Metamorphous in capital letters, which gives a very readable medieval style to the site.

    image

  • SECTION HEADINGS (h2):

    • Only the 1st letter uses Fleur De Leah, which recreates the 1st letters of paragraphs from medieval manuscripts.

    • The remaining text uses Jim Nightshade, to ensure readability, but keeping the medieval spirit alive.

      image

  • MAIN CONTENT

    • Montserrat is used for all paragraphs' content to ensure optimal readability of the site.

      image

IMAGERY

Find below all the images used in this site, with a description and a link to their original source. The images have been listed by pages, and different devices' screen-size. Aiming at an effective responsiveness, sometimes different images show depending on the size of the device, as follows:

HERO IMAGE

The hero image is the biggest image positioned below the header of the landing page (home page) appearing in tablets and laptops, and appears as well fixed at the background of the landing page in all devices. The image takes full sense in section 3 of Arthur I' page, where it also displays in all devices regardless of the screen size. It has been selected because it shows Arthur I of Brittany with a crown giving homage to the King of France Philip Augustus in return for this latter's support to his claim to the throne of England after King Richard the Lionheart's death. The source is the manuscript "Les Grandes Chroniques de France" Royal MS 16 G VI, Royal MS 16 G VI, f.361v, dated 1332-1350, British Library.

image

HOME PAGE - IMAGERY

All the following images display in screens of all sizes:

HOME PAGE - BACKGROUND IMAGE

Full caption of the whole page f.361v of the manuscript Les Grandes Chroniques de France from where the hero image aforementioned has been taken. Source is manuscript Royal MS 16 G VI, f.361v, British Library. When the user scrolls down from the header, the hero image taken from this membrane of the manuscript appears fixed on the background, with some medieval text from the manuscript page also visible. As the image is meant to be used an a background in this case, a black shadowy transparency has been put over it, so it doesn't distract the user of the page's content. image

HOME PAGE - UNDERNEATH THE HEADER

This section has a height of 200px in all screen sizes.
All images in this section are related to the Arthurian mythos, and taken from digitalised medieval manuscripts written around the same century. Most images in this section reappear in subsequent pages. The images are here meant to be purely decorative, and their overflow is hidden, so users will see a different amount of images at this point, deppending on the size of the device used:

  1. Depiction from author Matthew Paris of the coat of arms of the House of Plantagenet, also called of Anjou, which was England's ruling dynasty at the time, and to which Richard I and Arthur I of Brittany belonged. Source is Manuscript Royal MS 14 C VII, dated 1250-1259, British Library.

  2. Early medieval map of Britain dated 1250, from author Matthew Paris, from his work Historiae Anglorum. Original source is manuscript Cotton MS Claudius D VI, kept in the National British Library, but as it is stated in the original Cotton MS Claudius D VI manuscript description, the map was removed in year 1929, and now kept separately.

  3. Portrait of Arthur I Duke of Brittany first found in Wikimedia Commons, heir to Richard I "the Lionheart" by birth right. Its original source is the 6th membrane of the roll chronicle of Britain Genealogy dated 1300-1340, kept in the National British Library, as manuscript Royal MS 14 B VI

  4. Depiction of Arthur I in his castle, wearing a crown after Richard I's death, receiving Philip II of France who is visiting him. Arthur is giving homage to Philip in return for his support to his claim to the throne of England. This depiction's original source and description is page f.361v of the illuminated manuscript dated 1332-1350, kept in the National British Library, called "Les Grandes Chroniques de France" Royal MS 16 G VI.

  5. Depiction of Queen Eleanor of Aquitaine, Queen of England, married to Henry II, mother of Richard the Lionheart and John Lackland, and Arthur's grandmother. She is considered one of the most powerful and influential women of the middle ages, and important patron of arts and music. This depiction found in the Codex Manesse is considered by many historians to be her. The French Post Office even dedicated a stamp to Eleanor of Aquitaine using this same depiction. Source from the Codex Manesse, dated c.1300, DNB: Deutsche Nationalbibliothek, digitalised version via Heidelberg University Library

  6. Portrait of King Richard "the Lionheart": Its original source is the 6th membrane of the roll chronicle of the Genealogy of the Kings of England dated 1300-1340, kept in the British Library, as manuscript Royal MS 14 B VI

  7. Depiction of King Richard "the Lionheart", found in Wikimedia Commons. Its original source being page f.9v from manuscript "Brief Abridgement of the Chronicles of England" attributed to Matthew Paris, dated 1255-1259 kept in the British Library as manuscript Cotton MS Claudius D VI.

  8. Portrait of Geoffrey II Duke of Brittany. Its original source is the 6th membrane of the roll chronicle of the Genealogy of the Kings of England dated 1300-1340, kept in the British Library, as manuscript Royal MS 14 B VI

image

image

History.Beyond.Myth.-.Google.Chrome.2023-09-17.17-24-05.mp4

ARTHUR I PAGE - IMAGERY

Find the images displayed in this page, depending on the screen size:

ARTHUR I PAGE - HEADER IMAGE

Portrait of young Arthur I Duke of Brittany, son of Geoffrey II Duke of Brittany, rightful heir to King Richard "the Lionheart", extracted from the 6th membrane of the roll chronicle of the Genealogy of the Kings of Britain dated 1300-1340. The membrane depicts Henry II's sons and grandsons, one of his grandsons being Duke Arthur I of Brittany. Source from the British Library, manuscript Royal MS 14 B VI.

  • TABLETS AND DESKTOPS (min. 578px width): 150px width, 175px height

    image

  • PHONES (max. 576 px width): 130px width, 143px height

    image

Arthur.I._.History.Beyond.Myth.-.Google.Chrome.2023-09-24.13-30-21.mp4

ARTHUR I PAGE - BACKGROUND IMAGE

Fixed to the top left, the 6th membrane of the roll Chronicle of the Kings of England, dated 1300-1340. The caption shows King Henry II to John Lacklang. Source from the British Library, manuscript Royal MS 14 B VI

image

SECTION 1 - HEIR TO KING RICHARD THE LIONHEART

The images of this section change, depending on the size of the screen, as follows:

  • DESKTOPS (min. width of 1200px):

    1. Zoom-in caption of the 6th membrane of the roll Chronicle of the Kings of England, dated 1300-1340. The caption shows King Henry II and his sons. Source from the British Library, manuscript Royal MS 14 B VI including King Henry II descendants.
      image

  • PORTRAIT TABLETS AND PHONES (max. width of 991px):

    These two following images are responsive, and adapt to different screen sizes, displaying differently (in row, or in column) to fit each device width accordingly:

    1. Portrait of King Richard "the Lionheart": Its original source is the 6th membrane of the roll chronicle of Britain Genealogy dated 1300-1340, manuscript Royal MS 14 B VI, National British Library.

    image

    1. Portrait of Geoffrey II Duke of Brittany: Its original source is the exact same as the latter, the 6th membrane of the roll chronicle of Britain Genealogy dated 1300-1340 as one of King Henry's sons, being Richard's younger brother, and Arthur's father, manuscript Royal MS 14 B VI, British Library.

    image

Arthur.I._.History.Beyond.Myth.-.Google.Chrome.2023-09-24.13-36-44.mp4

SECTION 2 - RETAINED BY THE KING OF FRANCE

The image of this section is responsive. While the figure it's placed in takes 100% of the width of the section, the image only takes 80% of the width inside the figure in wider screens from 992px upwards, and 100% in smaller screens. The image was selected because it is a 14th century depiction of the Palais de la Cité, home to the French Kings at the time Arhur I of Brittany was secretly brought there to be raised with Prince Louis of France. Source is the illuminated manuscript "Les Très Riches Heures du Duc de Berry", c.1400, ms.65, f.6v, Condé Museum, Chateau de Chantilly, France. Digitalized image available with description at Wikimedia Commons, and at Web Gallery of Art

image

Arthur.I._.History.Beyond.Myth.-.Google.Chrome.2023-09-24.13-39-55.mp4

SECTION 3 - DEATH OF KING RICHARD I

The image of this section is the Hero Image, which remains the same in all screen sizes, adapting its width and size accordingly, taking 100% of the width of the paragraph, bringing responsiveness to the site.

image

Arthur.I._.History.Beyond.Myth.-.Google.Chrome.2023-09-24.13-41-50.mp4

SECTION 4 - TWO KINGS ONE THRONE

Caption of the original text from the page where the hero image has been taken - page f.361v, lines 10-11, from the illuminated manuscript Les Grandes Chroniques de France dated 1332-1350. The text names Duke Arthur as Arthur King of Brittany ("Arthus Rois de bretaigne"), referring to the facts that happened after King Richard's death, as Philip Augustus, King of France, supported Arthur's claim to the throne, or at least to separate the French Plantagenet territories from Britain, and become their Breton King. The original source is manuscript Royal MS 16 G VI, f.361v, lines 10-11, British Library.

image

Arthur.I._.History.Beyond.Myth.-.Google.Chrome.2023-09-24.13-44-53.mp4

AVALON PAGE - IMAGERY

AVALON PAGE - HEADER IMAGE

The image on the header changes slightly depending on the size of the screen, to adapt to the change of display of the header accordingly, and aim at full responsiveness. Even though the same image is used, its final displays changes by including it as the background to a div inside the header, which changes its width and height on smaller devices, as follows:

AVALON PAGE - BACKGROUND IMAGE

Amazing grayscale shot of a rocky beach in guernsey near the fort houmet by wirestock at Freepik.com. The image is meant to show the user the geography of Guernsey island shores, but in a decorative manner, so a black shadowy transparency has been put over it to avoid too much distraction from the page's content. Different sizes of the image have been used for different screen sizes:

  • LAPTOPS AND TABLETS (min. size of 577px): 2000px width, 2000px height:

    image

  • TABLETS (min. size of 577px, and max. size of 1199px): 780 px. width, 1932 px. height:

    image

  • PHONES (max. size of 576px): 600px width, 1228px height:

    image

SECTION 3 - THE VALUE OF ABALONES

The image of this section remains the same in all screen sizes, adapting its width and height accordingly, bringing responsiveness to the site.

SECTION 4 - MEDIEVAL JEWELRY

The image of this section remains the same in all screen sizes, adapting its width and size accordingly, bringing responsiveness to the site.

SECTION 7 - MISTS OF GUERNSEY

The image of this section remains the same in all screen sizes, adapting its width and size accordingly, bringing responsiveness to the site.

Avalon._.History.Beyond.Myth.-.Google.Chrome.2023-09-24.18-50-35.mp4

SIGN-UP PAGE - IMAGERY

SIGN-UP PAGE - BACKGROUND IMAGE

The image of this section remains the same in all screen sizes, but in different sizes, bringing responsiveness to the site.

  • Middle ages castle by Tama66 at Pixabay.com. The image is meant to show the user some medieval castle similar to the ones he would see on some organized sight seeing visits if he/she decides to sign-up, but in a decorative manner, so a black shadowy transparency has been put over it to avoid too much distraction from the page's content. Different sizes of the image have been used for different screen sizes, with a cover attribute to cover all screen:

    • LAPTOPS (min. size of 1200px): 1920px width, 1278px height
    • TABLETS (min. size of 577px to max. size of 1199px): 1280px width, 852px height
    • PHONES (max. size of 576px): 640px width, 426 height

    image

EVENTS - IMAGERY

The images of these 3 sections remain the same in all screen sizes, adapting its width and size accordingly, bringing responsiveness to the site. Nethertheless, these don't display in phones (width smaller than 576px)

404 PAGE - IMAGERY

404 PAGE - BACKGROUND IMAGE

The image remains the same in all screen sizes, and repeats itself both through the x and y values to fill the screen accordingly, in a responsive manner.

  • Walther von der Vogelweide, a poet and composer from around the same time of the course of the events related on this site. It has been selected because it depicts a medieval poet thinking, sitting on a rock, and when a 404 error occurs, the cumputer is also thinking. The image's original source is the Codex Manesse written c.1300, DNB: Deutsche Nationalbibliothek, digitalised version via Heidelberg University Library.

    image

Error.404._.History.Beyond.Myth.-.Google.Chrome.2023-09-13.19-40-44.mp4

ANIMATIONS AND TRANSITIONS

FOCUS

SIGN-UP FORM - FOCUS

The text, email and textarea inputs on the form change their background color from whitesmoke to a light grey #D6D6D6 when the focus is on them. The text input correspondent to the First name has an autofocus attribute as well, so that when the page is loaded, the user can directly type in:

History.Beyond.Myth.-.Google.Chrome.2023-09-25.18-29-36.mp4

HOVER

NAVIGATION BAR - HOVER

  • Links to other pages: As the user hovers through the names of the other pages links, the color of the fonts turn from whitesmoke #F3F1F1 to #D6D6D6, a light grey shade:

    History.Beyond.Myth.-.Google.Chrome.2023-09-11.16-37-05.mp4

  • Sign-up link: Styled as a button, when the user hovers through it, its background color turns from #D6D6D6 to #8F0303, and its font color to whitesmoke, the same colors as the icon, and of the form itself:

    Sign.Up._.History.Beyond.Myth.-.Google.Chrome.2023-09-25.16-58-46.mp4

  • Collapsed Navigation Bar: Bars Icon: On phones and portrait tablets (max. width of 768px), when the responsive navigation is collapsed, the icon bar that triggers the navigation bar to uncollapse when clicked, changes color from #D6D6D6 to #B30502, and its parent container, which is transparent with a border in #D6D6D6, changes the color of its border to whitesmoke on hover:

    Avalon._.History.Beyond.Myth.-.Google.Chrome.2023-09-11.18-00-30.mp4

HOME PAGE DESCRIPTION - HOVER

  • Section 3: Reasons to sign up - ON the bottom of this section, there is a button-like styled link to the sign-up page which changes color on hover from #B30502 to #8f0303, and also from having a box-shadow to having no box-shadow, to give the optical illusion of perspective, feeling that the button-like link has been pushed downwards on hover:

    History.Beyond.Myth.-.Google.Chrome.2023-09-11.18-58-51.mp4

ARTHUR AND AVALON PAGES - HOVER

  • The content text of all sections include tooltips, triggered by smaller numbers placed in a superior position, referencing the information given. When the user hovers on the said numbers, the font weight changes from normal to bold, and the tooltips display.
Arthur.I._.History.Beyond.Myth.-.Google.Chrome.2023-09-24.13-58-19.mp4
  • ARTHUR I PAGE Includes transparent containers shaped as circles with black double borders, and positioned as to circle the main charactersto whom the text relates, on the fixed genealogy image: Arthur I of Brittany, King Richard the Lionheart, and John Lackland. Once the user ***hovers on top of each, the transparent circle border goes from black to reddish color:
Arthur.I._.History.Beyond.Myth.-.Google.Chrome.2023-09-24.14-01-06.mp4

SIGN-UP FORM - HOVER

  • Sign-up Form

    • Button: On hover, its background color also turns from a dark-shadow grey #2e2e2e to a light grey #D6D6D6, and its font color from whitesmoke to #2e2e2e, and also from having a box-shadow to having no box-shadow, to give the optical illusion of perspective and volume, feeling that the button has phisically been pushed downwards on hover:
Sign.Up._.History.Beyond.Myth.-.Google.Chrome.2023-09-25.17-10-30.mp4

FOOTER ICONS - HOVER

Icons change color from whitesmoke #F3F1F1 to #D6D6D6:

History.Beyond.Myth.-.Google.Chrome.2023-09-11.19-12-41.mp4

FOOTER EMAIL LINK - HOVER

Info email included in the footer changes font color from #F3F1F1 to #D6D6D6 when the user hovers on top of it:

History.Beyond.Myth.-.Google.Chrome.2023-09-11.19-04-47.mp4

TRANSITIONS

NAVIGATION BAR - TRANSITIONS

  • NAV ELEMENT - Has a slight transition, so that it displays less abruptly onload:

       transition: top 0.5s;

  • LINK TO SIGN-UP PAGE - When user hovers this button-like link, the background color changes less abruptly, improving the visuals and user experience:

       transition: all 0.5s linear;
Sign.Up._.History.Beyond.Myth.-.Google.Chrome.2023-09-25.16-58-46.mp4

  • PHONES & PORTRAIT TABLETS - COLLAPSED NAVIGATION BAR (max. 767px) - When the user click the bars icon which triggers the display of the navigation bar downwards, the following transitions have been implementes to improve visuals and user experience::

    • Listed items display in a softer way downwards:

         transition: height 0.3s linear;
    Arthur.I._.History.Beyond.Myth.-.Google.Chrome.2023-09-10.07-45-39.mp4

    • To give a slight effect of fade to items in navbar when collapsing or displaying:

         transition: all 0.7s linear;
    Arthur.I._.History.Beyond.Myth.-.Google.Chrome.2023-09-10.07-49-59.mp4

    • On the toggle item (class=toggle), so that when page is loaded, the item appears less abruptly:

         transition: all 0.1s linear

FOOTER TRANSITIONS

  • ICONS - When the user hovers the mouse through them, the change of color is not abrupt, but progressive:

     transition: all 0.5s linear;

  • EMAIL WITH MAILTO: FEATURE - When the user hovers the mouse through it, the change of the font color is progressive:

     transition: all 0.5s linear;

HOME PAGE - TRANSITIONS

  • SITE DESCRIPTION - SECTION 3: REASONS TO SIGN-UP: When the user hovers the mouse through the button-like link to the sign-up page, the background color changes progressively, and the box-shadow also dissapears progressively, giving the visual illusion that the button-like element has been pushed down, giving a 3D impression:

     transition: all 0.2s linear;

SIGN-UP PAGE - TRANSITIONS

  • SIGN-UP FORM - BUTTON: When the user hovers through the button, the change of the background color, the font color, and the disappearance of the box-shadow are progressive, giving the visual illusion of dimension and volume, as if the button has been phpisically pressed down:

     transition: all 0.2s linear;
Sign.Up._.History.Beyond.Myth.-.Google.Chrome.2023-09-25.17-13-43.mp4

ANIMATIONS

NAVIGATION BAR ANIMATION

A zoom in animation has been implemented on hover to the logo:

History.Beyond.Myth.-.Google.Chrome.2023-09-13.19-57-40.mp4 
 transform: scale(1.05);

FOOTER ICONS ANIMATION

Two animations have been implemented on the media icons of the footer:

  1. Zoom in animation makes the icons bigger on hover:

    transform: scale(1.3);

  2. Rotate animation makes the icons rotate 7 degrees to the right on hover:

    rotate: 7deg;

Sign.Up._.History.Beyond.Myth.-.Google.Chrome.2023-09-25.17-29-41.mp4

DESIGN ELEMENTS

AUDIO

  • AVALON PAGE:

    • SECTION 1: FRENCH PRONUNCIATION OF ABALONE
      Audio tag with controls allows the user to listen to the French Pronunciation of the word abalone. The source of the audio file is the French Laurousse Dictionary

    image

VIDEO

  • AVALON PAGE: there are two Youtube videos embedded:

    1. SECTION 2: ENGLAND'S KINGS WERE FRENCH
      "Ja Nuns Hons Pris": Song written by King Richard "The Lionheart" in old French dialect, provides the user with an entertaining evidence of the predominance of French language whithin the Plantagenet dynasty ruling England during the 12th-13th centuries. It also aims to link to the supposition that abalone might be the etymology of Avalon, as Guernsey might as well have been commonly nicknamed as the Isle of Abalones, being famous for them, as the European reference place where they naturally grew.

    2. SECTION 5: ABALONES, THE SEA TRUFFLES
      Two Michellin starred chef preparing and cooking abalones evidences that abalones are still very much valued as a luxury product nowadays, considered the sea truffles by the French.

ICONS

  • FOOTER: Fixed at the bottom of each page, it contains 4 icons. 3 are from social media (Instagram, Twitter, Facebook), and the 4th is an envelope icon from which the user can seamlessly send an email to the administrators of the site.

    image

INTERACTIVE MAP

  • AVALON PAGE: Included in the Strategic Location section, there is an interactive Google Maps map embedded showing the exact location of the Isle of Guernsey.

    image

FORM

  • SIGN-UP FORM: The form is placed in the sing-up page, and includes the following inputs:

    • 2 Inputs type=text required - The user must include First name, and Last Name to be able to send the form.
    • Input type=email required - The user must include an email to be able to send the form.
    • Input type=radio required - The user must select 1 of 3 options, on whether he/she likes sight seeing. This field is requested, to help the site administrators decide on the frequency to organize seight seeing visits to emblematic places related to the investigation.
    • Input type=file optional - The user can include a file from his/her device, and send it together with the form. This option is meant for the user that has found a new curious coincidence and wants to share it.
    • Textarea optional - The user can include a message, if he/she wants to share some thoughts.

    image

STRUCTURE

The site contains 4 navigable pages, and a 404 error page, each of the pages including the following:

CONTENT STRUCTURE

NAVIGATION BAR - STRUCTURE

  • Contains the logo on the left, and the links to all the site's pages and the 'about' section, aligned to the right.

  • It's fully responsive, as its links to the other pages are uncollapsed in tablets and desktops, but collapsed in phones, where users still can see the logo* placed on the left, and a bars icon placed on the right, which they can click to uncollapse the content.

  • It is fixed to the top of each page (also in the 404 error page), to allow the user for an easy navigation through the site even when scrolling down.

    History.Beyond.Myth.-.Google.Chrome.2023-09-25.15-48-31.mp4

FOOTER - STRUCTURE

  • Placed at the bottom of every page, it allows for user interaction.
  • Contains the written email of the site's administration, which the user can interact with, by clicking and directly opening the email app to seamlessly send an email.
  • Contains icons that link to the site's social media profiles (Instagram, Twitter, and Facebook), which open on a different tab when clicked, for an improved user experience.
  • It also includes an envelope icon which enables the user to send an email to the site administration directly by clicking on it.

HOME PAGE - STRUCTURE

Acting as the landing page, it has the following structure:

  1. NAVIGATION BAR
  2. HEADER: Containing the title of the site.
  3. ROW OF IMAGES: Placed Underneath the header, all taken from medieval manuscripts, and related to the site's investigation and theories on the Arthur mythos.
  4. SITE SDESCRIPTION: Contains 3 sections:
    1. ABOUT US - Site dedicated to state curious coincidences between academically recognised historical facts, and the Arthurian cycle, found during years of investigations.
    2. KEEPING IT REAL - Highlights the fact that the site administrators in no case expose these findings as an ultimate truth behind the myth, but only as they are, just some curious coincidences.
    3. REASONS TO SIGN UP - Numbers 4 different reasons a user might find interesting to sign up. This section includes a button-like anchor tag on the bottom that links to the sign-up page. The 4 reasons given relate to the target audience, the user profiles and profiles, and are the following:
      1. Receive a monthly newsletter.
      2. Become part of our vibrant community, and attend cultural and social events around Europe, such as expositions, lectures, and conferences.
      3. Share users' new findings with the site administration.
      4. Attend organized visits to emblematic sights related to the curious coincidences found between history and myth.
  5. FOOTER

ARTHUR I PAGE - STRUCTURE

States the curious coincidences found between the legendary King Arthur, and the nephew of the childless King Richard "the Lionheart", who had formally named Arthur I Duke of Brittany his heir, when this latter was only 3 years old. Duke Arthur also had a tragic and fatal ending when he fought against the man who was to become King John 'Lackland', when this latter captured and supposedly murdered Arthur aged 16. Arthur had been supported by most of the continental territories' nobles who had formerly been ruled by Richard, and didn't support John's claim.
These facts are ordered in the following sections, each section containing a caption placed at the bottom related to its content. All captions are taken from medieval manuscripts related to the investigation, and referenced through tiptools that display when the user hovers through the numbers placed in a superior position whithin the text:

  1. NAVIGATION BAR
  2. HEADER
  3. SECTION 1: Heir to King Richard the Lionheart
  4. SECTION 2: Retained by the King of France
  5. SECTION 3: Death of King Richard I
  6. SECTION 4: Two Kings, One Throne
  7. FOOTER

image

##3 AVALON PAGE - STRUCTURE States the curious coincidences found between the legendary Island of Avalon, and the Island of Guernsey, which was highly valued for having the best European Abalones, and for its strategic location. Could the Island of Avalon be a derivation from Isle of Abalones, considering the French pronunciation of the word?.
This page is divided into sections, each containing a picture, a video, or an interactive map on the left, and some related text on the right. The sections are responsive, and change their layout on smaller devices as tablets or phones, where the text goes on the top, and the image, map or video related to the bottom of its section. The sections are the following:

  1. NAVIGATION BAR

  2. HEADER

  3. AUDIO FILE: French Pronunciation of Abalone: Contains an audio tag with controls of the word abalone in French. The source of this audio file is the French Larousse dictionary.

  4. SECTION 1: England's Kings were French: Contains a Youtube video with a song written by King Richard himself in old French dialect "Ja nus Hos Pris", to provide the user with an entertaining way to acknowledge that in fact, England's kings belonging to the Norman Plantagenet dinasty spoke old French (Norman French) on a regular basis, and not English.

  5. SECTION 2: The Value of Abalones: As some users may not be aware of the existence of these marine gastropod moluscs, this section provides references on the value of abalones from ancient times, both for their mother-of-pearl large-sized shell, with distinctive shades of color, as for their meat-like taste. Also brings references on how the Isle of Guernsey is home the most appreciated European abalone since ancient times.

  6. SECTION 3: Medieval Jewelry: This section provides the reader with evidence and reference of medieval jewelry from the Frankrish Kingdom made of mother-of-pearl (most probably abalone). There is also a picture of a Frankrish gold brooch found dated c.600, part of the Medieval Art collection of the The Met Museum in New York.

  7. SECTION 4: Abalones, the Sea Truffles: This section aims to provide the reader with more detailed evidence and reference of what was previously stated in the section "the Value of Abalones". As abalones are still very much valued as a luxury product nowadays, considered the sea truffles by the French, a Youtube video has been included showing two Michellin starred chef preparing and cooking abalones in his restaurant.

  8. SECTION 5: Strategic Location: This section has an interactive map from Google Maps showing the exact location of the Island of Guernsey, half-way from Brittany and south Wales.

  9. SECTION 6: Mists of Guernsey: This last section finally includes a seascape picture of Guernsey during sunset, clearly showing its mists surrounding the sharp rocks that go way in the ocean's shallow seabed all around the island. Some imagery of the mythical Island of Avalon depictures the island immersed into profound mists.

  10. FOOTER

image

SIGN-UP PAGE - STRUCTURE

This page' structure is as follows:

  1. NAVIGATION BAR
  2. HEADER
  3. Sign-up Form: Placed on the top of the page in any screen size, after the header. On desktops, it is displayed on the right side of the screen, sharind the screen width with the events section. But as this page, as all others, is responsive, on smaller devices as tablets or phones, the form stays at the top, not sharing the width with the events section.
  4. SECTION: EVENTS: Placed on the top-left side of large devices such as desktops or tablets (landscape position), and after the form in smaller devices such as tablets (portrait position) or phones. This section contains 3 subsections. On desktops and tablets, these 3 sections include a related image. On phones, only the text for design purposes:
    • Social Events: Brief description of the kind of social events that the user will be informed of, after deciding to sign-up.
    • Cultural Events: Brief description of the kind of cultural events that the user will be informed of, after deciding to sign-up.
    • Sight Seeing: Brief description of the organised visits that the user will be informed of, after deciding to sign-up.
  5. FOOTER

image

404 PAGE - STRUCTURE

Provides the user with an error page that follows the same line of design as the rest of the site, adding a note of humour to relieve some possible frustration that an error could cause in case something goes wrong. The imagery has been carefully selected. The fixed background image is a medieval thinker taken from the Codex Manesse, dated around 1250.

  1. NAVIGATION BAR
  2. HEADER
  3. FOOTER

image

WIREFRAMES

HOME PAGE - WIREFRAMES

HOME PAGE - MOBILE AND TABLET PORTRAIT

Home Page - Mobile wireframe

HOME PAGE - DESKTOP AND TABLET LANDSCAPE

Home Page - Desktop wireframe

ARTHUR I PAGE - WIREFRAMES

ARTHUR I PAGE - MOBILE AND TABLET PORTRAIT

Arthur I Page - Mobile wireframe

ARTHUR I PAGE - DESKTOP AND TABLET LANDSCAPE

Arthur I Page - Desktop wireframe

AVALON PAGE - WIREFRAMES

AVALON PAGE - MOBILE AND TABLET PORTRAIT

Avalon Page - Mobile wireframe

AVALON PAGE - DESKTOP AND TABLET LANDSCAPE

Avalon Page - Desktop wireframe

SIGN-UP PAGE - WIREFRAMES

SIGN-UP PAGE - MOBILE AND TABLET PORTRAIT

Sign-up Page - Mobile wireframe

SIGN-UP PAGE - DESKTOP AND TABLET LANDSCAPE

Sign-up Page - Desktop wireframe

FEATURES

IMPLEMENTED FEATURES

RESPONSIVENESS

This site is fully responsive on all device sizes.

NAVIGATION BAR FEATURES

  • It is featured on all pages, including the error page, allowing easy navigation through all the site, preventing the user to having to use the 'back' button on the browser to revert back to previous pages.
  • It includes links to all pages (Home Page, Arthur, Avalon, Sign-up). The Logo links to the Home Page, as some users will prefer to click on it, instead of clicking on the corresponding link.
  • It is fixed on the top, for it to be always visible even when the user scrolls down the page.
  • It is fully responsive, addapting its content to all types of devices.
  • It collapses on portrait tablets and phones** (devices with a max. of 767px), where the user can uncollapse the navigation bar by clicking on the bars icon, which triggers the display of the navigation bar vertically.

HEADER FEATURES

  • Featured in all pages of the site, including the 404 error page.
  • It is fully responsive, with a different display of the content to fit the size of every device.
  • They all include a horizontal line (hr) styled to look like a 3D sword blade with shadow to give it a dimension.
  • Headers of the content pages Arthur I and Avalon include an image related to the content, which is reponsive, and changes size on smaller devices.

FOOTER FEATURES

  • Featured in all pages of the site, including the 404 error page.
  • It is fully responsive, with a different display of the content to fit the size of every device.
  • It contains social media icons linked to the site profiles (Instagram, Twitter, Facebook)
  • Contains envelope icon which allows the user to send an email to the administration, by seamlessly opening the user's emailing app on click.

HOME PAGE - FEATURES

  • Navigation Bar (features aforementioned)
  • Header (features aforementioned)
  • Decorative fixed row of images all related to the site's content, all linked to the digitalized medieval manuscripts from which each has been taken. It is responsive, as the images' overflow has a hide attribute.
  • Background image that covers all of the sections, with a shadowy transparency on top of it, to make the image much darker and avoid too much distraction from the main content.
  • Site description section which includes three subsections (about us, keeping it real, and reasons to sign up), the last subsection includes a list of 4 reasons to sign up, and a link styled as a button that redirects the user to the sign-up page.
  • Footer (features aforementioned)

ARTHUR I PAGE - FEATURES

This page provides the user with details from academically recognised historical events related to Count Arthur I of Brittany (1187 - c.1203), who has been named heir presumptive to the throne of England by childless Richard the Lionheart himself. The page's features are the following:

  • Navigation Bar (features aforementioned)
  • Header (features aforementioned applies to this page)
  • Background image that covers all of the sections, with a shadowy transparency on top of it, to make the image much darker and avoid too much distraction from the main content.
  • The content is divided in 4 sections that cover different stages of the history related with Count Arthur I of Brittany.
  • Fixed button-like link* with an absolute position on the bottom left of the page, linking to the digitalized membrane of manuscript included as a background image.
  • Round transparent container sorrounding the main characters on the fixed manuscript of the page with double black borders, with a title informing the user of the name of the character when hovering on the round circled transparent div. On hover, the border changes from black to a reddish tone of the site's color palette. It is linked to the source digitalized manuscript (the actual page of it) on the British Library website, to allow users for an easy check, and improve user's experience.
  • Tooltips are all over each section, providing the source of each extract of the text, and linked to its original source. The color chosen for the numbers placed in superior position on the text to which the tooltips are included, is goldenrod to make the reference numbers stand out from the text.
  • Each section contains an image related to the story explained, most of the times the picture belongs to the medieval digitalized manuscript from which the information stated has been taken.
  • Images on each section include a link to its original digitalized manuscript, or source. So that when the user click on the image, the link opens in another tab to improve user experience.
  • Figure Caption (figcation) underneath images on each section.
  • Accordeon to each figure caption (figcation), which contains the summary, and unfolds providing details of the picture, and its original source.
  • Footer (features aforementioned applies to this page)

AVALON PAGE - FEATURES

This page provides the user with relevant and curious information on the Island of Guernsey, and each section is aimed at one specific aspect of why it could be the mythical Island of Avalon.

  • Navigation Bar (features aforementioned)
  • Header (features aforementioned)
  • Background image that covers all of the sections, with a shadowy transparency on top of it, to make the image much darker and avoid too much distraction from the main content.
  • The content is divided in 7 sections that cover different aspects of the Island of Guernsey, which bear a curious coincidence with the mythical Island of Avalon.
  • Each section contains one of the following media, related to its content: * image
    * audio
    * video
    * interactive Google map
  • Tooltips are all over each section, providing the source of each extract of the text, and linked to its original source. The color chosen for the numbers placed in superior position on the text to which the tooltips are included, is goldenrod to make the reference numbers stand out from the text.
  • Each section contains an image related to the text.
  • Images are linked to their source, so you can go to their source by clicking on each image.
  • Figure Caption (figcation) underneath images on each section.
  • Footer (features aforementioned)

SIGN-UP PAGE - FEATURES

  • Navigation Bar (features aforementioned)
  • Header (features aforementioned)
  • Background image with a shadowy transparency on top of it, to make the image much darker and avoid too much distraction from the main content.
  • Sign-up form, to allow the user to receive the monthly newsletter, to be informed of any new finding; be informed of cultural and social events around Europe, and organized sight seeing visits to relevant places from the ongoing investigation. It includes the option to include a file in case the user wants to share any new finding, and the users will also be able to specify (through radio buttons) whether they enjoy travelling and sight seeing, with available options of nope, yes!, and maybe.... Last but not least, the user can include an optional message.
  • Footer (features aforementioned)

404 PAGE - FEATURES

  • Navigation Bar (features aforementioned)
  • Header (features aforementioned)
  • Background image fixed.
  • Footer (features aforementioned)

FUTURE FEATURES

ADD CONTENT PAGES

The ongoing investigation includes more interesting and curious coincidences between history and the Arthurian mythos, and the following pages are going to be created to include related content:

  1. CAMELOT
  2. GUINEVERE AND LANCELOT
  3. MORGANA
  4. KNIGHTS OF THE ROUND TABLE
  5. RECOMMENDED BOOKS AND SITES

CAROUSSEL

On the sign-up page, containing images taken in past events, for the users to have an insight of the activities included in the monthly newsletter, if they decide to sign up.

ONLINE SHOP

Containing interesting books and all kind of "goodies" (t-shirts, cups, etc.) related to the topic.

ONLINE BOOKING

To enable users who have already signed up to book future activities.

TESTING

This site has been tested in different aspects, and all have been successful. Please find below all the corresponding testings, and the results obtained.

VALIDATION TESTING

The following testing has been successful with code validation.

CSS VALIDATION

  • No errors nor warnings were returned when passing the CSS Validation Test.
  • Used CSS Validator at Jigsaw.w3.org

image

HTML VALIDATION

  • No errors nor warnings were returned when passing the HTML Validation Test.
  • Used HTML Validator to validate all this website pages, as follows:

HOME PAGE - Test results here:

image

PAGE: ARTHUR I - Test results here:

image

PAGE: AVALON - Test results here:

image

PAGE: SIGN-UP - Test results here:

image

404 PAGE - Test results here

image

COMPATIBILITY AND RESPONSIVE TESTING

PRESELECTING TESTING TARGETS

  • To meaningful testing of site, Stat Counter has been used, in order to get an insight of the following:

    • BROWSER MARKET SHARE - Most commonly used browsers worldwide:

    image

    • BROWSER VERSION MARKET SHARE - Most commonly used browser versions worldwide:

    image

    • OS MARKET SHARE - Most commonly used operation systems worldwide:

    image

    • MOBILE vs DESKTOP vs TABLET MARKET SHARE - Most commonly used devices worldwide:

    image

    • SCREEN RESOLUTION STATS - Most common screen resolution (in pixels) worldwide:

    image

TESTING TARGETS TABLE

Following all the above information, compatibility and responsive testing has been done on the most common browser versions, OS, and screen resolution combinations, by using Browser Stack Chrome extension, which has been downloaded, the Chrome Dev tool's emulator, and real devices owned by me.

Please find the correspondent compatibility and responsive testing reflected in the following table:

TEST no. TOOL DEVICE BROWSER OS VIEWPORT width x height (px)
1 Chrome Dev emulator Samsung Galaxy S20 Chrome 117 Windows 10 360 x 800
2 BrowserStack Samsung Galaxy S22 Chrome Android 12.0 360 x 780
3 BrowserStack Samsung Galaxy S22 Edge Android 12.0 360 x 780
4 BrowserStack iPhone 12 Mini Safari iOS 16.0 360 x 780
5 Blisk iPhone SE 2022 Chrome iOS 375 x 667
6 REAL mobile device Samsung Galaxy A22 5G Chrome Android 13.0 384 x 857
7 BrowserStack iPhone 13 Safari 17.0 iOS 390 x 844
8 BrowserStack iPhone 14 Pro Safari 16.3 iOS 393 x 852
9 REAL Laptop Device PC Notebook HP -15-bs013ns Chrome 117 Windows 10 -64bit 1366 x 768
10 Blisk MacBook Pro Chrome 117 macOS 1440 x 900
11 BrowserStack Asus ZenBook UX305 Edge Windows 11 1920 x 1080
12 BrowserStack Asus ZenBook UX305 Firefox 117 Windows 11 1920 x 1080
13 BrowserStack MacBook Safari 16.5 OS X Ventura 1920 x 1080

TEST RECORDINGS and RESULTS

As reflected in the test recordings below, the only issue that has been found across the different browsers and OS, is the background-attachment:fixed which fixes the background image in all pages. The issue has solely been found on Safari browser in iOS, and as has been checked in caniuse.com, as well as in Mozilla Dev, and both state that Safari in iOS does not support this property due to a bug that persists even on the newest versions (as seen in TEST 7 & TEST 8). Note that Safari on macOS does not have this bug, and background images display perfectly fixed (as seen in TEST 13) :

image

  • TEST no. 1

    History.Beyond.Myth.-.Google.Chrome.2023-09-23.19-01-05.mp4

  • TEST no. 2

    Samsung.Galaxy.S22.v12.0.-.Google.Chrome.2023-09-23.19-22-07.mp4

  • TEST no. 3

    Samsung.Galaxy.S22.v12.0.-.Google.Chrome.2023-09-24.15-03-31.mp4

  • TEST no. 4

    • Fixed background images in all pages do not display fixed, and scroll down. - the property background-attachment fixed is not supported by Safary, and even though Mozilla Dev Tools states that the property is supported since v.15.4, the truth is that testing with BrowserStack iOS v.16.0, this does not reflect the latter update, as can be seen on the following video recording:
    iPhone.12.Mini.v16.0.-.Google.Chrome.2023-09-24.15-33-51.mp4

  • TEST no. 5

    History.Beyond.Myth.-.Blisk.2023-09-24.16-50-00.mp4

  • TEST no. 6

    XRecorder_24092023_173348.mp4

  • TEST no. 7

    • Fixed background images in all pages do not display fixed, and scroll down. - the property background-attachment fixed is not supported by Safary iOS:
    iPhone.13.v17.0.-.Google.Chrome.2023-09-24.15-41-37.mp4

  • TEST no. 8

    • Fixed background images in all pages do not display fixed, and scroll down. - the property background-attachment fixed is not supported by Safary iOS: image

      image

    iPhone.14.Pro.v16.3.-.Google.Chrome.2023-09-24.14-26-56.mp4

  • TEST no. 9

    History.Beyond.Myth.-.Google.Chrome.2023-09-23.19-32-56.mp4

  • TEST no. 10

    History.Beyond.Myth.-.Blisk.2023-09-24.16-59-44.mp4

  • TEST no. 11 image

    Dashboard.-.Google.Chrome.2023-09-24.02-39-14.mp4

  • TEST no. 12

    Dashboard.-.Google.Chrome.2023-09-24.03-01-14.mp4

  • TEST no. 13

    Dashboard.-.Google.Chrome.2023-09-24.20-15-06.mp4

MANUAL TESTING

For any scenarios that have not been automated, tested the user stories and features manually to provide as much detail as is relevant:

SIGN-UP FORM

  • Required Fields:

    1. First Name
    2. Last Name
    3. Email

  • Optional Fields:

    1. Do you like travelling and sight seeing?
    2. Want to share any findings? (share file from user's computer)
    3. Message

  • MANUAL TESTING THE SIGN-UP FORM HAS INCLUDED THE FOLLOWING:

    • Try to submit empty form and check that an error message appears on the required empty field (First Name, Last Name & Email):

    image image image

    • Try to submit the form with an invalid email address and verify that a relevant error message appears:

    image

    • Try to submit the form with all inputs valid and verify no console errors appear:

    image

    • Submit goes to code institute data dump page in new tab:

    image

    • Looks good on mobile:

    image

    • Looks good on tablet:

      • Horizontal Layout image image image image

      • Vertical Layout

      image

    • looks good on desktop:

    image

DEFECT TRACKING

GITHUB ISSUES

This website has been coded mostly by fixing the upcoming defects I encountered on the go. Nevertheless, I have created some Github Issues lately, as to reflect the kind of bugs that come up on a daily basis, and how I solved them:

  • AVIF format imgs do not display on Edge browser
  • DEFECT: Hover on styled as button just works on text, not on whole element. (bug)
  • DEFECT: Figcaption do not adapt size as img changes in screens smaller than 576px. (bug)
  • DEFECT: Images sizing much too big, not seamless. (bug)
  • DEFECT: Media icons on footer do not display seamlessly in screens less than 320px. (bug)
  • DEFECT: Screen smaller than 283px , h1 span exceeding screen width. (bug)
  • DEFECT: display in screens less than 274px, content overflows screen. (bug)

DEFECTS OF NOTE

  • No defects of note have been spotted throughout the site.

OUTSTANDING DEFECTS

  • No outstanding defects have been noticed throughout the site.

CORE WEB VITALS

Find below the core web vitals, tested using Lighthouse Reports

LIGHTHOUSE REPORTS

This feature from Chrome Dev tools has been used to check the CORE WEB VITALS. A Lighthouse Report had been generated by page, both on mobile devices and desktops, as follows:

  • HOME PAGE

    • MOBILE

    image

    • DESKTOP

    image

  • ARTHUR I PAGE

    • MOBILE

    image

    • DESKTOP

    image

  • AVALON PAGE

    • MOBILE

    image

    • DESKTOP

    image

  • SIGN-UP PAGE

    • MOBILE

    image

    • DESKTOP

    image

  • 404 PAGE

    • MOBILE

    image

    • DESKTOP

    image

ACCESSIBILITY TESTING

This site has been tested to be ADA compliant, and has achieved WCAG 2.1 validation using the Chrome extension of EqualWeb Accessibility Checker.

ACCESSIBILITY AUDITS

Find below the audits from EqualWeb Accessibility Checker and Lighthouse from Chrome Dev tools' reports, which have all achieved positive results:

WCAG 2.1 VALIDATION

The Chrome extension of EqualWeb Accessibility Tool has been used to check CONTRAST and GENERAL ACCESSIBILITY issues.
It is stated in the description of the tool that "The EqualWeb Web Accessibility Checker is a free automated auditing tool for WCAG 2.1 validation. The Checker analyzes the website and provides visual accessibility scores about the site’s accessibility issues and errors. The Checker can scan one page at a time. To use the Web Accessibility Checker, download and install the tool from the Google Chrome extension store. Next, enter the URL of the website you wish to scan. Now, activate the EqualWeb icon on your Chrome browser and start scanning. The checker will flag static and dynamic accessibility issues on your HTML pages filtered by the WCAG 2.1 A/AA/AAA conformance level. EqualWeb is the only company recognized by the World Wide Web".

As seen in the following screeshot taken, no general errors nor contrast errors were found for each of the following pages:

  • HOME PAGE

    image

  • ARTHUR I PAGE

    image

  • AVALON PAGE

    • First found 1 contrast issue, and 1 general issue, as follows:

      • General issue as a title attribute was missing on the interactive Google Map iframe:
        image image

      • Contrast issue on the audio>a text that would only appear in the rare case a browser wouldn't recognize the audio controls element, and the text would be visible only then, in substitution of the audio element: image

      image

    • Fixed both issues stated above, and test result came without errors, as follows:

    image

  • SIGN-UP PAGE

    image

  • 404 ERROR PAGE

    image

GENERAL ACCESSIBILITY REPORTS

For general accessibility testing, the Chrome Dev tool LIGHTHOUSE has been used, and no errors have been found, as is reflected on the following reports:

  • HOME PAGE image

  • ARTHUR I PAGE image

  • AVALON PAGE image

  • SIGN-UP PAGE image

  • 404 PAGE

image

KEYBOARD NAVIGATION

Users can navigate throughout all the site, and interact with each and every feature in every page, only by using the keyboard, as it shows in the following video done for testing purposes:

History.Beyond.Myth.-.Google.Chrome.2023-09-18.23-51-44.mp4

CHROME VOX READER

Chrome Vox Reader extension has been downloaded on the browser, to test accesibility, and the user can successfully navigate and interact with each and every feature in all pages, as one can see part of the test in the following video:

Arthur.I._.History.Beyond.Myth.-.Google.Chrome.2023-09-24.23-27-45.mp4

TECHNOLOGIES USED

LANGUAGES

  • To code this project the following languages have been used:

FRAMEWORKS, LIBRARIES AND PROGRAMS USED

  • The following have been used:
    • Visual Studio Code - To begin coding the site from scratch. I already had VScode installed previously, due to a previous personal freelance project called englishgrows.com, and I think is a great tool for coding.
    • Chrome Dev Tools - To inspect the elements, and be able to spot what element was having an unexpected behaviour, and correct it more efficiently. Also have used Lighthouse reports to check and improve core web vitals, including accessibility issues.
    • Favicon - To create the logo, and the icon on the title included in each page of this site
    • Font Awesome - For the icons used
    • Google Fonts - To select fonts and implement them in the site
    • Github - To deploy the site online, and Github desktop app to link Visual Studio Code to Github.com
    • Coolors - To insert colors selected previously directly through visual studio code, but used this tool to display the palette beautifully, and insert it in this readme file.
    • Amiresponsive - To display the site in all types of devices simultaneously.
    • Paint - For resizing imgs and improve the site performance on load
    • Convertio - To convert image files from PNG or JPG to lighter AVIF, and improve the site performance on load
    • Balsamiq - To created wireframes reflecting each page's structure, on all devices.
    • EqualWeb Accessibility Checker - Google Chrome extension to check general errors and contract errors for optimal accessibility.
    • Chrome Vox Reader - This Chrome extension has been downloaded and used for accessibility testing, and to be sure all users are able to use the site, regardless of their current situations.
    • Browser Stack - Used for compatibility ans responsiveness testing purposes.
    • Stat Counter - Used for a meaningful selection of targets for compatibility and responsive testing purposes. Checked which browsers, browser versions, devices, viewports, and OS are most widely used worldwide.
    • Yesviz - To check real device viewport when testing compatitivity & responsiveness.
    • ScreenSiz - To find devices to test depending on their viewport.
    • Blisk - Used for compatibility ans responsiveness testing purposes.
    • XRecorder - Downloaded the mobile app on my personal mobile device, to record navigation throughout the site, for compatibility and responsive testing purposes.

DEPLOYMENT

DEPLOY TO GITHUB PAGES

  • I started coding from Visual Studio Code, as I had been using it to code my freelancer website as a teacher of English as a second language. My freelance website is englishgrows.com , and I'm the owner of the Google Domain englishgrows.com, which is linked to this Github account EdnaTMunill, with nickname Ethra8 .

PRODUCTION

  1. Click Settings tab:

    image

  2. In the left-hand menu, click on the Pages link:

    image

  3. In the Build and Deployment section, select Branch. Click on the dropdown menu and select main:

    image

  4. Click Save:

    image

  5. Wait about 3 minutes, and refresh the page. Then the link to the deployed site will show up like this:

    image

Update after Deployment

  • Changed original site name History_Beyond_Myth to lower cases, as history_beyond_myth:

    • Go to Settings:

      image

    • In the General section, update the name and click on Rename:

      image

    • Add description and topics when saving, which now show on the About on the right hand, with the updated name of the site in lower cases:

      image

FORKING THE REPOSITORY

In case you wish to use the code, you can easily fork it. This will make a copy of this current repository at the precise time of the fork, and store it in your own Github account, in case you want to have it handy to review it or to make any changes you wish. This, without affecting the original repository. To do so:

  1. Copy the link to this repository (browser url)
  2. Sign in to your Github account
  3. Above the repository options, click on the Fork button, on the top-right, just below Github navigation bar image
  4. A copy of the repository will be directly included in your own account.

CLONING THE REPOSITORY

You can download the code to your computer, making a copy of the code at the exact time of the clone, and make a pull request in case you want to upgrade it in the future, and contribute to the project. To do so:

  1. Copy the link to this repository (browser url)
  2. Sign in to your Github account
  3. Click on the green button "Code", and the below options will appear: image
  • Local
    1. HTTPS: Copy link to use Git or checkout with SVN using the web URL.
    2. GitHUb CLI: Copy the command to insert in your CLI
    3. Open with GitHub Desktop app
    4. Download as a ZIP
  • Codespaces
    1. You will be requested to be signed in to Codespaces, and once you are, the repository will be cloned on your Codespaces account.

CREDITS

CONTENT

ARTHUR I - CREDITS

AVALON - CREDITS

MEDIA

HOME PAGE - MEDIA

  • Images below the header

    1. Depiction from author Matthew Paris of the coat of arms of the House of Plantagenet, also called of Anjou, which was England's ruling dynasty at the time, and to which Richard I and Arthur I of Brittany belonged. Source is Manuscript Royal MS 14 C VII, dated 1250-1259, British Library.

    2. Early medieval map of Britain dated 1250, from author Matthew Paris, from his work Historiae Anglorum. Original source is manuscript Cotton MS Claudius D VI, kept in the National British Library, but as it is stated in the original Cotton MS Claudius D VI manuscript description, the map was removed in year 1929, and now kept separately.

    3. Portrait of Count Arthur I of Brittany first found in Wikimedia Commons, heir to Richard I "the Lionheart" by birth right. Its original source is the 6th membrane of the roll chronicle of Britain Genealogy dated 1300-1340, kept in the National British Library, as manuscript Royal MS 14 B VI

    4. Depiction of Arthur I in his castle, wearing a crown after Richard I's death, receiving Philip II of France who is visiting him. Arthur is giving homage to Philip in return for his support to his claim to the throne of England. This depiction's original source and description is page f.361v of the illuminated manuscript dated 1332-1350, kept in the National British Library, called "Les Grandes Chroniques de France" Royal MS 16 G VI.

    5. Depiction of Queen Eleanor of Aquitaine, Queen of England, married to Henry II, mother of Richard the Lionheart and John Lackland, and Arthur's grandmother. She is considered one of the most powerful and influential women of the middle ages, and important patron of arts and music. This depiction found in the Codex Manesse is considered by many historians to be her. The French Post Office even dedicated a stamp to Eleanor of Aquitaine using this same depiction. Source from the Codex Manesse, dated c.1300, DNB: Deutsche Nationalbibliothek, digitalised version via Heidelberg University Library

    6. Portrait of King Richard "the Lionheart": Its original source is the 6th membrane of the roll chronicle of the Genealogy of the Kings of England dated 1300-1340, kept in the British Library, as manuscript Royal MS 14 B VI

    7. Depiction of King Richard "the Lionheart", found in Wikimedia Commons. Its original source being page f.9v from manuscript "Brief Abridgement of the Chronicles of England" attributed to Matthew Paris, dated 1255-1259 kept in the British Library as manuscript Cotton MS Claudius D VI.

    8. Portrait of Count Geoffrey II of Brittany. Its original source is the 6th membrane of the roll chronicle of the Genealogy of the Kings of England dated 1300-1340, kept in the British Library, as manuscript Royal MS 14 B VI

  • BACKGROUND IMAGE is page 361v of the illuminated manuscript dated c.1300: "Les Grandes Chroniques de France", Royal MS 16 G VI digitalized at the British Library.

ARTHUR I PAGE - MEDIA

  • HEADER - Image from the 6th membrane of the roll chronicle of the Genealogy of the Kings of England dated 1300-1340, kept in the British Library, as manuscript Royal MS 14 B VI

  • BACKGROUND - Image is the full 6th membrane of the roll chronicle of the Genealogy of the Kings of England dated 1300-1340, kept in the British Library, as manuscript Royal MS 14 B VI

  • SECTION 1 - Images displayed on all screen sizes are taken from the 6th membrane of the roll chronicle of the Genealogy of the Kings of England dated 1300-1340, kept in the British Library, as manuscript Royal MS 14 B VI

  • SECTION 2 - Image of the Palais de la Cité, from the illuminated manuscript "Les Très Riches Heures du Duc de Berry", c.1400, ms.65, f.6v, Condé Museum, Chateau de Chantilly, France. Image taken from Wikimedia Commons, and at Web Gallery of Art

  • SECTION 3 - Image from page 361v of the illuminated manuscript dated c.1300: "Les Grandes Chroniques de France", Royal MS 16 G VI digitalized at the British Library.

  • SECTION 4 - Image from lines 10-11 of page 361v of the illuminated manuscript dated c.1300: "Les Grandes Chroniques de France", Royal MS 16 G VI digitalized at the British Library.

AVALON PAGE - MEDIA

SIGN-UP PAGE - MEDIA

404 ERROR PAGE - MEDIA

  • BACKGROUND IMAGE - The medieval thinker is Walther von der Vogelweide, from the Codex Manesse written c.1300, DNB: Deutsche Nationalbibliothek, digitalised version via Heidelberg University Library.

ACKNOWLEDGEMENTS

About

HISTORY BEYOND MYTH

http://englishgrows.com/history_beyond_myth/

arthurian-mythoshistorymedieval-studiesmyth

Languages

Language:SCSS 63.6%Language:HTML 24.0%Language:CSS 12.4%