Manual for Creating
Your Own Website*

*Currently under construction.

Table of Contents

Introduction

Some people do not have the time or resources to build language learning websites. This is a template you can use to build your own website for the language you are working on. The template is open-source, which means anyone can use it, and it does not cost anything.

The language tools website consists of ten components. You don’t have to use all the components - you can choose which ones work best for your own project.

This page describes the contents of the website, and explains the steps you go through to create a website for your own language. Here are the recommended steps to follow:

  1. Read through this page to get an idea of the contents of the website you will be building.
  2. Click the “View the Template” tab at the top of the page to move through an empty version of the website. (You cannot make changes to this empty version of the website.)
  3. Follow the steps in the section below, entitled “Changing the Code to Create Your Website.”

The language tools website consists of ten components. You don’t have to use all the components - you can choose which ones work best for your own project. Within each component there is some flexibility in terms of representing the information. This list describes how you might use each of these components.

  1. Main Menu
    • o This is an image of the (blank) home page of the website. You can insert a photo of their own choosing on the homepage. As you can see in illustration to the right, the home page contains links to the other sections.
    Main Menu Page
  2. About the Materials
    • A description about the language, the speakers, and the members involved in the creation of these resources.
    About Page

  3. Sounds and Letters
    • A grid representing the sound system of the language including audio files for each sound.
    Sounds Page

  4. Everyday Expressions
    • This page provides space to introduce users to common phrases and sentences.
    Expressions Page

  5. Talking Dictionary
    • This is a dictionary where you can play each of the words with an accompanying sound file. (The template also includes directions for how to add entries and update sound files.)
    Dictionary Page

  6. Phrasicon
    • This is a bank of phrases and sentences including sound files. You can hear each entry by clicking the play button. (The template also includes directions for how to add entries and update sound files.)
    Phrasicon Page

  7. Stories and Text
    • This section includes stories and texts of the language with audio files.
    Texts Page

  8. Links to Mobile Apps
    • This section would contain a brief description for any mobile apps you have made, and links that direct users to the download page.
    Apps Page

  9. Contact Page
    • A page with contact information for users to get in touch with the creators of the resources.
    Contact Page

You might decide to include the talking dictionary alone, or include the phrasicon with common everyday expressions. You can select any to all of the components to fit your needs.

Changing the Code to Create your Website

This documentation is written in attempts to guide potential users through the process. The template was created with non-programmers in mind. That being said, applying changes will require some level of tech-savviness. In order to effectively set up the template, your team should include someone who has some experience with computer programming.

Before you make changes to the template, you will need to set up a place to 'host' your website. This means that you will need to get a domain name like www.domainName.com where people can access these resources. Some examples include 000webhost (free), BlueHost, or GoDaddy. Once everything is set up, simply download the template located in the header bar, extract the files, and put them in your web host, usually in the public_html folder.

At this point, I recommend using a specialized text editor such as Sublime, Brackets, or Notepad++ which you will use to edit the code. They make the code easier to read by adding color schemes. You can also connect to your web host to add, edit, or remove files with FileZilla or WinSCP. They allow you to visualize the folders like a regular directory.

The template uses the following computer languages: HTML, CSS, JavaScript, XML, and PHP.

HTML (HyperText Markup Language) sets the structure of the web page and displays the content. HTML files end in .html. It is known as a markup language because the code is made up of tags enclosed in angle brackets. For example, <body>[...]</body> is a set of 'body' tags. Comments can be added to HTML, and are not processed by the computer - they are only meant to be read by humans. Comments in HTML look like this: <!-- This is a comment. -->. They will used to indicate where changes should be made, and describe the function of a particular block of code. Note that making changes elsewhere may have drastic changes when viewing the web page.

CSS (Cascading Style Sheets) describes the layout, color and font of the web page. For example, italicized, bolded, or colored font are handled by CSS. CSS comments look like this: /* This is a comment. */. CSS files end in .css. Many of the CSS files were adapted from the Foundation 5 framework. You can read more about it here.

JavaScript is a programming language that deals with the interaction between the user and the computer. JavaScript modules end in .js.The Javascript code found in this template should be not be altered.

XML is a format where data is stored and end in .xml. This will be discussed later on.

Finally, PHP is in charge of retrieving data from the XML formats so that they may be displayed on the web page. They end in .php. Comments in PHP can look like this: // This is a comment or /* This is a comment. */.

The folders are organized in the following way.

  • texts: Stores Stories and Texts component.
  • structure: Stores Basic Sentence Structure component.
  • sounds: Stores Sounds and Letters component.
  • phrasicon: Stores Phrasicon componeent.
  • owl-carousel: Stores slideshow components for Stories and Texts page. Do not change.
  • js: Stores JavaScript files. Do not change.
  • expressions: Stores Everyday Expressions component.
  • dictionary: Stores Talking Dictionary component.
  • css: Stores CSS files.
  • contact: Stores Contact Page component.
  • assets: Stores slideshow components for Stories and Texts page.
  • apps: Stores Links to Mobile Apps component.
  • about: Stores About the Materials component.
  • placeholder.png: Main image for the website. This is discussed later.
  • index.html: This holds the content for your web page.
  • default.html: Same as index.html.
folders

You'll notice that index.html and default.html are the same, except for their names. These files display the content of your web page in the folder it is in. For example, if your index.html or default.html files are in your folder labeled as 'language', they represent the content when a user visits www.example.com/language. You're probably wondering why there are two separate files since they hold the same piece of code. Depending on what web host you use, some may read from index.html, and others may read from default.html. Therefore, if you know your host uses one, and not the other, you can simply delete the other version. You can see which one your host uses by simply changing one of the files, and then save. If the web page reflects the changes that were made, then that is the file your host uses. Note that these files only appear in the major components (i.e. Dictionary, Phrasicon, etc.), and not in the folders like owl-carousel or js.

Images, Head Element, Colors

The first thing you may want to do is to insert your own picture or illustration. There are three pictures you should change first. You'll notice that the picture on the main page is the same as the picture on the other pages (i.e. Sounds and Letters; Basic Sentence Structure). In fact, they refer to the same image, and changing the original one will affect the rest. The picture is named placeholder.png. The recommended dimensions are 500x500 pixels. Any images that do not fit these dimensions will be rescaled and may look distorted. Simply replace the image with another with your own, and this will cause the pictures on the other pages to change as well. The name should still be placeholder.png and in PNG format. You can easily change the format in editors like Paint.

Next you may want to change the picture located in the dictionary web pages. This is situated in the /dictionary folder, and named background_dictionary.jpg. The recommended dimensions are 1280x350 pixels, but generally, you may want your images to be wider. Again, replace the image using the same name and format.

Finally, changing the picture in the /phrasicon folder will alter the images in the phrasicon web pages, in the same way as the dictionary image. The image is named background_phrasicon.jpg and in JPG format. The recommeded dimensions are, again, 1280x350 pixels. Replace the image using the same name and format.

For this part, I recommend having a look at index.html or default.html located directly in the main folder. Remember to always save your file onto the web host. This will alter the web page so be sure to refresh in order to look at your changes.

The head element holds information that describes what's on the page. There are head elements each web page therefore you may want to refer back to this section. They can be found inside the head tags, <head>[...]</head> For example, the title that appears on the top of your browser for the documentation should read 'Template for Multi-Layered Language Learaning Resources', and this is called the page title. The head elements that you should change are: page title, description, author, copyright.

The header on the tab of your browser represents the title of the page. Therefore, changing the title will change the header of the tab. They are in contained within title tags, <title>Template for Multi-Layered Language Learaning Resources</title>. Replace the content inside the tags to modify the page title.

The description briefly talks about the purpose of the website. This is what appears on search engines such as Google when you are looking for the website. For example, when you type in 'Microsoft' into Google, you will find the description 'At Microsoft our mission and values are to help people and businesses throughout the world realize their full potential.' The description looks like this: <meta name="description" content="Multi-layered Language Learning Resources" />. Focus on the part that says: content="Multi-layered Language Learning Resources". Replacing the content within the quotation marks will alter the description.

The author indicates the creator of the web pages. That's you! They look like this: <meta name="author" content="User" />. Focus on content="User" and change the content between the quotation marks with the name of the author for the website.

The copyright distinguishes who the content on the website belongs to. This could be you or the community. They look like this: <meta name="copyright" content="User" />, and, again, simply swap out User with the name of the person or organization with rights to these materials.

Color...

About the Materials

To change the about page, go into the /about folder. Again, there are the two files, index.html and default.html. Open the one that pertains to you, and delete the other.

The about page consists of three sections. The first section describes the language. For example, where is this language spoken? Are there living speakers, if so how many? How were the resources collected? The next section informs others how they should use the website. For example, if they are interested in common expressions, they might only want to look at the everyday expressions page. The last section mentions the names of those who worked on the website, and in the preparation of the resources.

In the code, you will find comments throughout. If you want to keep the default format, and just want to change the content, look for comments that indicate which blocks of code represent the paragraphs. For example, the section 'About the Language' has two paragraphs, and the first paragraph is marked with this comment: <!-- Paragraph #1 -->.

The content is located within paragraph tags that look like this: <p>This is content inside a paragraph tag.</p>. Simply replace This is content inside a paragraph tag, save, and this should modify the text displayed on the page.

Perhaps you only want to use a single paragraph. In that case, you can delete the second paragraph which is enclosed in paragraph tags (or <p></p>). Delete the content including the tags, <p>[...]</p>.

Others may want to use only a single section. Look for comments that indicate the start of the section you want to delete (eg. <!-- The How to Use section starts here...-->), and the end of the section, <!-- ...and ends here. -->. Then, delete the lines of code between the two comments. Remember that you can comment out these lines of code rather than deleting in the event that you may want to use these sections at another time.

If you want to change the name of the sections, look for the default section names in the code, and replace them with the desired name. There should be two places where each section name appears - within the menu bar, and within their respective sections.

Sounds and Letters

To change the sounds and letters page, go into the /sounds folder from /public_html. Again, there are the two files, index.html and default.html. Open the one that pertains to you, and delete the other.

The about page consists of four sections. The first section is the introduction to the sounds section. For example, you may want to briefly discuss what users should expect in the sounds section. The next section contains the sound matrix, and a more in-depth explanation of the sounds in your language, and how it is written down or how one might type into their electronic devices. The third section introduces the vowels and consonants section. The last section is where you might want to place videos training the learner about the vowels and constants of the language.

In the code, you will find comments throughout. If you want to keep the default format, and just want to change the content, look for comments that indicate which blocks of code represent the paragraphs. For example, the section 'Sounds Section' contains one paragraph, is marked with this comment: <!-- Paragraph #1 -->. This is followed by the 'Sound Matrix Section' which also has one paragraph, indicated by the comment: <!-- Paragraph #2 -->.

The content is located within paragraph tags that look like this: <p>This is content inside a paragraph tag.</p>. Simply replace This is content inside a paragraph tag, save, and this should modify the text displayed on the page.

Next, you may want to insert your own images. Look for comments that read <!-- Image goes here. -->. There are two locations in the file - in the Sounds Section, and the Vowels and Consonants section. Replace ../placeholder.png as you did in the previous section 'Images, Head Element, Colors' - look back at the instructions again if this is unfamiliar. The recommended image size if 400x400 pixels.

Now, you may want to edit the sound matrix. The sound matrix is set up as a table like the ones you can find in Word or Excel. The default matrix has the dimensions 6x5, or 6 rows and 5 columns. Each row is indicated by the comments: <!-- Table Row #x -->, where x is any number from 1 to 6. In each row, you will see code that looks like this <td class="click_sound" onclick="ipa('a')">a</td>. Each one of these represents a column within that row. For example, table row #1 contains five of these, and therefore has five columns. You may notice already that each one contains a unique English letter. Let's imagine the language you are working on does not contain the letter b or perhaps you want to represent it instead with B - a capital 'b'. Looking at the existing code: <td class="click_sound" onclick="ipa('b')">b</td>, change the letter 'b' that is beetween the angle brackets. It should look like this: <td class="click_sound" onclick="ipa('b')">B</td>.

You may probably want to also change the other 'b' contained within ipa('b'), but wait! Let's imagine again that you have a soundfile containing the sound represented by 'B', and you name the soundfile bilabial_trill.wav. You will then want to replace 'b' to the name of the soundfile so that it looks like this: ipa('bilabial_trill'), and the larger piece of code looks like this: <td class="click_sound" onclick="ipa('bilabial_trill')">B</td>. Now you can change cells in the matrix. If your intended table does not match the default dimensions, adjust the table by copying and pasting relevant rows/columns.

You may now be wondering where to store soundfiles, and in what format they should be. In the /sounds folder contain the index or default file you are editing, there is another folder called /sound. (If the /sound folder is missing, create a new folder and name it 'sound'.) Your soundfiles should be placed in here, and they should be in wav format. If they are in mp3 format, you can easily convert them using an audio editor software like Audacity or Praat.

Finally, you may want to alter the videos section. In your /sounds folder, you may notice there is also a /video folder. If it isn't there, create it. This is where you should put any videos that you want displayed on the sounds and letters page. In attempts to accomodate the many different browsers, you may want to create different formats of the videos - we made videos in mp4, webm, and ogv formats. If you are concerned about a snapshot appearing before the video is displayed, you might also want to place a poster of the video in the folder /img. Again, if the /img is not there, simply create it.

In the code, find the video section indicated by the comment <!-- Videos Section startss here... -->. The video buttons appear in subsections. Within the tags <div class="row">[...]</div>, there are two buttons, each bringing up a video. Each video is futher enclosed within the tags <div class="large-6 small-12 columns">[...]</div>. Look for the comments that read <!-- Sound #x Video -->. Right above, there should be: <p>Sound #x</p>. Replace Sound #x to change the wording of the header for the button. Now, below the code mentioned previously, <!-- Sound #x Video -->, will be the following code: <a class="button secondary" href="#" data-reveal-id="tempx">Watch</a>. Replace the default id tempx to a unique id. For example, if your video is about bilabial trills, you may want to call your id bilabial_trill.

Next, look for the other comment that reads <!-- Sound #x Video starts here... -->. Directly below there should be the following: <div id="tempx" class="reveal-modal small" data-reveal>. Replace tempx in id="tempx" with the same unique id as before. For example, if you named you id before as bilabial_trill, then you will enter the same content here. Below the line of code you just made changes to, there is <h2>Sound #x</&ggt;. Change Sound #x to the same wording of the header for the button. We're almost done! Look for the comment <!-- Video -->. In the following four lines, replace placeholderx with the name of the video you want displayed. Make sure that your video matches the correct button. One way to tell is by looking at the wording of the header for the button.

Note that if you wanted to create more buttons, copy and paste the following: <div class="row"></div> directly after the comment that reads <!-- Sound #1 and #2 Videos start here... -->. If you want to create exactly two buttons, simply copy and paste the existing code that inclues the Sound #1 Video and Sound #2 Video indicated by the comments that read <!-- Sound #x Video starts here --> and <!-- ...Sound #x Video ends here -->. If you only want to create one button, include only the lines between one of the sound videos. Each <div class="row"></div> should contain at most two buttons, as written in the existing code.

Everyday Expressions

To change the everyday expressions page, go into the /expressions folder. Again, there are the two files, index.html and default.html. Open the one that pertains to you, and delete the other.

In the code, you will find comments throughout. If you want to keep the default format, and just want to change the content, look for the comment: <!-- Paragraph #1 -->. Below, there should be the following tags <p align="center" style="font-size:1.2em">[...]</p>. Replace the content enclosed within the tags. Next, you may want to change the image. Look for the comment: <!-- Image goes here. -->. In the line that reads background: url("background_expressions.jpg");, change background_expressons.jpg to the image you want displayed on the page. You may need to resize your image a few time to get the exact dimensions.

If you successfully edited the sounds and letters page, changing the videos in the expressions page should be no problem. In your /expressions folder, you may notice there is also a /video folder. If it isn't there, create it. This is where you should put any videos that you want displayed on the sounds and letters page. In attempts to accomodate the many different browsers, you may want to create different formats of the videos - we made videos in mp4, webm, and ogv formats. If you are concerned about a snapshot appearing before the video is displayed, you might also want to place a poster of the video in the folder /img. Again, if the /img is not there, simply create it.

In the code, find the video section indicated by the comment <!-- Expessions #1 and #2 Videos start here... -->. The video buttons appear in subsections. Within the tags <div class="row">[...]</div>, there are two buttons, each bringing up a video. Each video is futher enclosed within the tags <div class="large-6 small-12 columns">[...]</div>. Look for the comments that read <!-- Expression #x Video -->. Right above, there should be: <p>Sound #x</p>. Replace Expression #x to change the wording of the header for the button. Now, below the code mentioned previously, <!-- Expression #x Video -->, will be the following code: <a class="button secondary" href="#" data-reveal-id="expressionx">Watch</a>. Replace the default id expressionx to a unique id. For example, if your video is about the expression "Hello", you may want to call your id hello.

Next, look for the other comment that reads <!-- Expression #x Video starts here... -->. Directly below there should be the following: <div id="expressionx" class="reveal-modal small" data-reveal>. Replace expressionx in id="expressionx" with the same unique id as before. For example, if you named you id before as hello, then you will enter the same content here. Below the line of code you just made changes to, there is <h2>Expression #x</&ggt;. Change Expression #x to the same wording of the header for the button. We're almost done! Look for the comment <!-- Video -->. In the following four lines, replace placeholderx with the name of the video you want displayed. Make sure that your video matches the correct button. One way to tell is by looking at the wording of the header for the button.

Note that if you wanted to create more buttons, copy and paste the following: <div class="row"></div> directly after the comment that reads <!-- Expression #1 and #2 Videos start here... -->. If you want to create exactly two buttons, simply copy and paste the existing code that inclues the Expression #1 Video and Expression #2 Video indicated by the comments that read <!-- Expression #x Video starts here --> and <!-- ...Expression #x Video ends here -->. If you only want to create one button, include only the lines between one of the sound videos. Each <div class="row"></div> should contain at most two buttons, as written in the existing code.

Talking Dictionary

Enter into the /dictionary folder which contains the following files and folders.

  • update: Stores the data entry components.
  • sounds: Stores sound files.
  • js: Stores JavaScript files. Do not change.
  • css: Stores CSS files.
  • word.php: Contains contents for the word entry.
  • porterstemmer.php: Stemmer algorithm. Do not change.
  • index.php: Contains contents for the main dictionary web page.
  • dictionary.xml: Stores all the dictionary entries.
  • category.php: Contains contents for the letter category web page.
  • background_dictionary.jpg: Main image for the dictionary web pages.
dictionary folders

First, go in the index.php file. To change the header of the dictionary, look for the comment <!-- Title of the page. --> and replace Online Talking Dictionary Template. Next, find the comment <!-- Search by letter (title). --> and alter the content for the languages you are working with. Source (language) refers to the language that the resources were created for. If you are also using a language different from English as the language you are translating into, known in this document as the reference (or target) language, then you may also want to change replace English. The steps so far apply to the files category.php and word.php as well.

In the event that English is not being used as the reference language, search for the comment <!-- Search by letter (A-Z). --> and below, you will see lines of code that look like this: <li><a href="../dictionary/category.php?letter=e">e</a></li>. If you language has an alphabet that is similar to English, you can replace the letters in the following way. First, focus on the code that reads [...]letter=e" and [...]>e</a> in the example given. Then replace the e in both occurences with the desired letter. For example, if the reference language is French, then you may want to add é. The line of code will then look like this: <li><a href="../dictionary/category.php?letter=é">é</a></li>.

Search for the comment <!-- Language options. -->. In the code that says <option value="source">Source</option>, alter the word Source (the one with the capitalized 'S'). Make sure not to change the source in value="source". If English is not the reference language, change English in <option value="english">English</option>. Again, do not change english in value="english" even if the primary language of your website is in a different language. The steps so far apply to the files category.php and word.php as well.

Finally, find the comment <!-- The About section starts here... --> which is a section that talks about the dictionary. First, you may want to change the header of the section. In the code <h4 class="subheader">About the Dictionary</h4>, replace the content that reads About the Dictionary. Next, you might want to include how many entries are currently in the dictionary, or how the user should view each entry. You can input the number of existing entries by typing in <?php echo $count ?> - or example, your piece of code may look like this: <p>There are <?php echo $count ?> entries in the dictionary .</p>. Before editing the paragraphs, refer to the About the Materials section if you have not already as it describes the process more in depth.

When you search for a word and no results are found, you will be given an option to try an extended search. Using the extended search will execute the porterstemmer.php file. For example, let's say that the dictionary contains the word 'flower' but not the word 'flowers'. Therefore, searching for 'flowers' will return no results. Using the extended search will stem 'flowers' by removing the -s and searches for 'flower'. More information can be found here.

Now, look into the dictionary.xml file. The XML file follows the E-MELD Best Practices in Digital Language Documentation. Locate the opening and closing tags for <metadata>[...]</metadata>. The metadata is a description about the resources which follows the OLAC (Open Language Archives Community) standards and recommendations found here - they are used for archiving purposes. For example, it indicates who created the sources, what languages are involved, and the title of the database. The first twenty lines should look like this.

dictionary metadata

<title>Title of Dictionary Database</title>

<contributor type="olac:role" code="primary investigator">Primary Investigator</contributor>

<contributor type="olac:role" code="annotator">Annotator #1</contributor>

<contributor type="olac:role" code="creater">Creator</contributor>

<contributor type="olac:role" code="sponsor">Sponsor</contributor>

<modified type="dcterms:W3CDTF">Last Modified</modified>

<format type="dcterms:IMT">text/xml</format>

<language type="olac:language" code="abc" lang="abc">Source</language>

<language type="olac:language" code="eng" lang="eng">English</language>

<subject type="olac:language" code="abc" lang="abc">Source</subject>

<subject type="olac:language" code="eng" lang="eng">English</subject>

The dictionary XML file is organized in the following configuration. Creating new entries, modifying existing ones, and deleting unwanted entries are typically done through the update interface. Alternatively, you may manually update the database within the XML file, but do so carefully.

dictionary xml
  • <entry id="0">[...]</entry>
    • All entries start and end with entry tags, and each opening tag has the attribute ID. Each entry has a unique ID generated by the computer.
  • <form>[...]</form>
    • Form represents the transcription of the word. For example, some people may create a writing system (known as orthography), others may transcribe the words using the English alphabet, and some may use the International Phonetic Alphabet (IPA).
  • <orth>[...]</orth>
    • Orth(ography) (or writing system) indicates how the words are represented on paper, or on the computer. This is where the words are entered in from the language you are working on.
  • <sense>[...]</sense>
    • Sense indicates the word senses, or the meaning of the word in the reference language, or the primary language that is used to describe the language you are working on.

The dictionary.xml file was designed to be both human- and machine-readable while keeping in line with the standards. If you plan on altering the format of the dictionary database, be sure to refer to the TEI encoding standards here, as well as the other standards mentioned before.

Now, enter into the /dictionary/update folder which is organized in the following way.

  • uploadFiles.php: Contains code for uploading sound files to the /dictionary/sounds folder. Do not change.
  • showRecords.php: Contains code for the show record functionality in the interface.
  • interface.php: Contains content for the data entry interface web page.
  • insert.php: Contains code to insert data into dictionary.xml.
  • index.php: Contains contents for the update main page.
dictionary update files

The first thing you may want to do is change the username and password of the update webpage. In the index.php file, look for the comment // Username and password. The default username is abc and the default password is 123. Replace the username and password under the comment with your own username and password.

Go into the interface.php file. Look for the comments <!-- Source --> - there are two places were they appear. Beneath these comments, you will find the term Source language being used. Replace it with the language you are working on. If you are working with a language that is not English as a reference language, look for <!-- English --> and replace English. Next, look at the showRecords.php file, and find the comment // Source. Change Source in echo "<th>Source</th>"; to, again, the language you are working on. If the other language you are using is not English, look for the comment // English and in the same way as before, replace English in the line of code below.

Phrasicon

Enter into the /phrasicon folder which contains the following files and folders.

  • update: Stores the data entry components.
  • sounds: Stores sound files.
  • js: Stores JavaScript files. Do not change.
  • css: Stores CSS files.
  • word.php: Contains contents for the word entry.
  • phrasicon.xml: Stores all the dictionary entries.
  • index.php: Contains contents for the main dictionary web page.
  • category.php: Contains contents for the letter category web page.
  • phrasicon_dictionary.jpg: Main image for the phrasicon web pages.
phrasicon folders

First, go in the index.php file. To change the header of the phrasicon, look for the comment <!-- Title of the page. --> and replace Online Phrasicon Template. Next, find the comment <!-- Search Menu (title)-->. The language you are translating into is known in this document as the reference (or target) language. If the reference language is English, you may skip this part, if not then you may want to change replace English. The steps so far apply to the files category.php and word.php as well.

In the event that English is not being used as the reference language, search for the comment <!-- Search by letter (A-Z). --> and below, you will see lines of code that look like this: <li><a href="../phrasicon/category.php?letter=e">e</a></li>. If you language has an alphabet that is similar to English, you can replace the letters in the following way. First, focus on the code that reads [...]letter=e" and [...]>e</a> in the example given. Then replace the e in both occurences with the desired letter. For example, if the reference language is French, then you may want to add é. The line of code will then look like this: <li><a href="../phrasicon/category.php?letter=é">é</a></li>. The steps so far apply to the files category.php and word.php as well.

Search for the comment <!-- Language options. -->. In the code that says <option value="source">Source</option>, alter the word Source (the one with the capitalized 'S'). Make sure not to change the source in value="source". If English is not the reference language, change English in <option value="english">English</option>. Again, do not change english in value="english" even if the primary language of your website is in a different language. The steps so far apply to the files category.php and word.php as well.

Finally, find the comment <!-- The About section starts here... --> which is a section that talks about the phrasicon. First, you may want to change the header of the section. In the code <h4 class="subheader">About the Phrasicon</h4>, replace the content that reads About the Phrasicon. Next, you might want to include how many entries are currently in the phrasicon, or how the user should view each entry. You can input the number of existing entries by typing in <?php echo $count ?> - for example, your piece of code may look like this: <p>There are <?php echo $count ?> entries in the phrasicon.</p>. Before editing the paragraphs, refer to the About the Materials section if you have not already as it describes the process more in depth.

Now, look into the phrasicon.xml file. The XML file follows the E-MELD Best Practices in Digital Language Documentation. Locate the opening and closing tags for <metadata>[...]</metadata>. The metadata is a description about the resources which follows the OLAC (Open Language Archives Community) standards and recommendations found here - they are used for archiving purposes. For example, it indicates who created the sources, what languages are involved, and the title of the database. The first twenty lines should look like this.

phrasicon metadata

<title>Title of Phrasicon Database</title>

<contributor type="olac:role" code="primary investigator">Primary Investigator</contributor>

<contributor type="olac:role" code="annotator">Annotator #1</contributor>

<contributor type="olac:role" code="creater">Creator</contributor>

<contributor type="olac:role" code="sponsor">Sponsor</contributor>

<modified type="dcterms:W3CDTF">Last Modified</modified>

<format type="dcterms:IMT">text/xml</format>

<language type="olac:language" code="abc" lang="abc">Source</language>

<language type="olac:language" code="eng" lang="eng">English</language>

<subject type="olac:language" code="abc" lang="abc">Source</subject>

<subject type="olac:language" code="eng" lang="eng">English</subject>

The phrasicon XML file is organized in the following configuration. Creating new entries, modifying existing ones, and deleting unwanted entries are typically done through the update interface. Alternatively, you may manually update the database within the XML file, but do so carefully.

phrasicon xml
  • <phrase id="0">[...]</phrase>
    • All entries start and end with entry tags, and each opening tag has the attribute ID. Each entry has a unique ID generated by the computer.
  • <ref>[...]</ref>
    • The reference for the sound file is entered here. For example, this might be where the sound file was found such as a cassette or a CD, and the speaker. This is for documentation and archival purposes.
  • <source>[...]</source>
    • Source refers to the source language. This is the language you are working with. The phrase or sentence of the source language is entered here.
  • <morpheme>[...]</morpheme>
    • This field indicates the morphemes you have decided to display for the phrase. The number of morphemes should be the same as the number of glosses.

While there are multiple existing XML formats for interlinear glosesd texts (IGT) (i.e. BHB, IGT-XML, XIGT), this format was designed to be both human- and machine-readable, and editable while keeping in line with the standards. This format, like the BHB model, is used to represent IGT as closely as possible, and has multiple purposes that includes facilitating computational manipulation of the data, and allowing these resources to be used for archiving.

Now, enter into the /phrasicon/update folder which is organized in the following way.

  • uploadFiles.php: Contains code for uploading sound files to the /phrasicon/sounds folder. Do not change.
  • showRecords.php: Contains code for the show record functionality in the interface.
  • interface.php: Contains content for the data entry interface web page.
  • insert.php: Contains code to insert data into phrasicon.xml.
  • index.php: Contains contents for the update main page.
  • autosuggest.php: Contains contents for the automatic gloss suggestion program. Do not change.
phrasicon update files

The first thing you may want to do is change the username and password of the update webpage. In the index.php file, look for the comment // Username and password. The default username is abc and the default password is 123. Replace the username and password under the comment with your own username and password.

Go into the interface.php file. Look for the comments <!-- Source --> - there are two places were they appear. Beneath these comments, you will find the term Source being used. Replace it with the language you are working on. Next, look at the showRecords.php file, and find the comment // Source. Change Source in echo "<th>Source</th>"; to, again, the language you are working on.

Adding Annotation Layers

For some languages, you may want to add annotation layers. For example, if your language has tone, you may want to add a layer that represents tone. These extra annotation layers are formatted in the same way as the morphemes, and glosses. There are multiple files that are affected in the dictionary and phrasicon components. The files that need to be modified are the same in both components, but the directions for the separate components will differ. If you choose to add layers in the dictionary, but not in the phrasicon, then you should only edit the dictionary components.

Dictionary

The comments, which are referred to as add-annotation-layer comments, that you should look for in the files discussed shortly will contain the following: This is where you add annotation layers.. Depending which files you open, the comments may appear as <!-- This is where you add annotation layers. -->, /* This is where you add annotation layers. */, or // This is where you add annotation layers.. In the dictionary.xml file, find the add-annotation-layer comment, and then uncomment the desired number of additional annotation layers. The default names of these layers are ExtraAnno (eg. <h4 class="subsubheader">ExtraAnno1</h4>), and extraAnno (eg. <!-- <extraAnno1/> -->). By default, there are five extra annotation layers that are embeddded in comments. In order to use these layers, you should uncomment them. For example, <!-- <p>This is a paragraph.</p> --> is a comment where a paragraph tag is embedded within. To uncomment, simply remove the leading <!-- and the trailing -->. You will then be left with <p>This is a paragraph.</p>.

You may also rename these layers. If so, you should only rename the layers where there are also comments that say Rename-able. If you rename the annotation layers, they must be consistent. Please refer to the TEI website, here, for naming standards. There is a rename-able comment in the dictionary.xml file. Replace the content. The first letter of your new name should not be capitalized. For example, if you wanted to rename a layer to represent tone, your code will look like this: <tone/>.

Now, in the dictionary/update folder, go into the interface.php file. There are two add-annotation-layer comments in this file. For the first add-annotation-layer comment found in the file, each layer is commented, and separated into blocks indicated by the following: <!-- ExtraAnno -->. Do not uncomment them. Below the <!-- ExtraAnno --> comment, uncomment the desired number of layers. If you are renaming, replace the content the following line <h4 class="subsubheader">ExtraAnno</h4>.The first letter should be capitalized. Using the same example for tone, it would be ><h4 class="subsubheader">Tone</h4>. For the line beneath saying <input type="text" name="extraAnno">, replace the content extraAnno between the quotation marks. Here, the first letter should not be capitalized. Keep this in mind for future changes: if the content reads ExtraAnno, the first letter of the new name should be capitalized. If the content reads extraAnno, the first letter of the new name should not be capitalized. Look for the second add-annotation-layer comment in the file, and, again, uncomment the layers you want. Replace the content extraAnno and ExtraAnno.

Next, open the insert.php file. There is one add-annotation-layer comment. Uncomment the desired number of layers. If you are renaming, replace the content. For example, in the tone example, the line of code would look like this: $entry->addChild("tone", $_POST['tone']);.

In the showRecords.php file, there are three add-annotation-layer comments. For the first one, uncomment the number of layers you want, and if renaming, replace the content. (eg. echo "<th>Tone</th>";. Do this for the second and third, but you should not be making changes to the name.

Finally, in the /dictionary folder, go into the word.php file. There are two add-annotion-layer comments. Just like before, uncomment the layers in both sections. Remember, if the comments look like this // <p>Example</p>, to uncomment, delete the two forward slashes, and they will look like this: <p>Example</p>. Again, you should not be renaming anything.

Phrasicon

The comments, which are referred to as add-annotation-layer comments, that you should look for in the files discussed shortly will contain the following: This is where you add annotation layers.. Depending on which files you open, the comments may appear as <!-- This is where you add annotation layers. -->, /* This is where you add annotation layers. */, or // This is where you add annotation layers.. The default names of these layers are ExtraAnno (eg. <h4 class="subsubheader">ExtraAnno1</h4>), and extraAnno (eg. <!-- <extraAnno1>[...]</extraAnno1> -->). By default, there are five extra annotation layers embedded in comments. In order to use these layers, you should uncomment them. For example, <!-- <p>This is a paragraph.</p> --> is a comment where a paragraph tag is embedded within. To uncomment, simply remove the leading <!-- and the trailing -->. You will then be left with <p>This is a paragraph.</p>. In the phrasicon.xml file, find the add-annotation-layer comment. Each layer is commented, and separated into blocks indicated by the following: <!-- ExtraAnno -->. Do not uncomment them. Below each <!-- ExtraAnno -->, uncomment the desired number of layers.

You may also rename these layers. If so, you should only rename the layers where there are also comments that say Rename-able. If you rename the annotation layers, they must be consistent. Please refer to the TEI website, here, for naming standards. There is a rename-able comment in the dictionary.xml file. Replace the content. The first letter of your new name should not be capitalized. For example, if you wanted to rename a layer to represent tone, your code will look like this: <tone>[...]</tone>. Do not rename the tags <extra&l;[...]</extra<.

Now, in the phrasicon/update folder, go into the interface.php file. There are two add-annotation-layer comments in this file. For the first add-annotation-layer comment found in the file, each layer is commented, and separated into blocks indicated by the following: <!-- ExtraAnno --> just like in the phrasicon.xml fil. Do not uncomment them. Below each <!-- ExtraAnno --> comment, uncomment the desired number of layers. If you are renaming, replace the content the following line <h4 class="subsubheader">ExtraAnno</h4>.The first letter should be capitalized. Using the same example for tone, it would be ><h4 class="subsubheader">Tone</h4>. Look for the second add-annotation-layer comment in the file, and, again, uncomment the layers you want. Replace the content extraAnno and ExtraAnno. Keep in mind that if the content reads ExtraAnno, the first letter of the new name should be capitalized. If the content reads extraAnno, the first letter of the new name should not be capitalized. Therefore, if the layer was renamed for tone, the code will look like this: <option value="tone">Tone</option>.

Next, open the insert.php file. There are two add-annotation-layer comments. In the first one, there are five blocks of commented code that correspond to the five extra annotation layers. Uncomment the number of layers you want by removing the /* and */. If renaming, in the line of code that says $extraAnno1 = $entry->addChild('extraAnno1');, replace extraAnno1 only in addChild('extraAnno1');. So for tone, it will look like this: $extraAnno1 = $entry->addChild('tone');. For the second add-annotation-layer comment, again, uncomment the desired number of layers. If renaming, in the code that reads elseif ($field=="extraAnno1") {, replace extraAnno1.

In the showRecords.php file, there are two add-annotation-layer comments. For the first one, uncomment the number of layers you want, and if renaming, replace the content. (eg. echo "<th>Tone</th>";. Now, look for the second add-annotation-layer comment. Again, there are five blocks of comments with code in them. Each of these blocks are beneath another comment that says // ExtraAnno. Do not uncomment these. Instead, uncomment the block of code underneath.

Finally, in the /phrasicon folder, go into the word.php file. There are two add-annotion-layer comments. Just like before, uncomment the layers in both sections. For the first one, each layer consists of multiple lines of code enclosed within the comment tags. The second one is simply five lines of code for the five layers. You should not rename any of the content in this file.

Stories and Texts

To change the stories and texts page, go into the /texts folder. Again, there are the two files, index.html and default.html. Open the one that pertains to you, and delete the other.

In the code, you will find comments throughout. If you want to keep the default format, and just want to change the content, look for the comment: <!-- Paragraph #1 -->. Replace the content enclosed within the paragraph tags. Next, you may want to change the image. Look for the comment: <!-- Image goes here. -->. In the line that reads background: url("img/background_texts.jpg");, change background_texts.jpg to the image you want displayed on the page. Place your image in a folder named /img within the /texts folder. If it is not there, simply create it. You may need to resize your image a few time to get the exact dimensions.

In the code, find the text buttons section indicated by the comment <!-- Texts #1 and #2 Buttons start here... -->. The buttons directing users to the texts appear in subsections. Within the tags <div class="row">[...]</div>, there are two buttons. Look for the comments that read <!-- Text #x Video --> where x is the number 1 or 2. Directly below should be the following code: <a href="textx" class="radius button text">Text #1</a>. Replace textx in href="textx" to name of the folder that will contain the materials relating to that particular text. For example, in the default template, there is a folder in your /texts folder named 'text1'. This is where you may want to place materials of a text. However, you may also rename your folder. Let's imagine we renamed the folder to 'hydra' because our text is about Hydra. Then, we would replace textx with hydra so that it becomes <a href="hydra" class="radius button text">Text #1</a>. Next, you may want to change the content that reads Text #1 between the angle brackets. Using the same example with Hydra, we might name it Hydra so that the entire code becomes <a href="hydra" class="radius button text">Hydra</a>.

Note that if you wanted to create two more buttons, copy from <div class="row"> located right after the comment <!-- Texts #1 and #2 Buttons start here... -->, up to </div> directly before the comment that reads <!-- ...Texts #1 and #2 Buttons end here -->. Paste the lines of code right after the comment just mentioned. If you want to create only one button, simply follow the same steps, but delete one of the text buttons, indicated by <!-- Texts #1 section starts here... -->[...]<!-- ...Texts #1 section ends here -->.

The next step is to edit the files containing the content for each text. Go into the \textx folder where x represents the number 1 or 2. For our example, we will be referring to \text1. There are the two files, index.html and default.html. Open the one that pertains to you, and delete the other. In the code, you will find comments throughout. If you want to keep the default format, and just want to change the content, look for the comment: <!-- Paragraph #1 -->. Replace the content enclosed within the paragraph tags. You may now want to change the background image. Look for the comment: <!-- Image goes here. -->. In the line that reads background: url("img/background_texts.jpg");, change background_texts.jpg to the image you want displayed on the page. Place your image in the /img foler within the /texts folder, not in the current directory. You may need to resize your image a few time to get the exact dimensions.

Next, you may want to insert your own videos. In your /texts folder, you may notice there is also a /video folder. If it isn't there, create it. This is where you should put any videos that you want displayed on the sounds and letters page. In attempts to accomodate the many different browsers, you may want to create different formats of the videos - we made videos in mp4, webm, and ogv formats. If you are concerned about a snapshot appearing before the video is displayed, you might also want to place a poster of the video in the folder /img within the /texts folder.

Locate the comment: <!-- Video of text. -->. Below is another comment with lines of code enclosed within. Remove the comment tags <!-- and -->. Then, replace placeholder in these lines of code to the name of your video file. At this point you'll also notice the comment: <!-- Placeholder -->. Delete the line beneath that reads <img width="100%" src="../img/video_placeholder.png">. The next step is to insert images of your texts if you have them. Place these images into the /img folder within /texts. Locate the comments <!-- PDF #x -- >, and below the code should look like this: <img src="../img/placeholder_pdf.png" alt="textx">. Replace placeholder_pdf to the name of the image of the specific page of text. If your text consists more than four images, simply copy the pieces of code from <!-- Text PDF #x starts here... --> to <!-- ...Text PDF #x ends here -->, and paste it right after the comment that reads <!-- ...Text PDF #4 ends here -->. If your text consists of less than four images, then instead of copying the code between the start and end comments, delete them.

Links to Mobile Apps

If you have created mobile apps for the language you are working on, you may want to provide a brief description including links to the download page.

In the /apps folder, open the index.html or default.html file. If you are unsure which file to open, please read the previous sections. To change the description of the mobile apps, find the comment <!-- Paragraph #1 --> and edit the contents.

If you want to insert a link to the iOS app (i.e. iPhone, iPad), look for the comment indicating the iOS section, <!-- The iOS section starts here... -->. Within the section, there is another comment that says <!-- Button to link. -->. Below, there is a line of code that reads <a class="button secondary" href="#">Download</a>. To add a link, replace # located between the quotation marks directly after href= with the full link to the download page. Then, alter the notification Download to signal users to click there. This process is the same for the Android version.

Perhaps you only have a mobile app for one platform. For example, if you only have an iOS app, and have no plans to develop an Android app, you will only want to have a single section. Look for comments indicating the start of the section you want to delete, and the end of the section. Then, delete the lines of code between the two comments.

Contact Page

The contact page allows users to contact the creators of the resources. The user enters in their name, their email, and their message. When they submit, the email will be sent to whichever email is supplied.

To supply an email, go into the /contact folder and open send_email.php. Look for the comment that says // Your email goes here. and then change the content between quotation marks that reads enter email here to your own email address. Next, you may want to change the subject header. Look for the comment // Email Subject Header you have the option of altering the default subject Language Tools: New Message. Then, you may want to change the contents, or body, of the message. Find the comment that says // Email Body Message and change the default content A new message has been sent from the Language Tools website...\n\n.

Apart from perhaps altering the head elements in the index.html or default.html files, the template was made so that no other changes must be made. Feel free to edit the file to fit your needs.

Frequently Asked Questions

Currently under development.

Good luck!



Android App Template

The documentation for the Android word-learning app can be found here.