Create a new project

Preparations

The following preparations are obligatory:

  1. Provide an akronym or a short title (at most 20 chars) for your project.
  2. Provide a representative photo/image clip - size: 700 x 170 pixels.
  3. Provide a list with keywords about your project.
  4. Structure your content - the proverb "less is more" is especially true for web-pages.
  5. Take time and review your content before publishing it.
  6. Use a simple text-editor to edit your pages rather than a fancy WYSIWYMG editor.
  7. Stick to simple formatting - make use of pre-defined styles provided by the /css/embsys.css stylesheet.

Project Creation

Step 1: Create a directory with your akronym and extract the project template within. Furthermore, rename and/or create subdirectories for all the workpackages/items you want to list in the sidebar menu.

Step 2: Rename the file project_template_header.html to reflect your akronym instead of 'template' in the filename. Edit the renamed file and replace the keywords in the meta tag.

Step 3: Edit the file 'index.php' and adjust the strings (i) 'project_template_header.html', (ii) 'templatebanner', (iii) the path to the file sidebarmenu.html.

Step 4: Download the style-file found here, edit the file and search the CSS ID '#templatebanner' (see listing below). Copy & paste the entire ID and replace the string 'template' with your project akronym - i.e. in both the name of the ID and the image filename.

#templatebanner {
  float: right;
  height: 170px;
  width: 700px;
  background-image:  url(/css/banner/template.jpg);
}

Step 5: Edit the file 'sidebarmenu.html' to reflect your intended project menu.

<h1>Template</h1>

<ul>
 <li><a href="aims/aims.php">Aims</a></li>
   <li id="m2"><a href="aims/general_aims.php">General Aims</a></li>
   <li id="m2"><a href="aims/specific_aims.php">Specific Aims</a></li>
 <li><a href="publications/publications.php">Publications</a></li>
 <li><a href="staff/staff.php">Project Staff</a></li>
</ul>

Note: The <li id="m2"> tags produce items that are indent, i.e. used for sub-categories. Use only one sub-category level!

Step 6: Edit the file 'index_content.html' - this will be the front-page of you project. Use standard HTML tags to format your page. The file itself contains already several examples of how to do so.
The only thing required is the principle structure as outlined in the example below:

<h1>Publications</h1>
<div id="post">
<p>
 
  .... <!-- ============================================== -->
  .... <!-- put your content in here                       -->
  .... <!--                                                -->
  .... <!-- the content page has a max. width of 680 px !! -->
  .... <!-- ============================================== -->

</p>
</div>

Note: The file has no HTML header or BODY specific directives - simply put your content at the indicated location. The maximum width of the page is 680 pixels!!

Step 7: Copy/edit the files in the subdirectories. Every page is made up of a *.php file that includes the respective *.html file where the latter holds the real content. When linking to a page, always link to the *.php file. The only exeption is the staff overview page that is constructed out of two *.php files instead.

Step 8: Edit the 'staff_content.php' file in the /project/akronym/staff subdirectory. The content of this page are constructed with the help of a simple PHP function; editing this file should be pretty much self explanatory (see below) - look for the sections similar to the highlighted ones below.

<h1>Project Staff</h1>
<div id="post">

<?php
function tdname($name,$realname,$function,$skill1,$skill2)
{
  if ($name!="0")
    return "<td>\n<a href=\"/staff/".$name."/index.php\"><img src=\"/staff/"
           .$name."/".$name.".jpg\" title=\"".$realname.
           "\" /></a>\n</td>\n<td id=\"t\">\n<a href=\"/staff/"
           .$name."/index.php\"><b>".$realname.
            "</b></a><br />".$function."<br /><br />".$skill1
            ."<br />".$skill2."\n</td>";
  else
    return "<td>&nbsp;</td><td>&nbsp;</td>";
}
?>

<table id="staff">
<tr>
<?php
echo tdname("hoeller", "Roland Höller", "R&D, Lecturer", 
            "System-on-Chip Design", "Clock Synchronization");
echo tdname("kutschera", "Christof Kutschera", "R&D, Lecturer", 
            "Test & Verification", "FPGA Design");            
?>
</tr>
<tr>
<?php
echo tdname("veigl", "Christoph Veigl", "R&D, Lecturer", 
            "Test and Verification", "Embedded Biomedical Systems");
echo tdname("0", "0", "0", "0", "0");
?>
</tr>
</table>
</div>

Note: The staff overview page is generated using a table with two columns. In case you have an odd number of project members you need to call the function 'tdname' with "0" as arguments as illustrated above. Furthermore, there is room for four attributes - the first being the name - hence you may use the three others, e.g., for function and two skills. Please stick to this rule!!

Step 9: Test your created pages before you deploy and intergrate them into the actual running web-server contents. Perform (i) visual inspection, (ii) fix tags and indent the code using tidy and (iii) perform a link check. See here for detailed instuctions.

Step 10: integrate your project to the project-overview page /projects/projects.html. This page currently distinguishes between 'public funded projects' and 'industry contracts'. Fit your project at the head of either category. The easiest way to do so is to copy an existing entry and modify the content of the teaser text as well as the links to your project. It is desirable to have a teaser logo/image handy!

Step 11: Deploy your content to the WEB server using one of the approaches outlined here. When done notify the WEB admin of your recent changes! Note: The notification is obilgatory, otherwise it might happen that your additions might get removed during the next maintenance.