Arbol - cierra issue #8

<h2>Arbol de Materias - #8 </h2>
Muestra las materias en un orden, que se podria modificar (discutido en issue #20 )
Mantiene el estilo de colores mostrado en la barra de progreso.
<br/>
<h4>Para poder usarlo:</h4>
<ul>
    <li>Teniendo algunos datos en Materia corroborar el nombre exacto</li>
    <li>modificar ArbolMaterias.html en la parte de las variables que quede con el nombre de la materia exacta modificando:
    <ol>
        <li>todo el nombre en minuscula</li>
        <li>el nombre va a ser completo sin espacios</li>
    </ol></li>
</ul>

<br/>
<em>Nota importante</em>
<p>Aunque se modifico el modelo no cumple para #11 , volver a modificar y finalizar esos cambios</p>