Manual for Creating
Your Own Website*

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.

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.

About the Materials
• A description about the language, the speakers, and the members involved in the creation of these resources.



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



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



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.)



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.)



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



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.



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

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.

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...

Main Menu

Since you have the main menu HTML file opened, let's continue making changes.

First, you may want to delete the link to the documentation (i.e. [Documentation]) that appears beneath the picture. Look for the comment that says <!-- This is the link to the documentation. You may want to delete this. -->. Delete the whole line, from <a [...]> to </a> including the tags. Alternatively, you can comment the whole line by adding <!-- before the start of the line, and --> at the end.

Next, you may want to change the menu header. Find <!-- This is the Menu Header right above the menu links. -->. Changing the content within tags will alter the menu header.

Finally, you may only want to use some of the components in the template. Therefore, you will want to keep the relevant links. For the components that you will not be using, simply delete the whole line, from <a [...]> to </a> including the tags. <br /> are linebreaks - they create empty lines to separate the links. You may want to insert or remove them to adjust the look on your web page.

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.

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.

<title>Title of Dictionary Database</title>

• This is the title of your dictionary database. Replace Title of Dictionary Database. (Ex. Dictionary Database of Northern Pomo) between the tags.

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

• This indictes who the primary investigator is, or the person leading the creation of the resources. Replace Primary Investigator between the tags.

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

• This indicates who the annotators are for the dictionary database. There are five fields, but you don't have to fill them all. If you want to create more, simply copy and paste the following line of code: <contributor type="olac:role" code="annotator">Annotator #x</contributor>. Repace Annotator #x where x is any number between the tags.

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

• This indicates the creator of the dictionary database. This is usually the technician, or the person setting up the template. Replace Creator between the tags.

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

• This indicates the funding agencies. For example, if you project is supported by the National Science Foundation (NSF), you may include it here. Replace Sponsor between the tags.

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

• This indicates when the dictionary database was last modified. Replace Last Modified between the tags.

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

• This is the format of the dictionary database. Do not change.

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

• This indicates the language you are working on to document and revitalize. There are three pieces to focus on. First, look at code="abc". This represents the language code. Most of the world's languages have a specific ISO 639-3 code that can be found here. Locate the code for your language and replace abc with the new code. Do this for lang="abc", also replacing abc. Finally, replace Source between the tags with the name of the language you are working on.

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

• This indicates the language that is familiar to the target audience, or the language in which these language materials are translated into. In the same way as before, edit the code="eng", lang="eng", and English between the tags if the language of instruction is not English.

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

• This indicates the subject matter of the dictionary database. Since the dictionary is documenting the language you are working on, the three pieces of information, code"abc", lang="abc", and Source should be the same as <language type="olac:language" code="eng" lang="eng">English</language>.

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

• This also indicates the subject matter of the dictionary database. The (target) language you are using as a reference for your source language is also the subject of this dictionary. Therefore, if the language is not English, follow the same instructions for <language type="olac:language" code="eng" lang="eng">English</language>

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.

• <cit type="translation" lang="en">[...]</cit>
  • This indicates the fields that will be translations for the given word in the target language, or the language used as a reference.
• <usg type="hyper">[...]</usg>
  • This is where the hypernym for the entry is entered in.
• <quote>[...]</quote>
  • This is where the translation for the word is entered in.
• <gramGrp>[...]</gramGrp>
  • This indicates the fields that are part of the grammatical (or linguistic) descriptions that appear in each entry. Grammatical descriptions include parts-speech, etc.
• <pos>[...]</pos>
  • This is where you enter in the parts of speech for the word.
• <note>[...]</note>
  • This is where you can add more description about the entry. For example, you may want to discuss when the word is used, or its etymology.
• <media mimetype="" url=""/>
  • This indicates the the audio format and name of the sound file. For example, if your file is dog.wav, then the code will look like this: <media mimetype="audio/wav" url="dog.wav"/>.
• <ref>[...]</ref>
  • This is where you enter in the reference for the sound file. 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.
• <extraAnno>[...]</extraAnno>
  • These are extra layers of annotation and are commented out by default. This is discussed in depth later 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.

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.

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.

<title>Title of Phrasicon Database</title>

• This is the title of your phrasicon database. Replace Title of Phrasicon Database. (Ex. Phrasicon Database of Medumba) between the tags.

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

• This indictes who the primary investigator is, or the person leading the creation of the resources. Replace Primary Investigator between the tags.

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

• This indicates who the annotators are for the phrasicon database. There are five fields, but you don't have to fill them all. If you want to create more, simply copy and paste the following line of code: <contributor type="olac:role" code="annotator">Annotator #x</contributor>. Repace Annotator #x where x is any number between the tags.

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

• This indicates the creator of the phrasicon database. This is usually the technician, or the person setting up the template. Replace Creator between the tags.

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

• This indicates the funding agencies. For example, if you project is supported by the National Science Foundation (NSF), you may include it here. Replace Sponsor between the tags.

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

• This indicates when the phrasicon database was last modified. Replace Last Modified between the tags.

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

• This is the format of the phrasicon database. Do not change.

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

• This indicates the language you are working on to document and revitalize. There are three pieces to focus on. First, look at code="abc". This represents the language code. Most of the world's languages have a specific ISO 639-3 code that can be found here. Locate the code for your language and replace abc with the new code. Do this for lang="abc", also replacing abc. Finally, replace Source between the tags with the name of the language you are working on.

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

• This indicates the language that is familiar to the target audience, or the language in which these language materials are translated into. In the same way as before, edit the code="eng", lang="eng", and English between the tags if the language of instruction is not English.

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

• This indicates the subject matter of the phrasicon database. Since the phrasicon is documenting the language you are working on, the three pieces of information, code"abc", lang="abc", and Source should be the same as <language type="olac:language" code="eng" lang="eng">English</language>.

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

• This also indicates the subject matter of the phrasicon database. The (target) language you are using as a reference for your source language is also the subject of this phrasicon. Therefore, if the language is not English, follow the same instructions for <language type="olac:language" code="eng" lang="eng">English</language>

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.

• <m id="x.y">[...]</m>
  • For each morpheme, they will be enclosed within the <m></m> tags. Each starting tag has an ID attribute which is generated by the computer. The ID before the decimal point refers to the ID of the entry. The ID after the decimal point refers to the number (or position) of that morpheme.
• <gloss>[...]</gloss>
  • This field indicates the glosses of the morphemes. Again, the number of glosses should be the same as the number of morphemes.
• <g id="x.y">[...]</m>
  • For each gloss, they will be enclosed within the <g></g> tags. Each starting tag also has an ID attribute which is generated by the computer. The ID is identical to morpheme that is glossed so that that may be co-indexed. In other words, this allows the computer to know which gloss corresponds to the correct morpheme, and vice versa.
• <translation>[...]</translation>
  • This is where the translation for the phrase is entered in.
• <media mimetype="" url=""/>
  • This indicates the the audio format and name of the sound file. For example, if your file is dog.wav, then the code will look like this: <media mimetype="audio/wav" url="dog.wav"/>.
• <extraAnno>[...]</extraAnno>
  • These are extra layers of annotation and are commented out by default. This is discussed in depth in the next section.

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.

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.

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.

Android App Template

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