Blog

Cómo tunear la portada de tu curso Chamilo

tuneaportada

En más de una ocasión me he encontrado con clientes que quieren organizar un curso en Chamilo a su manera. Quieren poner los iconos en un orden en particular, no les gusta los iconos por defecto, los nombres de cada herramienta no les resultan lo suficientemente significativos, etc.

Si estás en alguno de estos casos que acabo de citar, el vídeotutorial de hoy te va a resultar muy interesante, ya que hoy te quiero contar…

Cómo tunear la portada de tu curso Chamilo

Chamilo cuenta con una zona en la parte superior de los cursos que te permite las máximas posibilidades para tunear la portada de tu curso y adaptarlo al 100% a tus necesidades. Se trata de un área con un editor html en la que, además, también podemos meter código html «a pelo» para lograr aquellos efectos gráficos más elaborados que no podemos lograr sólamente con el editor.

Las aplicaciones de esta sección tuneable son infinitas:

  • incrustar un vídeo de presentación del responsable del máster/curso;
  • agregar una guía personalizada de cómo se va desarrollar el curso,
  • subir una imagen con el título del curso y las fechas destacadas;
  • reemplazar los iconos por defecto por los iconos de tu gusto;
  • ordenar y personalizar al máximo el orden de los elementos que se mostrarán al alumno en pantalla y su nomenclatura…

Como puedes ver, el límite está en tu imaginación y no en la herramienta. Así que, dentro vídeo…

Espero que este vídeotutorial te haya sido de utilidad y me encantaría saber si has conseguido tunear tu portada de curso Chamilo, así que no dudes en contarme cómo te ha ido en los comentarios de esta entrada.

Noa Orizales Iglesias
Desde Contidos Dixitais ayudo a otras empresas a implantar en su organización la plataforma de software libre y e-learning Chamilo. Creo en compartir más que en competir y por eso me encontrarás ayudando en lo que pueda en diferentes redes sociales.

Comentarios

21 Comentarios

  1. rodrigo

    Hola.
    Me gusta mucho este tutorial, estuve intentando hacer un meno personalizado con html y me funcionó, pero no supe donde colocar la hoja de estilos css. ¿me podrías decir donde tengo que colocarla?

    Saludos y gracias.

    Responder
    • Noa Orizales Iglesias

      Hola Rodrigo,

      Para crear el menú de portada personalizado tienes que usar el css directamente en la sección de edición html. Chamilo trae por defecto un script que borra cualquier código css que exista en determinadas secciones, para aumentar la seguridad y evitar ataques.

      Si tienes acceso al ftp de tu campus, entonces puedes colocarlo en la carpeta del css general de Chamilo.

      Responder
      • Rodrigo

        Noa, gracias por tu respuesta tan pronta.

        Dicen que tengo que colocar el archivo style.css en la carpeta general de estilos. ¿Cuál es esa carpeta?

        Si lo agrego directo en el editor de fuentes html, ¿cómo debería agregarlo?
        No soy muy experto en el tema.

        Saludos y gracias.

        Responder
        • Noa Orizales Iglesias

          Hola Rodrigo. Si no tienes mucha práctica con el css, ten cuidado al manipularlo en Chamilo porque puedes romper los estilos y hacer que todo se vea mal en un instante.

          Para modificar los estilos css generales, debes acceder al directorio main/css/ buscar la carpeta d tu tema gráfico, por ejemplo Chamilo_electric_blue y dentro de esa carpeta encontrarás el archivo default.css. Ahí debes hacer el reemplazo o añadir las partes de código css que necesites.

          Si lo quieres meter dentro del editor html, tienes que introducir todo el código en la raíz del documento como en una hoja de estilos normal.

          Responder
  2. Alejandro Mejia

    Hola,

    Estamos creando un curso y queremos tener varios profesores colocando contenido en el mismo, esto es posible??? o debe haber un solo administrador por curso

    Gracias por tu apoyo

    Responder
    • Noa Orizales Iglesias

      Hola Alejandro, por supuesto que puedes tener varios profesores a la vez en un curso. Sólo tienes que matricularlos en ese curso desde la sección de usuarios (como profesores).

      Sólamente comentarte que para preguntas que se salgan del tema de este post, puedes continuar usando el foro de la comunidad Chamilo dónde también participo y te podré ayudar: http://www.chamilo.org/forum

      Responder
  3. juan manuel

    Excelente videotutoriales , estoy recién adentrándome a esta plataforma y me parece que tiene un potencial increíble. saludos.

    Responder
    • Noa Orizales Iglesias

      Muchas gracias por tu comentario Juan Manuel. En breve trataremos de sacar a la luz algunos tutoriales más sobre temas que os puedan intersar. No nos pierdas de vista y síguenos también en Youtube.

      Responder
  4. Jorge

    Hola Noa!

    Quiero decirte que me encantan tus artículos, los he aprovechado como no te imaginas, además de que cada día reafirmo que Chamilo es la mejor plataforma LMS que existe.

    Tengo una pregunta un poco fuera de tema, pero relacionada con tunear la presentación visual. Existe alguna manera de agregar o modificar los templates de las lecciones dentro de Chamilo (rich media page)? He buscado información pero no he encontrado la manera de hacerlo.

    Te agradezco de antemano tu apoyo y no dejes de seguir escribiendo estos fantásticos tutoriales!

    Responder
    • Noa Orizales Iglesias

      Hola Jorge. te refieres a los templates como las plantillas de contenido html que se muestran an la zona derecha de una lección o al frame completo en el que se muestran las lecciones (con su árbol de contenidos, etc.) ???

      Responder
      • Jorge

        Hola Noa

        Me refiero a las plantillas con las que se crea cada lección, existen varias predeterminadas, algunas con imagen y fondo azul, dos columnas, etc. Yo quiero modificarlas o hacer algunas nuevas.

        Mil gracias por tu respuesta

        Responder
        • Noa Orizales Iglesias

          Hola Jorge,

          Si, claro que puedes modificar esas plantillas. Puedes hacerlo desde la pestaña administración >> Parámetros de configuración de Chamilo. Ahí tienes un icono con forma de hoja perforada que corresponde a las plantillas. Desde ahí puedes agregar una nueva y que esté disponible para todos tus cursos.

          Responder
          • Jorge

            Genial! Muchas gracias!

  5. Orlando

    Hola Noa muchas gracias por el tutorial, lo e probado pero el momento de llevarlo a un smartphone o una tablet los iconos cambian de posición y se desconfiguran.

    Responder
    • Noa Orizales Iglesias

      Hola Orlando. Me alegra que te haya resultado útil. Para que sea responsive hay que meter el código en columnas como si lo hicieses responsive para cualquier otra web. En el vídeo no está explicado pero tomamos nota para un futuro tutorial. Gracias.

      Responder
  6. islandia

    muy buenos tutoriales, una duda, al momento de crear un efecto css hover como el ejemplo que muestras que al pasar el mouse sobre la imagen esta salta..en mi editor coloco el codigo en la fuente HTML pero al dar guardar, este codigo efecto css desaparece..quedando la imagen sin el efecto. Este error me sucedía en otras plataformas y lo solucionaba desactivando algún parametro del editor WYSiWYG, pero en Chamilo donde puedo corregir esto?

    Responder
  7. Cat

    ¡Fantástico vídeo que a demás da muy buenas ideas! Personalmente estoy un poco limitada porque no sé HTML, así que una buena idea es partir de un código y modificarlo (equivocándome un millón de veces claro jejej) ¿Sería posible que compartieseis el código de la portada en la que se mueven los iconos? ¡Queda realmente genial! Mil gracias, un abrazote.

    Responder
    • David C

      Como bien dices, la mejor forma de aprender es mediante la técnica de ensayo y error.
      El código puedes verlo a través del inspector de elementos de tu navegador y sobre él puedes realizar cambios sin que éstos afecten al código original.
      Básicamente el diseño es una tabla de 4×2 en el que en cada celda hay un icono con una pequeña animación y un texto inferior, ambos con un enlace a la sección que hacen referencia.

      Responder
      • Cat

        David, qué eficiencia ¡Mil gracias por la rápida respuesta! Justo he hecho alguna prueba de ese tipo y he llegado a pre visualizar en la portada de mi curso de Chamilo, pero al guardar…bye bye. Por eso trataba de buscar algo que con seguridad funcionase en Chamilo para copiar el código, pero desde vuestro vídeo no puedo : (
        Seguiré con pruebas o buscaré una alternativa estética que me guste.
        ¡Gracias de nuevo!

        Un abrazo

        Responder
    • David Cardeña Formoso

      Como bien dices, la mejor forma de aprender es mediante la técnica de ensayo y error.
      El código puedes verlo a través del inspector de elementos de tu navegador y sobre él puedes realizar cambios sin que éstos afecten al código original.
      Básicamente el diseño es una tabla de 4×2 en el que en cada celda hay un icono con una pequeña animación y un texto inferior, ambos con un enlace a la sección que hacen referencia.

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.