miércoles, 3 de julio de 2013

COMENZAMOS CSS Y MOODLE

Esta semana la estamos dedicando a 3 tareas básicamente:

1. Aprender a trabajar con hojas de estilos.

Qué es CSS o Hojas de estilos por cascada

Existen tres formas de implementar CSS en una página web:


1. En la misma página como el estilo general ya sea en <head> y </head> o en <body> y </body>:


<style><!-- estilo --></style>

2. Directamente en una etiqueta HTML dentro de <body> y </body>.


<etiqueta style="-- estilo --"> -- Contenido -- </etiqueta>

3. Como archivo independiente de extension .css únicamente en <head> y </head>


<link type='text/css' rel='stylesheet' href='http://tusitio.com/estilo.css' />

Para ubicar la posición correcta dentro una web

La estructura de una página web funciona de la siguiente manera:

<html>

<head>

-- códigos javascript, estilos y elementos no visibles --
</head>
<body>
-- Tablas, Div, object, imagenes, texto, algunos tipos de scripts, todo lo que será visible dentro de la página --
</body>
</html>

Caso 1


Para el primer caso, usualmente iría en las etiquetas <head> y </head> Si va dentro de body en casos muy especiales como en un tutorial de CSS o HTML tendría que venir comentado todo el contenido para que no aparezca visible, esto es encerrándo el código dentro de <!-- y -->, debe además agregarse type='text/css' en la etiqueta <style>


Ejemplo:


<head>

<style type='text/css'>
<!--

.p {color:#c00;}

-->
</style>

</head>


o (no recomendable):


<body>
<div>

<style>
<!--

p {color:#c00;padding:6px 10px;}

-->
</style>

</div>
</body>

Caso 2


Dentro de una etiqueta html podemos asignar directamente CSS propiedades, pero se debe estar conscientes que por ejemplo; vínculos u otros elementos que requieran el uso de sub-clases y sub-elementos por ejemplo a:link, a:hover y a:visited, solamente se podrán crear dentro de un archivo CSS o declarados en <style> y </style>.


Ejemplo


<div style="width:500px;height:200px;background:#000;">
<p style="margin-top:0;margin-left:15px;">

Esto es un texto</p>

<img style="border:1px solid #f0c;" src="imagen.jpg" />
</div>

Caso 3


Podemos hacer un archivo CSS con un archivo de texto que le cambiamos la extensión a .css y escribimos las reglas dentro de este archivo y luego cargarlo mediante la etiqueta <link />, siempre dentro de <head> y </head>


Ejemplo (deben agregarse los atributos type='text/css' rel='stylesheet' dentro <link />):

<head>
<link type='text/css' rel='stylesheet' href='http://tusitio.com/estilo.css' />
</head>

Fuentehttp://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/

2. Instalar y configurar la plataforma Moodle.


Paso 1: Ingrese al sitio oficial de moodle con la siguiente dirección (URL): http://moodle.org/. Aparecerá en el idioma inglés por defecto. Si desea cambiarlo a Español debe seleccionar el idioma.

Paso 2: Seleccione el menú desplegable “Descargas” de la barra de menús ubicado en la parte superior del sitio y haga clic en la opción “Moodle para Windows”. Debe aparecer una página que le mostrará las últimas versiones de moodle habilitadas para el sistema operativo.

Nota: Otra forma rápida de ingresar a esta opción es digitar directamente la siguiente dirección desde su navegador: http://download.moodle.org/windows/.

Paso 3: Seleccione la última versión haciendo clic en el link denominado “Download”. Inmediatamente debe iniciar el proceso de descarga del archivo, si esto no sucede verifique que su navegador no esté bloqueando la ventana de descargar, esto sucede cuando aparece un mensaje en la parte superior del navegador.
Para habilitar la descarga en este caso, haga clic en el link “Descargar archivo” ó “Download File”.
Recuerde que moodle es un software libre de código abierto (no hay que pagar por él), que se distribuye bajo una licencia denominada GPL (Licencia Pública General de GNU, más conocida por su nombre en inglés GNU General Publical License).

El paquete de software que se descarga para la instalación contiene: el software moodle y software adicional necesario para su funcionamiento en el sistema operativo:

    1. Apache (servidor de Internet),
    2. MySQL (base de datos) y
    3. PHP (lenguaje de programación en el que está construido moodle).

Este software adicional está construido en una distribución llamada XAMPP (versión lite o ligera), la cual hace que sea muy sencilla su instalación y configuración, además contiene una pequeña aplicación de control, que se instalará junto con todo el paquete.

El archivo que se descarga debe tener un nombre similar a:
MoodleWindowsInstaller-latest-19.ZIP, ya que está en un formato de archivo comprimido denominado ZIP.

Paso 4: Una vez se termine la descarga, descomprima el archivo haciendo doble clic en él, con ello se debe descomprimir (crear) una carpeta llamada “C:\Server” y tres archivos más: “Start Moodle.exe”, “Stop Moodle.exe” y “README.TXT.
    -          'Start Moodle.exe': Inicia el funcionamiento del servidor moodle.
La primera vez que se ejecuta el archivo se termina de instalar el paquete XAMPP y el software de moodle. Posteriormente se inician las aplicaciones de Apache (httpd.exe) y Mysql (mysqld.exe), necesarias para el correcto funcionamiento de moodle.
    -          'Stop Moodle.exe': Detiene el funcionamiento de servidor Moodle y de las aplicaciones de Apache y Mysql.
    -          'README.TXT':
    -           Archivo texto con instrucciones sobre cómo iniciar Moodle.

Paso 5: Haga doble clic en el archivo “Start Moodle.exe” para que se inicie la ejecución del servidor moodle.

Nota: Para detener la ejecución del servidor Moodle debe ejecutar el archivo 'Stop Moodle.exe'

Paso 6: Abra su navegador de Internet e ingrese a su sitio moodle usando la siguiente dirección http://localhost, automáticamente se ejecutará el archivo http://localhost/install.php que le solicitará algunas opciones de configuración.

Seleccionar idioma: Empiece seleccionando el idioma “Español – Internacional (es)”, al hacerlo, deberá aparecer el mensaje “Por favor, seleccione un idioma para el proceso de instalación”, para continuar haga clic en el botón “Siguiente” de la parte inferior de la página.

Paso 7: Comprobar ajustes PHP: el sistema inicia automáticamente una verificación de la configuración del lenguaje de programación PHP. Su servidor debería pasar todas las comprobaciones.

Paso 8: Confirmación de las direcciones de instalación: el sistema le pedirá que confirme las siguientes direcciones de la instalación de Moodle, por favor no cambie estas direcciones.

    -          Dirección Web: Especifica la dirección web a través de la que se accederá a Moodle.
    -          Directorio Moodle: Especifique la ruta completa de esta instalación.
    -          Directorio de Datos: Lugar donde Moodle puede guardar los archivos subidos.

Paso 9: Ahora necesita configurar los ajustes de la base de datos donde se almacenarán la mayoría de los datos de moodle. El instalador creará la base de datos con los siguientes ajustes:

    -          Tipo: fijado a "mysql" por el instalador
    -          Servidor (Host): fijado a "localhost" por el instalador
    -          Nombre de la base de datos: moodle (por favor no cambiar)
    -          Usuario: el valor por defecto es "root", fijado por el instalador
    -          Contraseña: contraseña de la base de datos (dejar en blanco)
    -          Prefijo de Tablas: prefijo opcional utilizado por todos los nombres de las tablas (por favor no cambiar).

Paso 10: Comprobando el entorno del servidor, se comprobará de manera automática si los diferentes componentes de su servidor cumplen con los requerimientos mínimos de sistema.

Paso 11: Descargar paquete de idioma, ahora tiene la opción de descargar el paquete de idioma y continuar con el proceso de instalación en ese idioma.

Paso 12: Configurar el perfil o cuenta del administrador del sitio moodle, para continuar debe ingresar los datos de la cuenta (perfil) del administrador.
Ingrese la “Nueva clave” o “New password”, la cual debe tener mínimo 8 caracteres, entre ellos al menos un digito (número entre 0 al 9), una letra mayúscula, una letra minúscula y un carácter no alfanumérico (que no sea ni letra ni número).

También debe ingresar una dirección de correo en el campo “Email address” y seleccionar su ciudad y el país en los campo “Citytown” y “Select a country” respectivamente, todos estos campos son obligatorios.
Por favor no cambie los otros campos por el momento.

Paso 13: Para continuar seleccione la opción Actualizar perfil “Update profile”.

Paso 14: A continuación el sistema le pedirá un nombre largo y uno corto para su sitio moodle, ingrese estos datos en los campos.

Paso 15: Para terminar seleccione la opción Salvar cambios “Save changes”, de la parte inferior de la ventana.

Paso 16: Llegamos al final…, su sitio ha sido configurado apropiadamente y está listo para que realice las prácticas de creación de cursos.

Recuerde que para detener el funcionamiento del servidor moodle debe ejecutar el programa “Stop.

Por el contrario, si lo que desea es ingresar de nuevo, primero debe ejecutar el archivo “Start.

Moodle.exe”, y luego abrir su navegador y escribir http://localhost, en este caso el sistema le pedirá su usuario y la clave, debe usar Admin y Prueba_123.

3. Trabajar en los materiales didácticos E-Learning.

No hay comentarios:

Publicar un comentario