Diseñando cursos estándar en Moodle

17-01-2013 Moodle Cabezotes de Cursos

Empresa: Comfenalco

Este es el primer código que use para los encabezados de las aulas estándar que se van a entregar a todos los docentes de primeros semestres. 

Los estoy creando de forma editable, para que puedan escribir sin tener que pensar en el diseño. Sacrifique un poco el diseño este semestre para darle una solución según la filosofía del "responsive disign" aunque uso tablas  y que estos tengan la posibilidad de adaptarse a cualquier pantalla.

Los anchos están en 100% y fabrique el logo de las aulas con el fin de que no queden tan planas.

Todos los fondos son degrades tileables a un ancho de 1px para que se puedan repetir sin problemas a lo largo del fondo de los elementos editables.

La Imagen del sello es separada al resto: 

 Icono de Actividades

 Icono de Recursos

 Icono de Contenidos

 Imagen de fondo para las etiquetas de temas editables.

Ej:

 Imagen de fondo de títulos en los cabezotes

Ej:

Imagen de fondo para los cabezotes de los cursos

Ejemplo de como luce aplicado.

 Este es el gif usado

Después del salto veras código usado hasta ahora.

<!--::::::::::::::::::::Aquí Empieza el primer ejemplo de la tabla:::::::::::::::::::::::-->

<p></p>

<table style="width: 100%; background-image: url('http://aulavirtual.tecnologicocomfenalcovirtual.edu.co/aulavirtual/draftfile.php/88515/user/draft/10972433/body-bg.png');" align="center" cellpadding="0" cellspacing="0">

<tbody>

<tr style="background-image: url('http://aulavirtual.tecnologicocomfenalcovirtual.edu.co/aulavirtual/draftfile.php/88515/user/draft/10972433/titulo-estandar.png'); background-repeat: repeat no-repeat;">

<td style="width: 80%;" colspan="4"><span style="font-size: medium; font-family: Trebuchet MS,Verdana,Arial,Helvetica,sans-serif;"><span style="font-size: x-large; font-family: tahoma,arial,helvetica,sans-serif;"><strong>  <span style="color: #ffffff;">CURSO PARA PRUEBAS DE DISEÑO EN LOS CURSOS</span></strong></span></span></td>

<td><img style="float: right;" src="http://aulavirtual.tecnologicocomfenalcovirtual.edu.co/aulavirtual/draftfile.php/88515/user/draft/10972433/sello-ava_2.png" alt="sello aula virtual de aprendizaje tecno-comfenalco" height="69" width="250" /></td>

</tr>

<tr valign="middle">

<td style="width: 35%;">

<p style="text-align: center;"><span style="font-size: medium; color: #ffffff; font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;"> Imágen relativa al curso.</span></p>

<p style="text-align: center;"><span style="font-size: medium; color: #16347f; font-family: Trebuchet MS,Verdana,Arial,Helvetica,sans-serif;"><span style="font-size: medium; font-family: Trebuchet MS,Verdana,Arial,Helvetica,sans-serif;"><span style="font-size: medium; font-family: Trebuchet MS,Verdana,Arial,Helvetica,sans-serif;"><span style="font-family: courier new,courier,monospace; font-size: small;"><img src="http://aulavirtual.tecnologicocomfenalcovirtual.edu.co/aulavirtual/draftfile.php/88515/user/draft/10972433/ejemplo-imagen-curso-animado.gif" alt="imagen de ejemplo animada" height="203" width="279" style="border: 3px solid #16347f;" /></span></span></span></span></p>

</td>

<td style="width: 2%;"></td>

<td colspan="3">

<p><span style="font-size: medium; color: #ffffff; font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;">Con este curso, el <strong>docente NTIC avanzado</strong> podra copiar el codigo "HTML" de este curso y usarlo en su propia aula virtual con sus estudiantes.</span></p>

<p><span style="font-size: medium; color: #ffffff; font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;"><br />Se recomienda "comentar" siempre el "html". &lt;!--  --&gt; y llevar un resgitro de codigo.</span></p>

</td>

</tr>

<tr>

<td colspan="5"></td>

</tr>

</tbody>

</table>

<p></p>

<!--::::::::::::::::::::Aquí Termina el primer ejemplo de la tabla:::::::::::::::::::::::-->

<p></p>