Educational Uses of Digital Storytelling – DS
Site Technical Information and Administrative Items
The EDUOS site has undergone significant change over the past several months. During this time, the original site was totally redesigned, and primary delivery technologies have been updated to reflect modern web technologies and site publishing standards.
The following information specifies the technologies behind the site and administrative details for maintaining the site once published.
From HTML to PHP/MYSQL
The digital storytelling site is coded entirely in PHP with MySQL, although it must be noted that the site started out as a static site created only by HTML. Hence, its parts were statically delivered and there was no remarkable logic or dynamically delivered content.
When the DS site was converted from a static to dynamic site, static parts were surgically removed and replaced it with PHP code linking to MYSQL components. For example:
Original in HTML -
became...
Dynamic in PHP -
$query $result
echo " $words_in_database ";
?>
All pages connect to the " mysql_connect.php " file, which is the sole link to the MYSQL database from the PHP. If you are having database connection issues, this is the file that should be fixed.
Control Panel - Administrator
The administrator side has a control panel where they can edit the contents of each page. This was done using the INSERT, UPDATE, DELETE command familiar with MYSQL. Because the site is large and complex, multiple tables were created to support various things. There are probably over 50+ tables in the database for this reason alone...an unusually large number.
Each part of the control panel links to a separate table, but to the administrator looking at the control panel itself, it's cleanly organized and simple.
The control panel also allows the administrator to add other administrators or delete them. They can also change their password or retrieve a forgotten password.
PLEASE NOTE: The control panel was designed primarily to change text and video. Any complex graphics will need to be done manually in Photoshop.
Submit a Story Panel
The viewer also has their own panel where they can submit a story that can be reviewed and manually approved by the administrator. This panel is seperate from the administrator control panel and is built on its own table.
Graphics
All layouts were originally designed in Photoshop. Once the photoshop layout is done, it is then flattened and transferred as a layer to the border.psd file. The border.psd file has layers which a designer can use the magic wand, without anti-alias option selected, to quickly cut out the parts. Each part is then coded manually in Notepad in PHP.
The flash graphics were primarily done in After Effects which is then exported to an .swf.
Folders
All includes are placed within the includes folder.
All uploaded items are put within the uploads folder ( all videos go here )
All graphics are in the graphics folder.
Misc.
The pulldown menus from the navigation bar are created by javascript. Because javascript is difficult to adapt with PHP, any changes that need to be done to the pulldown navigation menus must be done in the javascript itself.
The table fields needed for the MYSQL can be found in the word document.
In addition, there are 20 more templates not in the original that can be added on if desired by the owner of the site. Tables and setting for them have already been placed in the control panel. To make them " visible " to the public, all that's need to be done is to make a link into the javascript menu.
Site redesign and development accomplished by:
Dr. Bernard Robin, Center for Digital Storytelling in Education;
Shawn McCombs – Design and Development;
Louis Leung – Graphic Design, Programming, and Site Implementation
The Educational Uses of Digital Storytelling is the proud Winner of the 2009 MERLOT Award for Exemplary Online Learning Resources.
