Giter Club home page Giter Club logo

circassian-language's Introduction

CIRCASSIAN LANGUAGE

This site is dedicated to the Circassian language and is created for two main purposes:

  1. to raise awareness about the challenges this language is currently facing, and
  2. to introduce an interactive alphabet as an alternative to the static pages available online.
This site was built using HTML, CSS and JavaScript: DEPLOYED SITE

Circassian Language - different devices view

Table of Contents

  1. User Stories
  2. Design
  3. Features
  4. Testing
  5. Technologies
  6. Credits
  7. Future Features
  8. Further Improvements

User Stories

I. User that is familiar with the Circassian language

These are native speakers that for different reasons stopped speaking the language and are looking for an online material to get re-engaged with it.

  • As a user, I want to quickly get an overview of the material the site is offering.
  • As a user, I want to understand how this site can help me to re-engage with the language and how exactly it can be used for this purpose.

II. User that is unaware of the existence of the Circassian language

The user did most likely land on the site by accident as this was not a result of an intentional search.

  • As a user, I want easily understand the main purpose of the website.

Design

Colours

  • Green is used on the site as it is the colour of the Circassian flag: #2d706c

  • Text: #704214

  • Background colour for container boxes: #f7d4bb

  • Background colour for pages: #FFF1E5

Features

Hub page

The purpose of the Hub page is to give an overview of the site's contents.

About page

The About page is created in a newspaper style featuring the main challenges the Circassian language is currently facing.

Alphabet page

This page introduces one of the standards used for the Circassian language - the Kabardian and lists the letters and word examples in both, Cyrillic and Latin, accompanied by their sounds.

Letters in Cyrillic starting with the same letter in Latin transcription can be highlighted via keyboard. Letters marked up as belonging to one group will change their size and text colour when a corresponding keyboard key is pressed.

Read and Record a Poem page

On this page the user can listen to a poem read by two native speakers. They can also read the poem and record their voice.

Contact page

The Contact page provides an option to connect with people concerned about the challenged the Circassian language is facing and share feedback and ideas on how to preserve it.

Testing

Please refer to TESTING.md file for:

  • Validation of all languages
  • PageSpeed Insights scores
  • Manual Testing, Accessibility and Bugs

Technologies

  • HTML was used to provide structure for this project and highlight the semantic elements of tits content.
  • CSS was used to style the HTML elements.
  • JavaScript was used to add sounds to the site.
  • GitHub is the hosting site used to store the code for the website.
  • Git was used as a version control software to commit and push the code to the GitHub repository.
  • Google Fonts was used to import fonts.
  • GIMP was used to create favicon for the site.
  • WEBP Converter used to convert images to webp format.
  • Google Chrome Lighthouse was used during the testing of the website.
  • Google Chrome Developer Tools was used during testing, debugging and making the website responsive.
  • W3C HTML Validator was used to check for errors in the HTML code.
  • W3C CSS Validator was used to check for errors in the CSS code.
  • FabForm used for backend on the contact form.
  • Balsamiq used to create wire frames.
  • Am I Responsive used to generate site's appearances on different devices and to check its responsiveness on them.

Credits

Media

Content

The content on the About page is based on the sources below:

Voice Cover

Code

Future Features

Two features are planned for the site:

  1. an option to navigate through the letters groups starting with the same latin letter on the Alphabet page with the keyboard
  2. an interactive page with a poem in Kabardian that will allow to take user's voice input and compare it with the recording done by a native speaker; the result of this interaction will be a calculated score that will represent the pronunciation accuracy.

Further Improvements

  • style nav bar so that it is clear where you are - on which page
  • add favicons for sises below:
    <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
    
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
    
  • add 404 page
  • add animation to the hub: the logo text and the text in the circle will be switching to indicate that this is the same text
  • create and add the remaining images to the alphabet letters
  • replace special characters with their corresponding unicodes
WIP

https://stackoverflow.com/questions/62846354/calculate-the-percentage-of-accuracy-with-which-user-made-the-assigned-sound

https://cohenpr-xpf.github.io/XPF/conv_resources/info/kbd.html

https://cohenpr-xpf.github.io/XPF/Convert-to-IPA.html

IPA

A tool for transcribing orthographic text as IPA (International Phonetic Alphabet) incl Kabardian epitran

https://github.com/persephone-tools/persephone

https://stackoverflow.com/questions/68489707/ is-there-a-python-library-i-could-use-to-convert-audio-to-phonemes

https://stackoverflow.com/questions/30705028/convert-sound-to-list-of-phonemes-in-python

https://github.com/xinjli/allosaurus

https://github.com/crim-ca/speech_to_phonemes?tab=readme-ov-file

https://github.com/ASR-project/Multilingual-PR

https://github.com/AdolfVonKleist/Phonetisaurus

https://espeak.sourceforge.net/

https://github.com/topics/low-resource-languages?l=python

https://github.com/RichardLitt/low-resource-languages?tab=readme-ov-file#automatic-speech-recognition-asr

https://elpis.readthedocs.io/en/latest/

https://www.reddit.com/r/linguistics/comments/7xnq4o/text_to_speech_for_dying_language/

https://deepmind.google/discover/blog/wavenet-a-generative-model-for-raw-audio/

https://www.lti.cs.cmu.edu/research/dissertations/2023/xinjianl_phd_lti_2023.pdf

A SHORT GRAMMAR OF EAST CIRCASSIAN (KABARDIAN)

https://circassianworld.com/pdf/A_Grammar_of_East_Circassian_Kabardian.pdf

Audio Recorder with JS

https://github.com/Adityapanther/Audio-Recorder-App-in-Vanilla-javascript

https://javascript.plainenglish.io/an-ultimate-guide-to-voice-recording-with-javascript-119e505780cd

https://github.com/vocaroo/simple-audio-recorder

https://www.youtube.com/watch?v=sbf6vQ8xym4

https://miguelvieira.io/projects/KVFUHZVl0AZQhlKy27nn/videos/zZn0l7JTLbW3Vysl6QCm

https://www.youtube.com/watch?v=B3wWIsNHPk4

https://github.com/markjivko/markjivko.github.io/blob/master/tutorials/B3wWIsNHPk4/index.html

https://www.youtube.com/watch?v=3OnMBtOyGkY

https://www.youtube.com/watch?v=sbf6vQ8xym4

https://www.youtube.com/watch?v=VwaR2VkvpzM

Flexbox template

https://stackoverflow.com/questions/33947885/left-column-and-stacked-right-column-using-flexbox-css https://codepen.io/dloewen/pen/qOzogG

Audio button

https://stackoverflow.com/questions/27368778/how-to-toggle-audio-play-pause-with-one-button-or-link

Poem Translation

https://lingvoforum.net/index.php/topic,8655.100.html?PHPSESSID=7075c0dbcd46a3312d74c86e6de9a7cd

circassian-language's People

Contributors

kkumyk avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.