Logotipo del Gobierno de Aragón Logotipo del CATEDU

Página principal (descargar Prokit)

MANUAL DE PROKIT

  1. Añadir una nueva aplicación en una sección ya existente
  2. Editar el interfaz principal

Para añadir o editar una aplicación no es necesario compilar nada, ya que todo el sistema se basa en ficheros de texto y en la solución de software libre kiwix.

Por lo tanto, se trata de una operación asequible a un usuario con conocimientos muy básicos de HTML.

Añadir una nueva aplicación en una sección ya existente

Las secciones se acceden desde el interfaz principal, y el contenido de cada una está en una página HTML (por ejemplo, educacion.html, que es la web de aplicaciones para el aula ), bajo <dir>\html\en.

Desde estas páginas de sección, se referencia una página HTML por cada aplicación. La web de cada aplicación está dentro de una carpeta según la sección a la que pertenece. Por ejemplo: en carpeta de educación están las páginas de Edilín, Ardora, Jclic.

Para añadir una nueva aplicación:

  1. Crear el directorio que va a contener la aplicación portable. Las aplicaciones portables se encuentran en <dir>/apps. Por ejemplo, Firefox se encuentra en <dir>/apps/FirefoxPortable
  2. Copiar la aplicación portable en el directorio anterior
  3. Incluir en la página de la sección (por ejemplo en educacion.html), el siguiente código, sustituyendo lo que corresponde para enlazar a la nueva aplicación portada. 
     
 
<br style="clear: both;">
<div class="appDescrip">
<div class="titulo">
<div class="boton ejecutar"><a href="../../apps/'''dirección del ejecutable de la app portable'''" class="boton"><span class="texto_boton">Ejecutar</span><br>
</a> </div>
<a href="'''web de descripción de la aplicación (ver punto 4)'''" class="enlace_titulo"><img class="icono_aplicacion" src="'''Icono de la aplicación'''">
        <h3 class="enlace_titulo">'''Nombre de la aplicación'''</h3></a></div>
 
<br style="clear: both;">
<div class="contenidoApp">
<div class="screenshot"><a href="'''dirección de una captura de pantalla del programa'''" rel="lightbox">
                <img class="screenshot" alt="screenshot" src="'''Misma dirección de la imagen de la captura de pantalla'''"></a></div>
<p>
'''Pequeña descripción del programa'''
 
</p>
<div class="botones">
<div class="boton info"><a href="'''web de descripción de la aplicación (ver punto 4)'''" class="boton"><span class="texto_boton">Más Info</span>
</a> </div>
<div class="boton manual"><a href="'''URL del documento de ayuda'''" class="boton"><span class="texto_boton">Manual</span></a></div>
</div>
</div>
</div>
  4. Incluir la página de la aplicación (por ejemplo ardora.html) en la carpeta de sección correspondiente. 
     
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>OpenDisc program page</title>
 
<script type="text/javascript" src="../../incl/js/prototype.js"></script>
<script type="text/javascript" src="../../incl/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="../../incl/lightbox.js"></script>
<link rel="stylesheet" href="../../incl/css/lightbox.css" type="text/css" media="screen">
<link media="screen" href="../../../chrome/skin/catedu/otherCss.css" rel="stylesheet">
<link media="screen" href="../../../chrome/skin/catedu/otherCssAppDescript.css" rel="stylesheet">
</head>
<body>
<div class="NombreAplicacion"> <img class="icono_aplicacion" alt="eXe Learning" src="'''Icono de la aplicación'''">
<span class="enlace_titulo">'''Nombre aplicación'''</span>
<div class="botones">
<div class="boton ejecutar"><a href="../../apps/'''dirección del ejecutable de la app portable'''" class="boton"><span class="texto_boton">Ejecutar</span>
</a> </div>
<div class="boton manual"><a href="'''URL del documento de ayuda'''" class="boton"><span class="texto_boton">Manual</span></a></div>
</div>
</div>
 
<br>
<br style="clear: both;">
<div class="descripcionCompleta">
	<div class="screenshot"><a href="'''dirección de la captura de pantalla de la aplicación'''" rel="lightbox">
<img class="screenshot" alt="screenshot" src="'''Misma dirección de la captura de pantalla de la aplicación'''"></a>
</div>
<p>
'''Descripción amplia de la aplicación'''
</p>
 
<p>
<b>Otros enlaces de ayuda</b>
<br>
<a href="'''otros enlaces de ayuda'''">'''Nombre que se quiere poner al enlace'''</a>
<br>
<a href="'''otro enlaces de ayuda'''">'''Nombre que se quiere poner al segundo enlace'''</a>
</p>
<p>
<b>Licencia</b>
<br>
<a href="'''Enlace al txt con la licencia de la aplicación'''">Mostrar licencia
</a>
</p>
 
 
</div>
</body></html>

Volver arriba

Editar el interfaz principal

La barra superior emplea XUL (Javascript) y se puede editar mediante el fichero: <dir>\chrome\content\interfacewiki\interfacewiki.xul

Para editar el menú, modificar la sección <hbox id="menu">.

Por ejemplo, aquí se mostrará un menú con el elemento "Home" y el elemento "Design". Al pinchar sobre Home, se buscará la web home.htmly al pinchar en Design, se irá a design.html, como puede comprobarse en este fragmento de código: 

<hbox id="menu">
    <vbox><label id="menu_ho" value="Home" onclick="goTo('en/home.html')" /></vbox>
    <vbox><label id="menu_de" value="Design" onclick="goTo('en/design.html')" />
</hbox>
La hoja de estilos que se usa es: <dir>\chrome\skin\catedu\interfacewiki.css

Volver arriba