Creación de espacios web y cursos on-line con Exelearning
Ocultar
Bienvenidos al curso Creación de espacios web y cursos on-line con Exelearning,
Se trata de un curso Online con un total de 16 horas de duración dirigido a PAS y PDI de la Universidad de Valencia. Mediante este curso se pretende que el alumno pueda llegar a alcanzar unos conocimientos básicos del programa Exelearning que le permitan diseñar de forma sencilla un sitio web y alojarlo en el espacio web de la universidad. En el menú de la izquierda se encuentran todos los apartados que se tratarán en el curso. A través de ellos se permite una navegación tanto continua como discontinua, es decir, se puede seguir el orden de los contenidos o pasar de un bloque a otro de forma indistinta. Es recomendable seguir el orden establecido, aunque si algún usuario ya tiene conocimientos sobre alguno de los bloques puede saltarlo y pasar a otro. Se trata de un programa fácil e intuitivo que permite crear un sitio web sencillo sin nociones de programación.
Objetivos:
– Adquirir conocimientos web básicos.
– Planificar y diseñar correctamente páginas web sencillas.
– Crear un sitio web con Exelearning y subirlo al servidor web de la UV.
Contenidos:
– Breve introducción al diseño web y a la creación de recursos educativos.
– Introducción a Exelearning: filosofía del proyecto, instalación e interfaz.
– Entorno de trabajo:
Menú superior y árbol de contenidos.
Tipo de actividades.
Editor de actividades.
– Los estilos: conocimientos básicos de CSS para modificar un estilo.
– Exportación: como sitio web / como paquete Scorm.
– Subida en el espacio web de la UV / Subida a Moodle (Scorm).
Metodología y Evaluación
El curso se plantea a modo de manual de consulta en el que se explican nociones básicas de Exelearning. Es obligatoria la asistencia al 85% de las horas presenciales y la nota final constará como APTO/NO APTO. Se evaluará en base a un único ejercicio final obligatorio que consistirá en la realización de un sitio web sencillo creado con Exelearning que demuestre los conocimientos vistos en el curso. Este sitio web deberá subirse al espacio web de cada usuario, nos referimos al espacio de la universidad, para poder ser evaluado. Las dudas serán tratadas a través del correo electrónico y en las dos clases presenciales.
Herramientas para la realización del curso
Para la realización de este curso serán necesarias las siguientes herramientas:
– Software Exelearning.
– Navegador actualizado (Firefox, Safari, Chrome o Internet Explorer).
– Bloc de notas o editor HTML para modificar las hojas de estilo (CSS).
=
=
Requititos mínimos que ha de tener nuestro sitio web para aprobar
– Estar hecho con Exelearning.
– Estar subido en nuestro espacio web de la Universitat de València.
– Tener al menos 5 ítems en el menú, es decir, tiene que contener como mínimo 5 páginas con contenido (independientemente de cual sea la estructura jerárquica de las páginas).
– Contener al menos 1 vídeo embebido de cualquier plataforma (Mmedia, Vimeo, Youtube, etc.)
– Contener al menos 3 imágenes y una de ellas que tenga la función de enlace (que sea un hipervínculo que lleve a una página interna o externa).
– Contener al menos tres enlaces dentro del texto (a páginas internas o externas), sin contar los enlaces que genera el propio menú.
– Contener al menos un cuestionario de cualquier tipo con un mínimo de tres preguntas (puede ser cualquiera de las Actividades interactivas).
– Contener una cabecera personalizada, es decir, modificar la cabecera de uno de los estilos predeterminados.
El tema de vuestro sitio web es totalmente libre.
Introducción a Exelearning
Exelearning sirve para ayudar a los docentes en la creación y publicación de contenidos web que albergan diferentes recursos como enlaces, vídeos, actividades, cuestionarios, imágenes, etc. Es una aplicación multiplataforma, desarrollada en Python, que funciona en Linux, Windows y McOS.
Los recursos elaborados con eXe pueden exportarse en diferentes formatos: IMS, SCORM 1.2, SCORM2004, IMS, ePub3… también como páginas web navegables en HTML. Una vez exportado a cualquier formato se pueden publicar los contenidos en un espacio web o en las plataformas denominadas LMS (Learning Management System) como por ejemplo en Moodle, Sakai o en el Aula Virtual de la UV. A continuación se esplica en qué consiste un LMS o Sistema de Gestión de Aprendizaje:
LMS. Sistema para la gestión del aprendizaje from Yolanda Corral
El proyecto eXe Learning surgió financiado por el Gobierno de Nueva Zelanda y coordinado por la University of Auckland, The Auckland University of Technology, y Tairawhiti Polytechnic. Actualmente este proyecto está parado aunque recientemente han surgido nuevas líneas de desarrollo promovidas por instituciones españolas como el denominado proyecto Forja Cenatic (Cenatic es el Centro Nacional de Referencia de Aplicación de las TIC basadas en fuentes abiertas) en el que están implicados diferentes desarrolladores que van publicando nuevas versiones. También desde el CeDeC (Centro Nacional de Desarrollo Curricular) con el apoyo del INTEF (Instituto Nacional de Tecnologías Educativas y de Formación del Profesorado) y otras instituciones se está trabajando en el desarrollo de esta herramienta creando nuevas plantillas y realizando mejoras. Algunos de los proyectos que se sustentan bajo el software de Exelearning son: el proyecto CREA (Contenidos y Recursos Educativos de Andalucía), de acceso abierto, o la producción de materiales para la Formación Profesional, de acceso restringido.
El hecho de que sea posible la colaboración y el desarrollo por parte de diferentes instituciones y desarrolladores radica en que ExeLearning es una herramienta de autor de código abierto y por ello cualquier persona con conocimientos de programación informática puede desarrollar nuevos avances en la herramienta o participar en la creación de plantillas. El programa tiene Licencia Pública General GNU, en inglés GNU General Public License (**GNU GPL**), esta licencia garantiza a los usuarios (personas, organizaciones, compañías) la libertad de usar, estudiar, compartir (copiar) y modificar el software. El programa se basa en la filosofía del software libre y se pretende garantizar su uso a todos los usuarios y protegerlo de intereses económicos.
Gracias al desarrollo de estas instituciones españolas, el programa ha mejorado en algunos aspectos que conviene tener en cuenta (aquí presentamos las mejoras más relevantes aunque hay más):
Actualmente eXeLearning utiliza el navegador predeterminado de tu equipo (Firefox, Chrome, Safari…) sin presentar problemas que antes ocurrían si no se usaba Firefox.
El entorno de trabajo es más flexible e intuitivo. Ahora se permite personalizar el listado de iDevices y además se presentan en modo de desplegable.
El editor de contenidos es una versión mejorada del editor de código abierto TinyMCE (con nuevos botones de citas, fecha, reglas, acrónimos, de código embebido que permite insertar fragmentos de código HTML…)
Se ha incorporado corrector ortográfico pero se debe tener instalado un corrector ortográfico/diccionario en el navegador para que funcione.
Se puede cambiar a modo pantalla completa para ver mejor lo que está editando.
Se han realizado mejoras en las inserciones de vídeos y audios, HTML5 (la inserción de HTML5 es una de las principales novedades), flv, swf, avi, mp3, mp4, …
Se ha incluido la impresión a PDF.
Se han mejorado he incluido nuevos formatos de exportación: SCORM2004, EPUB3 (estándar abierto para e-books y dispositivos móviles),etc.
Hay un gestor de estilos y nuevos estilos, algunos de ellos son //responsive//, es decir, se adaptan al ancho de pantalla de diferentes dispositivos (móvil, tablet…).
Se han incorporado nuevos iDevices agrupados de un modo más amigable.
Se han desarrollado funcionalidades para maquetar imágenes y vídeos sin utilizar tablas.
Podemos encontrar numerosos videotutoriales del programa en el canal de Youtube del CEDEC, estos videotutoriales nos pueden servir de apoyo o ampliación a los contenidos vistos en este curso.
Entre las ventajas y desventajas de Exelearning encontramos:
Desventajas:
No es la herramienta de autor más completa del mercado.
Tiene carencias en el diseño y pequeños problemas de funcionamiento que se van solucionando.
Respeto a estándares, favoreciendo la adaptabilidad e intercambio de nuestros recursos educativos.
(Open Source) Posibilidad de acceder al código fuente y modificarlo.
Posibilidad de crear plantillas de estilo personalizadas.
Los desarrolladores están trabajando en mejorar el programa y por ello no sería de extrañar que en breve pudieramos contar con nuevas actualizaciones. Algunos técnicos del CEDEC están realizando pruebas y subiendo los vídeos de esa versión BETA (versión de prueba) a Youtube. A continuación tenemos un vídeo en el que se indica que próximamente podremos subir directamente los contenidos a Google Drive:
Conceptos básicos en el diseño de una página web
Uno de los términos más importantes a la hora de definir la estructura de un sitio web es el término de Usabilidad. Como explica Steve Krug en su libro “No me hagas pensar”:
“[…] Todo lo que con ello quiero decir es que, hasta lo que humanamente es posible, cuando se mire una página web ésta ha de ser obvia, evidente, clara y fácil de entender. Tendría que poder entenderla (qué es y cómo usarla) sin agotar esfuerzos pensando en ella”.
Esta cita resume perfectamente lo que se entiende por usabilidad y básicamente se refiere a que nuestro sitio web, por muy complejo que resulte, sea siempre fácil de usar y que todos los elementos se puedan localizar fácilmente sin que el usuario tenga que hacer un excesivo esfuerzo y, sobre todo, sin que acabe cerrando la página por no encontrar lo que busca…es muy importante que la navegación quede clara y el usuario sepa siempre dónde está y cómo volver a otras páginas. Por ello, lo mejor de desechar desde un principio la información que no nos resulte de utilidad, evitar las redundancias, evitar los excesos en el diseño (sobre todo gifts animados y elementos excesivamente coloreados) y dejar lo que realmente es necesario y organizarlo de una forma coherente y útil.
Aunque Exelearning no nos va a dar mucho a la elección propia sino que el diseño está totalmente guiado, es aconsejable es plantearse unas preguntas básicas previas a la elaboración de nuestro sitio y estructurarlas en torno a los siguientes puntos:
Finalidad del sitio: Es muy importante tener claro cual es nuestro objetivo, debemos preguntarnos qué es lo que queremos mostrar y que información no debe faltar. Para ello es importante ver a quién nos vamos a dirigir (factores culturales, características sociales de nuestro público…). Puede ser una web muy especializada en un determinado tema o muy generalista, de ello dependerá también el tipo de lenguaje empleado. Este es el primer paso para que todo quede buen definido, para ello podemos hacer un listado con los contenidos que no pueden faltar a modo de lluvia de ideas.
Mapa del sitio: se ha de definir la arquitectura de nuestro sitio web, es decir la distribución de los contenidos, para ello es importante preguntarnos cómo queremos estructurar la información. Lo importante es tener una visión de conjunto y lo más útil para conseguirla es realizar un mapa o diagrama de flujo donde aparezcan todas las páginas de nuestro sitio y los enlaces del menú u otros enlaces que deriven en páginas de nuestro sitio (no será necesario establecer los enlaces externos, es decir, enlaces a otras webs). Este paso es de los más importantes ya que define la jerarquía del sitio y todas sus categorías. Un ejemplo de diagrama para una web muy sencilla formada por 7 páginas y tres niveles de navegación (marcados en tres colores diferentes) sería el siguiente:
Diseño de la interfaz: Es importante para organizar correctamente la página definir la interfaz de cada una de las páginas, es decir, delimitar los menús de cada página, los enlaces, las imágenes (por ejemplo si hay alguna galería de imágenes). Esto se puede realizar con un boceto aproximado de lo que será cada página. De todos modos, este boceto no será nunca definitivo ya que se podrán incorporar al sitio nuevos enlaces o nuevas páginas según vayamos necesitando modificaciones en nuestra web.
Descarga e instalación del programa
Al tratarse de un programa de código abierto, diferentes desarrolladores pueden trabajar de manera paralela en las actualizaciones. Desde la página oficial de los creadores del software se puede descargar el programa original, pero es un software que no se ha ido desarrollando desde hace más de un año porque, como ya se ha comentado, el proyecto está parado. A continuación, se puede ver una imagen de la página de Exelearning creada en origen, se puede visitar el sitio y descargar el software en http://exelearning.org/ .
Captura de pantalla de Exelearning.org
Al margen de la página oficial, hay otras versiones más actualizadas, y por lo tanto más recomendables, que contienen mejoras en el software, así como numerosas plantillas de estilo. Este es el caso de la versión desarrollada en España por parte de diferentes instituciones (INTEF, CeDeC, TodoFP, TKNIKA, Formación permanente de la Junta de Andalucía, Grupo MAX ,etc.) Esta versión se puede descargar en la página http://exelearning.net/ y será la que trabajemos durante el curso.
Captura de pantalla de Exelearning.net
La instalación es sencilla e intuitiva y, resulta prácticamente igual para los diferentes sistemas operativos. Tan sólo se tiene que descargar el software al ordenador, desde la pestaña de descargas, y seguir los pasos que se indican.
Pantalla de descargas
Si tomamos como ejemplo el caso de Windows hemos de ir a Exelearning 2.0.3 – Versión instalable (las otras dos versiones no se instalan en el ordenador sino que se ejecutan directamente sin necesidad de instalación). Nos aparece una ventana en las que se nos pide permiso para guardar el archivo, hemos de aceptar.
Tras guardar, tenemos que ejecutar el archivo de instalación. En Mac a continuación tenemos que arrastrar el icono de eXe a la carpeta Aplicaciones. Una vez instalado el programa se nos creará un icono en el escritorio desde el que podremos acceder al programa, también se podrá acceder al programa desde Inicio.
Al ejecutar eXeLearning por primera vez, nos aparecerá una ventana de preferencias desde la que hemos de seleccionar el idioma y elegir el navegador en el que queremos trabajar. Si desmarcamos la casilla que aparece abajo no nos volverá a aparecer la ventana cada vez que ejecutemos el programa. Podremos volver a acceder a esta ventana desde Menu superior > Utilidades > Preferencias. De este modo podemos volver a cambiar el navegador que queramos usar como predeterminado.
El entorno de trabajo
El entorno de trabajo se divide en 4 partes bien diferenciadas: el menú superior, el árbol de contenidos, el bloque de actividades y el área de trabajo. A continuación podemos observar el entorno dividido por colores.
Menú superior
Árbol de contenidos
Bloque de actividades
Área de trabajo
Menú superior: se trata de un menú para gestionar los archivos, las exportaciones, los estilos, etc.
Árbol de contenidos: desde aquí visualizamos la estructura del sitio, también es desde aquí desde donde añadimos nuevas páginas y subpáginas.
Bloque de actividades: se trata de un menú que contiene los diferentes iDevices, es decir, las diferentes actividades que se pueden incluir.
Área de trabajo: desde la pestaña “Autoría” trabajaremos en los diferentes contenidos o actividades creadas y en “Propiedades” podemos incluir metadatos (etiquetas que describen las características del contenido y que servirán para su posterior localización).
Menú superior
En el menú superior nos encontraremos las opciones necesarias para realizar tareas básicas como abrir, guardar, seleccionar estilos, imprimir, exportar, etc. A continuación explicamos cada uno de los ítems del menú más detalladamente.
Archivo
Al desplegar el menú Archivo encontramos diferentes opciones.
Nuevo / Ventana nueva / Abrir / Proyectos recientes
Nuevo: abriremos un nuevo archivo completamente vacío.
Ventana nueva: abriremos en una pestaña nueva una copia del archivo que estamos trabajando.
Abrir: abriremos el explorador de archivos de eXeLearning y desde aquí podremos incorporar archivos compatibles (estos son archivos .elp creados en eXelearning).
Proyectos recientes: se muestra el listado de los cinco últimos proyectos de eXe en los que hemos trabajado, este listado se puede eliminar.
Guardar / Guardar como…
Hemos de ir guardando los cambios a medida que trabajamos en nuestro proyecto. Al guardarlo por primera vez pincharemos en Archivo> Guardar cómo y le daremos el nombre y la ruta que consideremos (la seleccionamos donde pone Guardar en:), para cambios posteriores iremos a Archivo> Guardar.
Al guardar el proyecto se nos crea un archivo con formato .elp .Este es el fichero que utilizaremos para trabajar, aunque será el fichero resultante de la exportación el que nos permitirá subir nuestros contenidos a un LMS o a un espacio web.
Imprimir
El programa nos permite imprimir los contenidos, dependiendo del ordenador (Windows, Linux, Mac) y de la impresora configurada, la ventana que nos aparecerá será diferente. En este caso el ordenador utilizado es un Mac y la impresora un modelo de Ricoh, la ventana que nos aparece es la siguiente. El resultado de la impresión dependerá del estilo que usemos y de las opciones de impresión que seleccionemos.
En el caso de los usuarios de Mac, si queremos exportar la impresión a .pdfmarcaremos en el desplegable de abajo Guardar como PDF. Por otro lado, los usuarios de Windows deberán tener instalada una aplicación del tipo PDF Creator para poder guardar en .pdf. Para usuarios de Linux el proceso es sencillo: haremos clic en Archivo > Imprimir. En la ventana que se abre, se nos mostrará una previsualización del contenido y las opciones de impresión del navegador.
Importar : HTML / Archivo XLIFF
El programa nos permite importar tanto archivos en formato XLIFF* como HTML y Metadatos. Pero, por la duración y objetivos del curso, no entraremos a detenernos en estas cuestiones más avanzadas.
*XLIFF es un formato de archivos que se emplea para la traducción de contenidos.
Exportar
eXeLearning nos permite exportar los contenidos generados a diferentes formatos para después integrarlos en diferentes soportes y entornos de aprendizaje. Los veremos brevemente ya que hemos incluido un apartado dedicado exclusivamente a la exportación.
Nos permite exportar a diferentes formatos estándar de e-Learning para poder integrarlos en plataformas de gestión de aprendiaje (LMS) como Moodle, Dokeos, etc., se trata de los formatos Paquete Common Cartridge, SCORM y paquete de contenido IMS.
Nos permite exportar como sitio web que mantiene la estructura de menú de páginas que hemos creado. Para ello hemos de exportar como carpeta auto-contenida, como archivo comprimido .zip obtenemos el mismo resultado pero con todos los archivos dentro de una carpeta comprimida .zip. Por otro lado, al exportar como Página HTML única volcamos todo el contenido en una única página web sin la estructura creada en el árbol de contenidos.
Podemos exportar como un fichero .txt de texto plano.
Ustad Mobile es una opción para
Podemos exportar como XLIFF para la traducción de los contenidos.
El último formato en incorporarse a la nueva versión de Exelearning es el EPUB, este nos permite exportar el proyecto a un formato que se puede leer en un libro electrónico (ebook.)
Fusionar ELPs: Insertar paquete / Extraer paquete
Para poder reutilizar los contenidos creados podemos insertar materiales creados previamente en exelearning eXeLearning con la opción Insertar paquete, Para ello hemos de seleccionar una página de la estructura desde la que queremos añadir el contenido y mediante la opción “Insertar paquete” lo incorporaremos a nuestro proyecto. Por otro lado, podremos extraer contenidos a un nuevo archivo .elpmediante la opción Extraer paquete y seleccionando las páginas que queramos extraer.
Salir
Hemos de hacer clic en Salir cada vez que queramos cerrar la aplicación. Nos aparecerá una ventana para guardar los cambios, de este modo evitaremos que se nos borren cambios no guardado.
Utilidades
Al desplegar el menú Utilidades encontramos diferentes opciones. A excepción del Gestor de estilos y las Preferencias sobre el navegador y el idioma la mayoría de utilidades están enfocadas a un control más avanzado del programa y por ello no entraremos en profundidad a explicarlas.
Editor de iDevices
Se trata de una opción para usuario avanzado, con este ítem podemos crear, exportar e importar nuevos iDevices.
Gestor de estilos
Mediante este gestor podemos importar un estilo no presente en la aplicación, exportar los instalados y borrar aquellos que no nos interesa tener en el listado sin necesidad de ir a la carpeta del programa en la que se nos han instalado los estilos.
Preferencias
En Preferencias tenemos una pestaña de Configuración general en la que, como hemos comentado en el apartado de instalación, podemos seleccionar el idioma y el navegador que queremos utilizar. Por otro lado, aparece una pestaña llamada Avanzado en la que nos aparecen tres desplegables que nos servirán para:
– Configurar un formato predeterminado para documentos nuevos: podemos elegir entre HTML5 y XHTML.
– Configurar el modo del editor: el modo permisivo aceptará cualquier tipo de código aunque no cumpla con los estándares HTML5 o XHTML.
– Configurar el uso de enlaces internos (esta opción sólo es válida cuando exportamos a sitio web.)
Preferencias, pestaña avanzado
Informe sobre recursos
Al solicitar un informe sobre recursos se crea un archivo CSV en en el que se registran rtodos los elementos y archivos contenidos en el .elp que se está generando. Esta es una opción prevista para grandes proyectos y de utilidad para creadores avanzados.
Visualización previa
La Visualización previa nos permite ver los contenidos creadosen (en HTML) en nuestro navegador predeterminado para hacernos una idea de cual es el resultado final.
Actualizar pantalla
Con esta opción la actualizamos la pantalla para ver los últimos cambios de nuestro trabajo.
Estilos
Desde esta opción podemos elegir cualquiera de los estilos cargados en Exelearning y dependiendo del estilo elegido tendremos un aspecto visual u otro. Con unos pocos conocimientos de CSS podemos modificar los estilos existentes para crear unos nuevos y si se tienen conocimientos avanzados podremos crear nuestros propios estilos partiendo de cero. En el apartado dedicado a los estilos se explicará brevemente cómo cambiar un estilo preestablecido para adaptarlo a nuestras necesidades.
Ayuda
En el apartado de Ayuda tenemos acceso a contenidos extra como tutoriales y manuales de eXe, notas de la versión que tenemos instalada y enlaces al sitio web y los foros de eXeLearning.net donde podemos realizar preguntas, notificar errores y pedir nuevas funcionalidades.
Árbol de contenidos
Con el árbol de contenidos podemos ir creando un menú de navegación estructurado en diferentes apartados o unidades para que los contenidos no sean presentados en una sola página, de este modo facilitaremos al usuario la navegación por nuestro sitio. Por defecto al abrir el programa aparece un primer nodo o página del menú denominada “Inicio”, desde esta portada colgarán el resto de contenidos que vayamos creando.
Podemos modificar el nombre de este nodo al hacer doble clic sobre el nodo en el árbol de contenidos o, si lo tenemos marcado, al hacer clic en Renombrar. Esto lo podemos hacer con todos los nodos que vayamos creando.
Añadir / Borrar página
Añadiremos nuevos nodos o páginas seleccionando el nodo del que queremos que cuelguen los nuevos contenidos y haremos clic en página Añadir página. Para borrar una página la hemos de seleccionar y, a continuación, hemos de hacer clic en Borrar. Al borrar una página no sólo borramos el ítem del menú sino que eliminamos todo su contenido y también las páginas que cuelgan de ese nodo.
A continuación se puede observar cómo quedaría el menú creado en el árbol de contenidos una vez exportado como sitio web (en este caso con el estilo INTEF). Al no haber contenidos creados, el espacio de la derecha se ve en blanco.
Trasladar páginas del menú y cambiar su jerarquía
Si por alguna cuestión queremos modificar el orden de alguno de los ítems del menú o crear dependencias entre las páginas, es decir, que una página ya creada se convierta en un subapartado de otra, hemos de marcar la página que queremos mover o incluir dentro de otra y hacer clic en las flechas inferiores.
Cambiar la jerarquía de los nodos: para insertar una página dentro de otra, y hacer que dependa de ésta, hemos de hacer clic en las flechas que llevan una línea dibujada en la punta.
Cambiar el orden de los nodos: para cambiar el orden de las páginas se ha de hacer clic en las flechas sin línea.
Actividades
Los iDevices son las herramientas que nos permiten insertar actividades y contenidos de diversa índole en Exelearning (textos, galerías de imágenes, actividades de elección múltiple, etc.) Los desarrolladores del programa han ido perfilando cada vez mejor los diferentes iDevices hasta agruparlos en las categorías que tenemos actualmente organizadas según sus funcionalidades. Podemos crear nuevos iDevices dependiendo de nuestras necesidades aunque para ello hemos de tener conocimientos avanzados. En esta nueva versión de Exelearning, los iDevices se muestran agrupados por bloques de actividades según el tipo de información que representan (se pueden agrupar o desagrupar haciendo clic en el botón “Desagrupar los iDevices”). Además el usuario puede elegir los iDevices que quiere que se muestren marcando el botón “Editar los iDevices”, de este modo puede ocultar las herramientas que menos utiliza. No entraremos a describir de manera detallada cada uno de los iDevices que podemos elegir debido a que son herramientas muy sencillas de emplear, se trata en todos los casos de rellenar los huecos con las instrucciones que se indican y, tras esto, darle a aprobar (por ejemplo, en el caso de los cuestionarios, en el campo dónde pone pregunta se plantea la pregunta, dónde pone opción se plantean las opciones y dónde pone retroalimentación se plantea el feedback para el usuario…no tiene mayor dificultad).
Cada uno de los iDevices contiene su propio editor desde el que se permite incorporar y modificar texto o subir otros archivos. En la parte inferior de cada herramienta se nos muestra una barra desde la que podemos aprobar o borrar la actividad creada, deshacer los cambios o mover la actividad a través de los diferentes ítems de nuestro árbol de contenidos.
iDevices de Información textual: estos nos sirven para presentar contenidos de forma abierta y suele ser el iDevice más empleado para crear contenidos para un sitio web. Aunque hagan mención a la información textual, estos iDevices nos permiten insertar imágenes, vídeos, contenidos multimedia, etc. presentados de la manera que deseemos ya que no existen limitaciones en el formato como ocurre con otros iDevices, en otros iDevices nos tenemos que limitar al formato pregunta-respuesta mientras que aquí se nos frece un solo campo de texto en el que colocar la información que queramos. En el caso de este manual de Exelearning hemos usado la herramienta Texto libre para crear todos los contenidos que veis. El módulo Objetivos y el de Conocimiento previo son prácticamente igual que el de Texto libre, solo cambia el icóno que nos aparece para indicar que se trata de un tipo de actividad diferente. La opción de nota es la única que tiene un aspecto un poco diferente. Ésta nos permite guardar notas a modo de comentario como vemos a continuación.
iDevices de Información no-textual: mediante estos iDevices podemos insertar elementos externos pero incorporados como contenidos de Exelearning. Podemos incrustar un artículo de Wikipedia (con el mismo aspecto que tendría si lo visualizáramos en la propia página de Wikipedia), un Applet de Java, una Lupa que permite acercarnos o alejarnos a cualquier imagen que subamos, un Sitio Web en un marco entro de nuestro sitio, RSS (muestra los titulares de una página o blog) , una Galería de imágenes y Ficheros adjuntos (estos se presentan a modo de listado con enlaces). A continuación vemos cómo se ve la herramienta Lupa.
iDevices de Actividades interactivas: éstas permiten al usuario participar en el sitio, nos referimos a cuestionarios y actividades que permiten interactuar con nuestro sitio web. Todas ellas permiten retroalimentación para el usuario. Se trata de Preguntas de verdadero-Falso (propone una o varias preguntas que deberán ser respondidas con “Verdadero” o “Falso”), Preguntas de elección múltiple (propone una o varias preguntas tipo test. Cada una de las preguntas sólo podrá tener una respuesta correcta), Preguntas de selección múltiple (propone una o varias preguntas tipo test. Cada una de las preguntas podrá tener más de una respuesta correcta), ejercicios de Rellenar huecos (permite introducir un texto con espacios en blanco que deberán ser completados), Actividad desplegable(nos permite introducir un texto en el que haya uno o varios desplegables para seleccionar una opción correcta entre las planteadas) y Cuestionario SCORM (en este caso se plantean diferentes preguntas tipo test, con el mismo aspecto que la Pregunta de elección múltiple, la única diferencia radica en que esta opción es compatible con la exportación SCORM que permite que la actividad sea reconocida por los diferentes LMS y proporcionan datos al profesorado sobre si los alumnos han aprobado o no el test…cosa que no permiten el resto de iDevices). A continuación se muestra la apariencia de la Pregunta de elección múltiple.
iDevices de Actividades no-interactivas: mediante estos iDevices se muestran actividades que no se pueden contestar directamente. Se trata de actividades que plantean un Caso práctico, una Actividad de lectura, una actividad de Reflexión y una Actividad no dedicada a los objetivos anteriores. Estas actividades incluyen retroalimentación y la única diferencia existente entre ellas radica en su aspecto de presentación, es decir, en el icono que indica que se trata de un tipo de actividad u otra. A continuación, vemos el aspecto de la herramienta de Actividad de lectura y la de Reflexión.
iDevices Experimentales: estas actividades no son aconsejables ya que están todavía en desarrollo, simplemente se añaden para que se vean y se prueben. Es de imaginar que en versiones posteriores de Exelearning se acabarán añadiendo de forma acabada. En este apartado encontramos juegos como Juego del ahorcado, Emparejamientos de memoria, Juego de hacer clic por orden y un iDevice de Ordenar objetos.
La actividad en SCORM
Ocultar
Una de las actividades interactivas que más interesante nos puede resultar es la actividad de SCORM, esto se debe a que los cuestionarios creados en SCORM, y exportados como tal, nos facilitan feedback de los resultados de los alumnos al integrarlos en los diferentes LMS. En este tipo de actividad se proponen preguntas tipo test al igual que ocurre con la Pregunta de elección múltiple pero se permiteun rastreo de la actividad de los alumnos.
La elaboración de este tipo de cuestionarios es sencilla, al igual que ocurre con otro tipo de actividades interactiva, tan solo se han de rellenar los campos tal y como se indica. A continuación vemos un ejemplo de cuestionario con una sola pregunta.
==Cuestionario SCORM==
===Pregunta===
¿Qué es un LMS?
Respuestas
Opción 1Es un software para editar vídeo. Opción 2Es un sistema de gestión de aprendizaje. Opción 3Es un tipo de conexión. Habilitar JavaScript
== Ocultar Para poder crear ese breve cuestionario hemos cumplimentado los campos de la siguiente manera.
Área de trabajo
En el área de trabajo observamos dos pestañas en la parte superior, la pestaña Autoría y la pestaña Propiedades. Para generar contenidos hemos de estar en la pestaña Autoría mientras que en la pestaña Propiedades encontramos con tres pestañas más que nos sirven para configurar los datos generales del proyecto (título del proyecto, autor, licencia, etc.), la exportación y los metadatos (mediante el estándar Dublin Core). En este caso nos centraremos en la pestaña Autoría.
La visualización del área de trabajo depende del iDevice o actividad seleccionada, aunque la mayoría de actividades se componen de un editor y un área de texto extensa en la que se añaden los contenidos. El editor, desarrollado por **TinyMCE**, es muy sencillo, intuitivo y similar al de otros programas como Word, se trata de un editor WYSIWYG (What You See Is What You Get en inglés “lo que ves es lo que obtienes”, es decir, lo que se ve en pantalla es el resultado final) de HTML y de código abierto. El editor permite dar formato al texto así como insertar diferentes elementos multimedia como imágenes, vídeos y animaciones, también, es posible representar expresiones matemáticas e insertar caracteres especiales y enlaces entre otras muchas opciones.
Así es como se visualiza el área de trabajo cuando se selecciona el iDevice de Texto Libre (en el bloque de Información textual):
Así es como se visualiza el área de trabajo cuando seleccionamos un iDevice de Pregunta Verdadero-Falso (en el bloque de Atividades interactivas), en este caso el editor se nos muestra escondido, pero podemos desplegarlo en cada uno de los campos:
Los estilos
Este es, sin duda, el punto más complejo puesto que requiere conocimientos de hojas de estilo CSS. Por eso, en este curso no vamos a profunditzar mucho en el tema. Lo más importante es, en este caso saber modificar un estilo predeterminado (los desarrolladores están continuamente trabajando en la creación de plantillas, por eso no se necesario que sepamos crearlas). Se trata de saber identificar los elementos básicos en la hoja de estilo (sobre todo la cabecera del lugar que suele traer el logotipo y el título o nombre del grupo) para poder modificarlo. En la siguiente página encontraréis información más detallada sobre las hojas de estilo:
http://librosweb.es/libro/css/
Para modificar un estilo tenemos que ir a la carpeta de estilos situada dentro de la carpeta de archivos del programa instalado, a continuación se explica el procedimiento para MAC y para PC:
MAC
Se debe ir a la carpeta en la que se ha instalado el programa, en este caso la carpeta Aplicaciones, con el botón secundario se debe marcar Mostrar contenido delpaquete.
Después se debe seguir la siguiente ruta: Contents >Resources > exe > style. Dentro de la carpeta style encontraremos todos los estilos disponibles.
Tras localizar los estilos, podemos escoger cualquier estilo predeterminado, después de copiarlo, cambiarle el nombre y modificar lo que queramos. Aunque podemos modificar directamente cualquiera de los estilos predeterminados, lo ideal es hacer una copia de la carpeta y renombrarla para realizar las modificaciones (de esta manera conservaremos siempre el estilo original). Lo más recomendable es elegir de entrada un estilo que nos guste y en el que no tengamos que realizar demasiados cambios. Podemos observar que en Exelearning se habrá incluido el nuevo estilo, en este caso hemos creado el estilo llamado “Manual_Exelearning” a partir del estilo predeterminado “Tknika”.
PC
En un PC se tiene que ir también al lugar en el cual se ha instalado el programa, por defecto lo encontraremos en:
c:\Archivos de Programa\exe\
Tras esto, debemos acceder del mismo modo a la carpeta Style y aquí encontraremos los estilos que podemos modificar.
Modificar un estilo existente
En Exelearning podemos modificar todo el estilo de un sitio creado con esta herramienta, desde el tamaño de cada bloque hasta el aspecto del menú pasando por los colores de los párrafos, enlaces o encabezados, entre otros. No obstante, puesto que se trata de un curso de 16 horas y el lenguaje CSS resulta un lenguaje complejo para el que se requiere tener además conocimientos de HTML, veremos solo algunos detalles que nos ayudarán a personalizar un poco nuestra páginas, aunque es importante tener en cuenta que podemos darle el aspecto que queramos con los conocimientos adecuados. A esto se ha de añadir que cada estilo tiene sus particularidades (el estilo denominado MAX nombra de un modo diferente los archivos), aunque se explicarán los más generales.
Modificar cabecera y otras imágenes mediante sustitución
En primer lugar, tenemos que localizar qué se la imagen de cabecera para el sitio web, para hacer esto tenemos que abrir el archivo CSS llamado Content (se puede abrir con cualquier editor web o con un editor de textos sencillo), este archivo está en la carpeta del estilo que hemos copiado y renombrado .
En las primeras líneas se explica como se ha nombrado la imagen de la cabecera porque sea más fácil de localizar y modificar.
Sabiendo que la cabecera en este caso se ha nombrado como my_header.jpg ya podemos proceder a cambiar el archivo de cabecera de un modo sencillo y sin saber CSS. Para ello, localizamos la imagen en la carpeta de estilo y, después de comprobar el tamaño que tiene (985 x 108px en el caso del estilo que hemos elegido para este curso), elaboramos nuestra propia cabecera con el software que nos resulto más sencillo (Paint, Photoshop, Gimp. etc.) y lo guardamos con el nombre de my_header.jpg, tras esto, lo pegamos o arrastramos a la carpeta de nuestro estilo machacando, de este modo, la cabecera original. Se trata básicamente de sustituir una cabecera por otra, esta la manera más sencilla de realizarlo sin necesidad de escribir ni una sola línea de código. De este modo tan sencillo podemos cambiar todas las imágenes del estilo desde la cabecera que parece cuando se exporta como página sola hasta los iconos de los iDevices.
Es conveniente hacer la cabecera con las mismas medidas para no descuadrar el estilo original. Si decidimos darle otras medidas se tiene que tener en cuenta que esto puede influir lo el resto del diseño y este puede acabar deformándose (en ese caso habrá que saber un poco de código CSS para modificar las medidas de la página y adaptarla a la nueva cabecera). El tamaño de la cabecera depende del estilo que hayamos elegido para modificar.
Cambiar fondo (Background)
La palabra utilizada para designar la imagen de fondo de una página es background y habitualmente se abrevia con las letras bg. Por eso, si vamos a la carpeta que contiene las imágenes del estilo, podemos ver que hay algunas imágenes que contienen las letras bg en el nombre (por ejemplo: page_bg.gif o popup_bg.gif). Esto quiere decir que se trata de imágenes de fondos (la primera es la de fondo de página y la segunda es el fondo de un pop-up). A veces no hay una imagen de fondo en el estilo que hemos elegido sino que se trata de un color sólido de fondo. En este caso, si queremos poner una imagen, tenemos que añadir un poco de código a la hoja de estilo. Para lo cual tenemos que alojar la imagen de fondo en la carpeta en la cual están todos los archivos de estilo y después tenemos que abrir el estilo del navegador (nav.css) y enlazar la foto en el apartado “body” con el siguiente código:
background-image: url(nombre_fondo.png);
Entre paréntesis tenemos que poner el nombre que le hayamos dado a la imagen con su correspondiente extensión. Cómo se muestra en el ejemplo:
Por otro lado, si no queremos poner una imagen de fondo y preferimos un determinado color sólido, podemos cambiar el color del estilo elegido de una manera sencilla. Tan sólo tenemos que ir al archivo nav.css y cambiar el código que se refiere al color de fondo, es decir, poner en la etiqueta “background” el color que queramos. Para hacer esto tenemos que tener en cuenta algunas consideraciones sobre los códigos de color existentes.
Los colores en HTML se representan mediante un código hexadecimal, mediante su nombre en inglés o mediante RGB. En la tabla siguiente podemos observar un ejemplo de 5 colores y sus diferentes códigos:
Color
Nombre del color
Hexadecimal
RGB
SkyBlue
#87CEEB
(135,206,235)
Medium aqua marine
#66CDAA
(102,205,170)
Rosy brown
#BC8F8F
(188,143,143)
White
#FFFFFF
(255,255,255)
Black
#000000
(0,0,0)
Por ejemplo, si queremos poner de fondo el tercer color de la tabla (el rosa) podemos hacerlo de las siguientes maneras (elegiremos una de las tres): background: #BC8F8F; background: Rosy brown; background: (188,143,143);
Existen múltiples programas y aplicaciones web para obtener el código de un color. También hay en Internet numerosas parrillas con los nombres de los colores en inglés y sus equivalentes en hexadecimal y RGB. En las siguientes páginas puedes encontrar herramientas y parrillas de colores:
http://html-color-codes.info/
A continuación podéis ver dos imágenes de un sitio web creado con Exelearning, en la primera se ha puesto una imagen de fondo, en la segunda se ha puesto un color sólido (Rosy Brown en este caso).
CSS
El problema principal del diseño web surge al querer dar un aspecto o estilo a nuestros contenidos. El Html permite dar formato a los contenidos mediante una serie de etiquetas, el problema aparece cuando se trata de un sitio web formado por muchas páginas y se quiere dar estilo a todo. Esto deriva en una gran pérdida de tiempo ya que se debería dar un formato a cada una de las etiquetas por separado, es decir, de una en una (podemos encontrarnos con una página cargada de títulos, textos, menús, etc. con formato). De esta necesidad surgen las hojas de estilo o CSS (Cascade Style Sheet u Hojas de Estilo en Cascada). Por ejemplo, si queremos que todos los títulos de un menú sean de color rojo podemos poner esa orden en HTML dentro de cada uno de los títulos que aparecen, pero es mucho más sencillo, rápido y “limpio” crear un documento CSS en el que se especifique que queremos todas las etiquetas de título en color rojo. De este modo si tenemos 5 títulos de menú en cada página y tenemos 5 páginas no tendremos que dar la orden del color 25 veces sino que bastará con darla una vez en la hoja de estilos. Las hojas de estilo permiten quitar peso a la página y separar el diseño del contenido. Actualmente el código CSS ha evolucionado bastante (está en la versión CS3) y se pueden obtener resultados sorprendentes que dotan a la web de efectos muy llamativos…pero aquí no veremos efectos tan avanzados por tratarse de un curso de nivel básico.
Como hemos dicho, el objetivo de las hojas de estilo es facilitar la labor de formateado de un texto y separar el formato del contenido. Pero se ha de tener en cuenta que el estilo se puede insertar de tres maneras y tan solo la última es la que cumple la función descrita. Podemos dar formato a un texto de los siguientes tres modos:
Dentro de las propias etiquetas Html: como hemos comentado no resulta muy práctico, sobre todo si queremos cambiar todo el estilo de página.
Dentro del Html pero aislado en la cabecera (dentro de <Head></Head>): este modo es más práctico y ordenado que el anterior ya que todas las etiquetas son fácilmente localizables en el Head.
En una hoja estilos externa enlazada con la hoja de Html: este es el método más adecuado ya que, como se ha comentado, se desvincula el diseño del contenido. De este modo, nuestro sitio web tendrá dos documentos: documento HTML que servirá de contenedor para la describir la información que se sitúa en la página (textos, vídeos, enlaces, etc.) y documento CSS que definirá la distribución y estilos de la página (colores de texto, colores de fondo, espacios entre textos, tamaño de letra, etc.). Para ello se ha de poner el vínculo a la página dentro de las etiquetas <head> </head> tal y como aparece en la imagen y dentro de la hoja externa se ponen todas las reglas de estilo.
Al igual que ocurre con Html, el código CSS se puede escribir usando cualquier editor de texto. Este código se puede aplicar a las etiquetas definidas Html (Body, p, h1…) o podemos aplicar nuestros propios nombres que usaremos como identificador para darle una propiedad CSS, es decir, por ejemplo podemos identificar toda la parte superior de nuestra página bajo el nombre “cabecera” y darle unas determinadas propiedades CSS. Aunque CSS no diferencia mayúsculas y minúsculas es mejor escribir en minúsculas para mayor compatibilidad, por otro lado, si se quiere insertar un comentario dentro den código sin que afecte al mismo se ha de hacer entre los símbolos /* */.
Las reglas de formato CSS tienen dos partes: el selector y el bloque de declaración. El selector es el elemento al que se va a aplicar el formato, puede ser un párrafo (p), un encabezado (h1), un nombre de clase (Class) o un identificador (Id), mientras que el bloque de declaración define los elementos de estilo que se van a aplicar, por ejemplo si el texto es azul, si el tipo de letra es Arial, etc. El bloque de declaración está formado a su vez por una propiedad y un valor, separadas entre si por dos puntos (:). La propiedad indica el aspecto que hay que cambiar (color, tamaño de letra…) mientras que el valor indica cómo hacerlo (color azul, tamaño 12 píxeles…)
Tal y como hemos comentado, podemos crear nuestros propios selectores para definir un estilo. El selector además de aplicarse a cada etiqueta Html puede ser un identificador o una clase.
Se pueden hacer dos clases diferentes para la misma etiqueta pero diferenciando el lugar en el que se encuentra la etiqueta, por ejemplo si la etiqueta p (párrafo) se encuentra dentro de una tabla podemos hacer que se comporte de un modo distinto a como lo haría si la etiqueta no está dentro de una tabla. Por ejemplo:
Clases
Con las clases se puede crear más de un estilo para cada etiqueta Html. Las clases dividen una etiqueta Html en varios tipos y a cada uno de ellos se le asigna un nombre. Este nombre se pone detrás de la etiqueta Html separada por un punto en la parte CSS mientras que en la parte de Html se pone la palabra Class=” “ y el nombre que hayamos seleccionado para vincularlo a ese estilo. Por ejemplo,
En el código Html pondremos: <p class=”color_parrafos”> <p>
Mientras que en la hoja de estilos CSS definiremos esa clase: p.color_parrafos { color:red; font-size: 18 px; }
También podemos crear clases genéricas sin necesidad de poner la etiqueta Html delante del punto, cualquier etiqueta que tenga ese nombre de clase tendrá las propiedades que se hayan establecido en el CSS. Por ejemplo:
Si en el código Html ponemos: <h1 class=”azul”> </h1> o <p class=”azul”> </p>
Y en el código CSS ponemos: .azul { color:blue }
Tanto la etiqueta h1 como la etiqueta p llevan el nombre de clase “azul” y, por ello, a ambas se les aplicará el estilo que se ha definido para esa clase aunque sean etiquetas diferentes.
Identificadores
Este modo es parecido al anterior y sirve para especificar identificadores genéricos, no tienen que estar vinculados a ninguna etiqueta concreta de Html. Se establecen con el atributo id del mismo modo que antes lo hemos hecho con el atributo class, es decir: <h1 id=”azul”> </h1>
Y en el código CSS ponemos: #azul { color:blue }
En lugar de un punto delante del selector, para identificar un elemento idhemos de escribir una almohadilla en el código CSS. La diferencia radica en que el identificador sirve para identificar de forma única una etiqueta html, es decir si tenemos en el código un identificador de encabezado que se llame “azul” (<h1 id=”azul”> </h1>), no podemos tener luego en el mismo html un identificador de párrafo que se llame “azul” <p id=”azul”> </p>. El valor del atributo id de un elemento no puede repetirse en ningún otro atributo id del mismo documento. El identificador sirve también para poder identificar elementos javascript, por ello, si se usan las dos modalidades para la misma etiqueta (class e id) tendrá preferencia el elemento id.
Enlaces (A)
Los enlaces, que llevan en Html la etiqueta <a>, son una pseudo-clase y pueden tener diferentes formatos según su estado, es decir, pueden tener un determinado aspecto si son un enlace sin visitar, si son un enlace visitado o pueden tener otro aspecto al pasar el ratón por encima o al hacer clic.
Los valores posibles son:
Link: Es el formato del enlace cuando no se ha visitado
Active: Es para los enlaces activos (cuando se hace clic encima)
Visited: Establece el formato para los enlaces que ya han sido visitados
Hover: Muestra un formato determinado cuando el ratón está sobre el enlace.
Por ejemplo:
Los tipos de enlace se pueden poner solos o se pueden combinar con cualquier tipo de selector ya sea una etiqueta Html, una clase o un identificador para especificar qué enlaces queremos modificar. Esto se hace si por ejemplo sólo queremos modificar los enlaces de imagen o los enlaces de un determinado párrafo al que hayamos nombrado con una clase o identificador determinado.
Link con etiqueta de imagen
Link con clase
Link con identificador
Como ya se ha dicho, para vincular nuestro Html con una hoja de estilo tan solo es necesario escribir dentro de la etiqueta <head> </head> del html la etiquetas link y vincularla con la hoja de estilos que hayamos creado. Si por ejemplo hemos creado una hoja de estilos llamada estilo.css escribiremos:
<head>
<link href=”estilo.css” rel=”stylesheet” type=”text/css”>
</head>
La hoja de estilos deberá estar situada en el mismo directorio que el index.
Una buena página para profundizar en el tema de los estilos CSS es la siguiente:
PROPIEDADES DE HOJAS DE ESTILOS
Como se ha comentado antes, una regla consta de dos partes: el selector y la declaración. El selector indica a qué elementos afectará la regla. En la regla anterior el selector es body, por lo que el formato se aplicará al cuerpo de la página web.
Después del selector y un espacio en blanco aparecen unas llaves de apertura y de cierre. Entre ellas encontramos la declaración de la regla.
Es posible aplicar una misma regla a más de un elemento sin necesidad de repetirla: h1, h2, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
En la regla de arriba, el selector está compuesto por las etiquetas h1, h2 y p, por lo que el formato que se establece en su declaración afectará a todos estos elementos.
A continuación se explican algunas de las propiedades de estilo que se pueden aplicar.
Formatos de fuente (Font)
Font-size: Sirve para determinar el tamaño del texto y se puede especificar de varios modos (porcentaje, píxeles, em…)
Font-family: Determina el tipo de fuente del texto (Arial, Times, Verdana…) Se pueden indicar varios tipos separados por comas.
Font-weight: Especifica el grosor de la fuente (lo habitual son los valores normal y bold aunque también puede tener valores numéricos de 100, 200, 300…)
Font-style: Determina el estilo de la fuente (italic, normal u oblique)
Color: Permite determinar el color del texto (mediante colores en inglés, en RGB o hexadecimal)
Ejemplo para cambiar el formato de fuente de un párrafo:
Formatos de texto (Text)
Text-decoration: Establece diferentes opciones de decoración como por ejemplo subrayado, línea arriba y tachado (underline, overline y line-through)
Text-align: Alineación horizontal del texto, puede ser left, right, center o justify (izquierda, derecha, centro o justificado respectivamente).
Vertical-align: Alineación vertical del texto (o de una imagen) respect a su contenedor. Sus valores ueden ser baseline (línea base inferior del texto), sub (subíndice), super (superíndice), top (arriba respeto al elemento más alto de la línea), text-top (en la línea superior del texto), middle (en medio respecto a la altura del texto), bottom (abajo respecto al elemento más alto de la línea) y text-bottom (en la línea inferior del texto).
Line-height: Es la distancia entre líneas. Tiene un valor numérico.
Text-transform: Indica las posibilidades del texto, los valores pueden ser capitalize (la primera letra en mayúsculas), uppercase(mayúsculas) y lowercase (minúsculas).
Ejemplo para cambiar el formato de texto de un párrafo:
Formatos de fondo (Background)
Background-color: Indica el color de fondo mediante código hexadecimal, RGB o un color web en inglés. También se le puede dar la opción transparent (transparente).
Background-image: Establece una imagen de fondo mediante el atributo url para indicar la ruta. Si se pone un color de fondo y una imagen de fondo la imagen tendrá prioridad sobre el color.
Background-repeat: Sirve para determinar la repetición de la imagen. Existen los valores repeat (se repite la imagen en todo el fondo), repeat-x (se repite sólo en el eje de las X, es decir, en horizontal), repeat-y (se repite sólo en vertical) y no-repeat (no hay repetición).
Background-attachment: Establece si la imagen se queda fija al mover las barras de desplazamiento. Las opciones son scroll (la imagen se mueve) y fixed (la imagen se queda fija).
Background-position: Determina la posición de la imagen vertical y horizontal mediante píxeles o porcentaje. Las posiciones verticales son top, center y bottom, mientras que las posiciones horizontales son left, center y right.
Ejemplo para cambiar el formato de fondo (background) de un párrafo:
Formatos de lista (List)
List-style-type: Muestra el tipo de número o viñeta que se utilizará. Para las listas de viñetas (ul) existen los siguientes valores: disc(forma de disco), square (forma de cuadrado), circle (forma de círculo) y none (sin viñeta). Para las listas numeradas (ol) existen los siguientes valores: decimal (números decimales), lower-roman(números romanos en minúsculas), upper-roman (números romanos en mayúsculas), lower-alpha (letras minúsculas), upper-alpha (letras mayúsculas) y none (sin numeración).
List-style-image: Sirve para indicar una imagen que se utilizará como viñeta mediante el atributo url y su ruta.
List-style-position: Establece la posición de los números o viñetas de la lista. Sus valores pueden ser inside (hacia dentro) u outside(hacia fuera).
Ejemplo para cambiar el formato de lista no numerada:
Formatos de cuadro o bloque (Box)
Entendemos por cuadro la zona que envuelve a una etiqueta Html, es una caja que puede ser visible o invisible. Se refiere al entorno y por eso se emplea sobre todo para posicionar elementos, por ejemplo se puede modificar la posición de una imagen respecto a su entorno (se puede alinear a la izquierda, a la derecha, centrar, dejar más margen a la derecha, etc.)
Margin: Establece la distancia del margen mediante cuatro propiedades que pueden ser margin-top (distancia hasta el margen superior), margin-right (distancia hasta el margen derecho), margin-bottom (distancia al margen inferior), margin-left (distancia hasta el margen izquierdo) y margin (con esta propiedad se pueden dar las cuatro medidas anteriores en el siguiente orden: top-right-bottom-left). Los valores numéricos pueden ser negativos, por ejemplo: margin-top: -30px; Una opción posible es establecer como valor auto (el navegador calculará automáticamente las medidas del elemento teniendo en cuentasus contenidos) o inherit (indica que el valor del elemento se hereda de su elemento padre).
Padding: Establece el espacio de relleno. Tiene las mismas propiedades que margin (padding-top, padding-right, padding-bottom, padding-left y padding).
Border-width: Determina el grosor del borde mediante las propiedades border-top-width (grosor del borde superior), border-right-width (grosor borde derecho), border-bottom-width (grosor borde inferior), border-left-width (grosor borde izquierdo) y border-width (con las cuatro medidas en orden).
Border-color: Establece el color del borde mediante las propiedades border-top-color, border-right-color, border-bottom-color, border-left-color y border-color (funciona igual que las propiedades anteriores).
Border-style: Indica el estilo del borde y se emplea como las propiedades anteriores. Los valores posibles son: dotted (punteado), dashed (rayado), solid (línea normal sólida), double (doble), groove(borde con relieve tridimensional hacia dentro), ridge (borde con relieve tridimensional hacia dentro), inset (borde con relieve hacia dentro), outset (borde con relieve hacia fuera) y none (sin borde).
Border-top, Border-right, Border-bottom y Border-left: Esta opción perminte establecer las propiedades que hemos visto (anchura, estilo y color) para cada borde. Se ha de hacer en ese mismo orden. Por ejemplo: border-top: 12px dotted blue;
Width: Se emplea para establecer la anchura en elementos que no contienen texto, como por ejemplo imágenes. Se establece mediante píxeles pero si en la propiedad height (altura) se especifica el valor auto se conservará la proporción.
Height: Especifica la altura del elemento del mismo modo que hace width con la anchura (si en width se establece la propiedad auto se mantiene la proporción).
Float: Con esta propiedad se puede establecer que un elemento flotante, por ejemplo una imagen, se coloque de un modo u otro respecto al contenido que le rodea en el código. Puede ser left (a la izquierda), right (a la derecha) o none (se coloca en la posición que le corresponde según el código).
Clear: Con esta propiedad se establece si se permiten o no elementos flotantes alrededor. Los valores pueden ser none (se permite cualquier elemento flotante), left (se permite sólo a la izquierda), right(se permite sólo a la derecha) y both (no se permite en ningún lado).
Ejemplo para cambiar el formato de una imagen:
Algunos elementos no contienen atributos para dar unos determinados formatos en CSS, por ello lo aconsejable es meter esos elementos dentro de otros para poder darles formato. Un ejemplo para que se entienda: una imagen en CSS no tiene la propiedad de alinearse al centro, pero esto no implica que no se pueda hacer. Lo más práctico para solucionarlo es meter la imagen dentro de un bloque como por ejemplo una capa (div) o un párrafo (p) y así centrar el contenido del bloque como si fuera texto. Por ejemplo, llamamos al div o al p “centrar_imagen” y escribimos en el código CSS:
Otra opción para el mismo problema consiste en crear un también un div en Html, y en CSS darle una medida (width) y unos valores en la propiedad margin respecto al su entorno como se ve en el ejemplo:
LA EXPORTACIÓN DEL PROYECTO
Una vez tengamos nuestro sitio web creado podemos exportarlo de diferentes maneras dependiendo del dispositivo en el que queramos que se visualice, como ya explicamos en la descripción del entorno de trabajo, podemos exportar a formato EPUB3, como sitio web, como paquete SCORM, como XLIFF, etc., dependerá siempre del uso que vayamos a dar a esos materiales.
En nuestro caso veremos los dos modos de exportación más extendidos: la exportación como sitio web (carpeta auto-contenida) y la exportación como Scorm para insertar en algún LMS. Aunque scorm no es el único es el único formato aceptado para el ámbito educativo, vemos que podemos exportar también a otros estándares educativos como IMS o Common Cartridge, se trata del formato más extendido y aceptado.
Exportar como sitio web como carpeta auto-contenida
Mediante esta opción crearemos un sitio web que respete todo el menú creado en el árbol de contenidos y que permita la navegación a través de los contenidos. Para ello, tenemos que ir a la pestaña del menú Archivo > Exportar para exportar como Sitio web > Carpeta Auto-contenida.
A continuación se nos abrirá un cuadro en el cual se nos pregunta dónde queremos guardar la exportación. Tenemos que darle una ubicación, seleccionando la carpeta en la que queramos ubicarlo, y darle el nombre que queramos a la carpeta.
Si vamos a la carpeta creada y hacemos doble clic en el archivo index.htmlveremos nuestro sitio web en nuestro ordenador. Para que el sitio sea visible en Internet deberemos tener contratado algún servicio de alojamiento webde pago o gratuito, estos últimos suelen insertar publicidad y tener bastantes limitaciones, para poder subir los contenidos y que estén disponibles a todo el mundo. En nuestro caso, la Universitat de València nos facilita un espacio web gratuito y con unas buenas condiciones para que podamos subir nuestro sitio web. En el siguiente apartado mostramos cómo subir esos materiales al espacio de la UV.
Exportación SCORM
SCORM (Sharable Content Object Reference Model) es un formato estandarizado para contenidos educativos estructurados. Al igual que el .mp3 para la música o el .jpg para imagen, el formato SCORM surge de la necesidad de homogeneizar los diferentes contenidos educativos creados bajo un mismo formato. De este modo, cualquier contenido SCORM puede ser interpretado en plataformas compatibles, por ejemplo en Moodle por citar una de las más conocidas o el Aula Virtual de la Universitat de València. Este estándar surgió con la finalidad de facilitar la tarea a los profesionales que trabajan con contenidos educativos que necesitan ser fácilmente reutilizados y editados, por ello se pretenden satisfacer las siguientes premisas:
Accesibilidad:facilidad para acceder los materiales desde cualquier sitio.
Adaptabilidad: capacidad de modificar los materiales en función de las necesidades de las personas y organizaciones. Se pretende también potenciar la Durabilidad de los materiales, es decir, su capacidad de resistir a la evolución tecnológica.
Interoperabilidad: capacidad de utilizarse en diferentes plataformas de enseñanza.
Reusabilidad: flexibilidad que permite reutilizar los diferentes componentes dentro de múltiples contextos. Se trata de trabajar por bloques para que todos o algunos de ellos se puedan reutilizar para diferentes fines.
Para obtener materiales que se ajusten a las premisas arriba mencionadas hemos de ir a Archivo > Exportar > Estándar educativo> SCORM 1.2 o SCORM2004 . Como resultado obtendremos una carpeta comprimida (.zip) que podrá exportarse a múltiples plataformas LMS que admitan esta especificación (por ejemplo Moodle, Sakai,…)
Respecto a las diferencias entre SCORM 1.2 y SCORM2004 hemos de añadir que la primera es una versión anterior y, por lo tanto, SCORM2004 es una versión mejorada que surge de la necesidad de flexibilizar más el estándar anterior. Encontramos más información al respecto en el siguiente enlace.
HTML
Imágen de código HTML
HTML, son las siglas de HyperText Markup Language (lenguaje de marcado hipertextual) y se trata, dicho de forma simple, del lenguaje de marcación más extendido que se usa para describir contenido en la red. Por lenguaje de marcación o lenguaje de marcas entendemos la codificación que se hace de un documento mediante etiquetas (<>) que posteriormente serán “traducidas” por un navegador (programa que permite visualizar las páginas web). Los documentos HTML deben tener la extensión html o htm, de este modo, el usuario puede visualizar los contenidos de una página web en un navegador. No se debe confundir HTML con un lenguaje de programación como puede ser Javascript se trata más bien de un lenguaje descriptivo. Este código describe y traduce los contenidos ya sean textos, imágenes u otros elementos. Este lenguaje fue creado por Tim Berners Lee (conocido por ser el creador de la Web) y su equipo en 1991ante la necesidad de intercambiar y distribuir información de manera efectiva a través de la World Wide Web. También está detrás de la creación del protocolo HTTP (HyperText Transfer Protocol) y el sistema de localización de objetos en la web URL(Uniform Resource Locator). El organismo encargado de regular y normalizar el código HTML es el Consorcio de la World Wide Web (abreviado W3C)*, fundado también en 1994 por Tim Berners Lee. Actualmente el HTML ha evolucionado hasta el punto de llegar a la versión HTML5 la cual tiene más etiquetas y posibilidades multimedia dentro del propio código, es decir, sin necesidad de instalar plugins externos. Por cuestiones de extensión, en el curso que nos ocupa veremos los elementos más básicos del HTML sin entrar en las nuevas opciones que se han implementado con el HTML5.
Si entramos en cualquier página web y pinchamos con el botón secundario nos aparece la opción “Ver código fuente” (también se accede desde la opción “ver” del menú del navegador). De este modo podemos acceder al código HTML de la página y ver cómo se ha construido, veremos las etiquetas que indican cómo deben interpretarse los elementos de la página. Lo que ocurre es que probablemente también nos encontraremos con otros tipos de lenguajes más complejos como Javascript y con enlaces a hojas de estilo, hojas Javascript, PHP, etc. ya que el HTML actúa muchas veces como contenedor de otros lenguajes. Pero eso no debe preocuparnos por ahora.
Las etiquetas
El lenguaje Html está formado por etiquetas. Estas etiquetas pueden ser llenas o vacías.
Las etiquetas llenas se forman mediante la instrucción correspondiente seguida del texto al que queremos que afecte y se cierran con la misma instrucción con una barra delante. Si no se cerrara afectarían a todos los elementos que se encuentran en la página. Por ejemplo:
<H1> Este es un texto de prueba </H1>
Las etiquetas vacías son exactamente iguales que las llenas pero no es necesario cerrarlas para indicar a qué texto queremos que afecten porque empiezan y terminan en el mismo punto. Por ejemplo:
<HR>
Por otro lado, algunas etiquetas tienen atributos de elemento que deben escribirse entre comillas. En el siguiente ejemplo la etiqueta <A>, que indica que hay un enlace, lleva el atributo HREF con la ruta del enlace entre comillas.
<A HREF=”http:/www.uv.es”> Link de la UV </a>
– Las etiquetas en HTML pueden escribirse tanto en mayúsculas como en minúsculas, pero hay que tener cuidado ya que el valor de los atributos que van entre comillas hay que escribirlos exactamente como deben ser, es decir, si tenemos un archivo en minúsculas que queremos vincular, hemos de escribir el nombre del archivo en minúsculas, no podemos usar mayúsculas. También se han de evitar los símbolos extraños, como acentos, y los espacios a la hora de escribir atributos ya que el navegador puede no reconocer la orden.
– Cualquier documento HTML ha de comenzar y acabar de la siguiente manera para indicar al navegador que se trata de lenguaje HTML:
<HTML>
</HTML>
Dentro de estos elementos quedará contenida toda la información de la página Web.
Comentarios
Se pueden insertar comentarios en el código Html a modo de recordatorios o de indicaciones. Se realiza escribiendo el comentario entre las etiquetas <!— —>. Esto es útil sobre todo porque puede pasar bastante tiempo desde que creamos un código hasta que lo volvemos a revisar y, de este modo, dejamos escritas instrucciones que no afectan a la lectura del código. Un ejemplo de comentario se escribiría de la siguiente manera: <!– Este es un comentario en HTML –>
Head es la primera de las dos partes en las que se estructura un documento Html. Aquí reside la información básica del documento y generalmente esa información no se muestra al usuario. Entre las etiquetas Head se encuentran las siguientes etiquetas:
<TITLE> </TITLE> Sirve para asignar un título a una página que se verá en la parte superior de la ventana del navegador. Se ha de escribir el título entre las dos etiquetas. Por ejemplo: <title> Página de pruebas </title>
<META> Se utiliza para añadir información o metadatos sobre la página. Esta información puede ser utilizada por los buscadores. La etiqueta <meta>no necesita etiqueta de cierre. Por ejemplo: <meta name=”keywords” content=”curso dreamweaver, html, css“>
<STYLE> Se emplea para introducir un estilo en el mismo documento Html. Por ejemplo: <style type=”text/css”> body,td,th { color: #333; } </style>
<LINK> Esta etiqueta nos servirá para enlazar con la hoja de estilos que hayamos creado, por ejemplo: <link href=”estilo.css” rel=”stylesheet” type=”text/css”> </link>
<SCRIPT> La etiqueta script determina si el html contiene algún otro lenguaje como puede ser Javascript. Por ejemplo: <script language=”JavaScript”> </script>
Cuerpo (BODY)
Body es la segunda parte de la estructura y en ella reside el verdadero contenido de la página que se nos mostrará en el navegador. Esta etiqueta tiene atributos que podemos modificar para presentar los contenidos. Márgenes:
Se pueden modificar por ejemplo los márgenes como vemos en el código que hay a continuación: <body marginwidth=”20px” marginheight=”30px”>
De este modo le estoy diciendo que el margen izquierdo y derecho de la página han de tener 20 pixeles de espacio y los márgenes superior e inferior 30 pixeles.
También se pueden dar valores diferentes a cada uno de los márgenes: <body leftmargin=“30” topmargin=“10” rightmargin=“20” bottommargin=“0”>
Fondo
Desde la etiqueta body se pueden agregar otros atributos como el color del fondo o la imagen de fondo de la página.
El color de fondo se establece a través del atributo bgcolor, al que es posible asignarle un color representado en hexadecimal o por un nombre predefinido. La etiqueta para poner el fondo de color blancos sería la siguiente con sus dos posibilidades: <body bgcolor=“#FFFFFF”> o <body bgcolor=”white”>
La imagen de fondo puede establecerse a través del atributo background, escribiendo la ruta en la que se encuentra la imagen. Al poner la ruta hemos de fijarnos bien en la localización de la imagen, si por ejemplo la imagen se llama fondo.jpg y se encuentra dentro de la carpeta imagenes en el mismo espacio en el que se encuentra la web (es importante que el nombre de la carpeta o del archivo no contengan acentos) escribiremos: <body background=“imagenes/fondo.jpg”>
Texto
Por último, es posible establecer también el color para todo el texto que irá en el cuerpo de la página. Se puede determinar e a través del atributo text: <body text=“#000000”>
De este modo el color del texto será negro. También podemos determinar el color de los enlaces no visitados con el atributo link y los visitados con el atributo vlink. Por ejemplo: <body link=“#000000”>
TEXTO
Ya hemos visto algunos atributos del BODY que pueden afectar al texto de nuestra página pero existen otras etiquetas con las que podemos dar formato a los textos en HTML.
Resaltar texto
Existen varias formas de resaltar una palabra o un texto y todas ellas son muy conocidas por el habitual uso que hacemos de los editores de texto. Las etiquetas de las que disponemos son las siguientes:
Etiquetas
Efecto
Ejemplo
<b></b>
negrita
Texto de prueba
<i></i>
cursiva
Texto de prueba
<u></u>
subrayado
Texto de prueba
<s></s>
tachado
Texto de prueba
Encabezados
Son llamadas también etiquetas de título y sirven para destacar un texto en base a su tamaño, es decir, hacen el texto más grande o más pequeño. Existen hasta 6 tamaños de etiquetas de encabezado.
Etiquetas
Ejemplo
<h1> </h1>
Texto de prueba
<h2> </h2>
Texto de prueba
<h3> </h3>
Texto de prueba
<h4> </h4>
Texto de prueba
<h5> </h5>
Texto de prueba
<h6> </h6>
Texto de prueba
Párrafos
Las etiquetas para agrupar el texto en párrafos es la siguiente: <p> </p>
Dentro de esas etiquetas irá el texto que queramos diferenciar como párrafo.
Es posible cambiar la alineación del texto de cada párrafo. Para ello se ha de aplicar el atributo align y darle un valor, el valor puede ser left (izquierda), right (derecha), center (centrado) o justify (justificado), por ejemplo: <p align=”left”> </p>
Saltos de línea
Al pulsar la tecla INTRO con un editor de texto producimos un salto de línea pero en un documento Html esto no ocurre ya que el salto no se muestra en el navegador. Para que el salto se haga visible hay que insertar la etiqueta<br> donde queramos producir el salto. Se parece a la etiqueta de párrafo <p> pero el espacio de interlineado que deja es menor.
No hay que insertar la etiqueta </br> ya que la etiqueta <br> no necesita etiqueta de cierre.
Por ejemplo, para insertar el texto:
Bienvenidos al curso Diseño de páginas web: Dreamweaver,
Se trata de un curso Online con un total de 50 horas de duración dirigido a PAS y PDI de la Universidad de Valencia.
Habría que escribir:
Bienvenidos al curso Diseño de páginas web: Dreamweaver, <br> Se trata de un curso Online con un total de 50 horas de duración dirigido a PAS y PDI de la Universidad de Valencia.
Separadores
Este elemento dibuja una línea horizontal que sirve para separar elementos. Se produce insertando la etiqueta <hr>. Esta etiqueta no necesita etiqueta de cierre pero se pueden especificar algunos valores para definir su aspecto:
Atributo
Significado
Valores
align
alineación de la línea en la página
left(izquierda)
right (derecha)
center (centro)
width
ancho de la línea
se mide en píxeles o con porcentaje
size
alto (grosor) de la línea
se mide en píxeles (por ej. 3px)
noshade
eliminar el sombreado de la regla
no tiene ningún valor
Por ejemplo, cuando escribimos lo siguiente:
Curso Dreamweaver<hralign=“left”width=“300%”size=“5”noshade> Bienvenidos al curso Diseño de páginas web: Dreamweaver, <br> Se trata de un curso Online con un total de 50 horas de duración dirigido a PAS y PDI de la Universidad de Valencia.
Observamos el siguiente resultado:
Curso Dreamweaver
Bienvenidos al curso Diseño de páginas web: Dreamweaver,
Se trata de un curso Online con un total de 50 horas de duración dirigido a PAS y PDI de la Universidad de Valencia.
Sangrados
Para que un texto aparezca sangrado (con espacio en los márgenes izquierdo y derecho), se inserta éste entre las etiquetas <blockquote>y</blockquote>. Esta etiqueta hace que el texto aparezca en una nueva línea y ligeramente metido hacia dentro.
Si se escriben varias etiquetas <blockquote> y</blockquote> se consigue que los márgenes sean mayores.
Por ejemplo: Bienvenidos al curso Diseño de páginas web: Dreamweaver,
Se trata de un curso Online con un total de 50 horas de duración dirigido a PAS y PDI de la Universidad de Valencia.
Se escribe de la siguiente manera:
Bienvenidos al curso Diseño de páginas web: Dreamweaver,
<blockquote>
<blockquote>
Se trata de un curso Online con un total de 50 horas de duración dirigido a PAS y PDI de la Universidad de Valencia.
</blockquote>
</blockquote>
Imagenes
A medida que ha ido evolucionando el lenguaje Html las imágenes han ido cobrando importancia dentro de la página web, incluso en determinadas webs en las que el contenido es necesariamente visual (páginas web de fotógrafos por ejemplo) éstas son el elemento más importante. Antes no se empleaban tanto debido a que el tamaño de las imágenes ralentizaban mucho la carga de una página web, hoy en día esto no sucede debido al aumento de la velocidad de datos (banda ancha más rápida) y a los eficaces sistemas de compresión de la imagen. De cualquier modo, las imágenes son un gran complemento del texto y además enriquecen el conjunto visual de la página, la hacen mucho más atractiva. Debido a este auge de la imagen, que en muchos casos predomina sobre el texto, están surgiendo Redes Sociales basadas únicamente en la imagen como es el caso de Pinterest, 500px o Flickr, todas ellas con un aspecto muy cuidado y atractivo.
La etiqueta <img> es la etiqueta encargada de insertar imágenes. Esta etiqueta no necesita etiqueta de cierre puesto que la imagen aparece una sola vez, no hay que decirle donde empieza y dónde acaba. La ruta (ubicación) de la imagen ha de especificarse a través del atributo src. Por otro lado, con el atributo alt se establece un texto alternativo a la imagen. Este texto aparecerá solo si el navegador no puede mostrar la imagen, por ejemplo si un determinado dispositivo no puede cargar la imagen mostrará el texto alternativo en su lugar, por ello es importante ponerlo. Este texto ha de dar una breve descripción de la imagen. El texto alternativo se muestra también al situar durante unos segundos el puntero sobre la imagen.
Así pues, para insertar una imagen como ésta:
Panorámica Tarongers
Habría que escribir:
<imgsrc=“imagenes/panoramica_tarongers.jpg” alt=”Panorámica del Campus de Tarongers”>
En este caso, se ha de tener en cuenta que la imagen está dentro de la carpeta imagenes (que se encuentra en el mismo directorio que el documento html de nuestra web) y se llama panoramica_tarongers.jpg
Es necesario poner la extensión del archivo de imagen (en este ejemplo se trata de un .jpg) para que el navegador reconozca el tipo de archivo. Es recomendable que todos los documentos html se encuentren en una misma carpeta, y que dentro de este directorio existan otras carpetas para agrupar otros elementos, como puede ser una carpeta destinada a almacenar imágenes, o una carpeta destinada a almacenar archivos de audio, etc. De este modo, nuestra estructura web interna (no visible para los usuarios) estará mucho mejor organizada y será más fácil localizar cualquier archivo.
Ruta Absoluta o Relativa
La ruta de una imagen (o de cualquier otro elemento multimedia) puede ser absoluta o relativa.
Nos referimos a ruta absoluta cuando la imagen está alojada en un servidor web externo y la ruta que ponemos para acceder a ella es la URL en la que está alojada (indicando protocolo, servidor, carpeta y nombre). Por ejemplo,
Por otro lado, la ruta es relativa cuando las imagen está guardada en una carpeta propia de nuestra web y ponemos la ubicación de dicha carpeta .
<imgsrc=“imagenes/panoramica_tarongers.jpg” alt=”Panorámica del Campus de Tarongers”>
Tamaño de la imagen
El ancho y el alto de la imagen se puede establecer mediante los atributos width y height, respectivamente. De este modo, aunque la imagen tenga unas medidas fijas, podremos escalar o modificar su tamaño para adaptarlo a nuestras necesidades. Por ejemplo:
Imagen de tamaño: 350 (ancho) x 506 (alto) px
Código:
<imgsrc=“imagenes/foto_estudio.jpg” alt=”Foto del estudio” width=”350px” height=”506px”>
Imagen de tamaño: 200 (ancho) x 289 (alto) px
Código:
<imgsrc=“imagenes/foto_estudio.jpg” alt=”Foto del estudio” width=”200px” height=”289px”>
Bordes
Normalmente, al visualizar una página en un navegador las imágenes aparecen sin borde pero mediante el atributo border es posible establecer uno. El atributo border tiene un valor numérico que indica el grosor en píxeles del borde.
Si se desea establecer un vínculo sobre una imagen (los vínculos se explicarán en el siguiente punto) y no se quiere mostrar el borde (borde que aparece coloreado por tratarse de un vínculo), es necesario establecer border=“0”.
Alineación de la imagen respecto al texto
El atributo align es el que describe la alineación de las imágenes y lo hace con respecto a la línea de texto en la que se encuentran. Por ejemplo, para una imagen alineada a la derecha en el código se escribiría lo siguiente:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus, elit vel scelerisque rutrum, orci lacus auctor risus, sit amet auctor risus mauris vel arcu.
Sus valores pueden ser:
Valores
Efecto
Ejemplo
absbottom
Posición inferior absoluta
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus, elit vel scelerisque rutrum, orci lacus auctor risus, sit amet auctor risus mauris vel arcu.
absmiddle
Posición medio absoluta
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus, elit vel scelerisque rutrum, orci lacus auctor risus, sit amet auctor risus mauris vel arcu.
baseline
Posición línea de base
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus, elit vel scelerisque rutrum, orci lacus auctor risus, sit amet auctor risus mauris vel arcu.
bottom
Posición inferior
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus, elit vel scelerisque rutrum, orci lacus auctor risus, sit amet auctor risus mauris vel arcu.
left
Posición izquierda
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus, elit vel scelerisque rutrum, orci lacus auctor risus, sit amet auctor risus mauris vel arcu.
middle
Posición medio
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus, elit vel scelerisque rutrum, orci lacus auctor risus, sit amet auctor risus mauris vel arcu.
right
Posición derecha
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus, elit vel scelerisque rutrum, orci lacus auctor risus, sit amet auctor risus mauris vel arcu.
texttop
Posición texto superior
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus, elit vel scelerisque rutrum, orci lacus auctor risus, sit amet auctor risus mauris vel arcu.
top
Posición superior
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus, elit vel scelerisque rutrum, orci lacus auctor risus, sit amet auctor risus mauris vel arcu.
Espacio entre imágenes y texto
Otra característica que se le puede atribuir a la imagen es el espacio vertical y horizontal que puede tener respecto a texto. Para ello se emplean las etiquetas de espacio horizontal hspace y espacio vertical vspace.
El código que habría que escribir para dejar un espacio vertical y horizontal de 20px sería:
<imgsrc=”imagenes/libro.jpg” alt=”Libro abierto” width=”145px” height=”90px” border=”0″ align=”right”hspace=”20″vspace=”20″>
Imagen sin espacio
Imagen con espacio
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus, elit vel scelerisque rutrum, orci lacus auctor risus, sit amet auctor risus mauris vel arcu.Sed suscipit, ipsum vitae laoreet varius, nisl velit aliquam leo, sit amet imperdiet ligula eros ut sem. Donec at nunc et velit bibendum dictum. In posuere lobortis elit vel semper. Vivamus vel diam non mi tincidunt sollicitudin non sed ipsum. Nulla mattis dolor in est ultrices sed mattis leo venenatis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus, elit vel scelerisque rutrum, orci lacus auctor risus, sit amet auctor risus mauris vel arcu.Sed suscipit, ipsum vitae laoreet varius, nisl velit aliquam leo, sit amet imperdiet ligula eros ut sem. Donec at nunc et velit bibendum dictum. In posuere lobortis elit vel semper. Vivamus vel diam non mi tincidunt sollicitudin non sed ipsum. Nulla mattis dolor in est ultrices sed mattis leo venenatis.
Imagen como fondo
En el apartado Estructura: Head y Body se encuentra la explicación de cómo poner una imagen como fondo en una web.
ENLACES
Un link, hiperenlace, hipervínculo, o vínculo, es un enlace, que al ser pulsado lleva a alguna página o archivo. Puede haber diferentes tipos de enlaces: enlaces de texto, enlaces de imagen, etc. es decir, se puede insertar un enlace prácticamente sobre cualquier elemento. Del mismo modo, se puede enlazar a diferentes elementos: enlazar a una imagen, a un PDF, a un correo electrónico, etc. Las etiquetas entre las que se ha de insertar el objeto a ser enlazado son las siguientes: <a> Enlace </a>.
Al igual que ocurre con el atributo src en imágenes, se ha de especificar la ubicación o ruta en la que se encuentra la página o archivo que queremos mostrar al hacer clic sobre el vínculo. En este caso el atributo utilizado es href.
Por ejemplo, si queremos enlazar del siguiente modo con la página de la Universitat de València:
En este caso también existe la posibilidad de escribir la ruta absoluta o relativa del archivo tal y cómo se explica en el apartado Imágenes. La ruta relativa llevará al documento situado en nuestra carpeta del sitio mientras que la ruta absoluta llevará al documento a través de una URL (el documento deberá estar alojado en un servidor). En el ejemplo del enlace anterior podemos ver la ruta absoluta.
Enlace desde imagen
En este caso, en lugar de situar texto dentro de las etiquetas <a> </a> se sitúa una imagen.
Por ejemplo, para obtener el siguiente resultado (al pinchar en la imagen se observa que es un enlace):
El destino del enlace hace referencia a lo que ocurre cuando pinchamos en un vínculo, es decir, podemos hacer que la página se abra en la misma ventana del navegador que estamos visualizando o en otra nueva ventana. Esto se determina mediante el atributo target al que se le puede asignar los siguientes valores:
_blank:
Abre el documento vinculado en una ventana nueva del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre.
_self:
Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.
_top:
Abre el documento vinculado en la ventana completa del navegador.
Las opciones más empleadas son _blank y _self.
Aquí se puede comprobar el efecto:
<ahref=“http://www.uv.es“target =“_blank”>Universitat de València</a>
<ahref=“http://www.uv.es“target =“_self”>Universitat de València</a>
Lo más práctico y lógico es usar la opción de “ventana nueva” cuando la página a la que enlazamos es externa, es decir, no pertenece a nuestro sitio web y “misma ventana” cuando no queremos sacar al usuario del sitio.
Tipos de enlaces
Enlace a una página
Son los enlaces que hemos visto arriba. Son enlaces a páginas internas o páginas externas a nuestro sitio web. Aquí podemos ver el código de ejemplo con la ruta absoluta o relativa:
Enlace a la página de la Universitat de València (ruta absoluta): <ahref=“http://www.uv.es“target =“_blank”>Universitat de València</a>
Enlace a una página de nuestro sitio web (ruta relativa):<ahref=”pagina_contacto.html”>Enlace al formulario de contacto</a>
Enlace a un documento o fichero Enlace a un documento PDF (ruta absoluta) : <ahref=“http://www.uv.es/peticion_servicios.pdf“target =“_blank”>Formulario de petición de servicios</a> Enlace a un documento PDF (ruta relativa) : <ahref=“documentacion/peticion_servicios.pdf”target =“_blank”>Formulario de petición de servicios</a>
Enlace a una imagen Enlace a una imagen (ruta absoluta) : <ahref=“http://www.uv.es/imagenes/libro.jpg“target =“_blank”>Ver imagen</a> Enlace a una imagen (ruta relativa) : <ahref=“imagenes/libro.jpg”target =“_blank”>Ver imagen</a>
Enlace a un correo electrónico Enlace a un correo: <ahref=“mailto:sfpie@uv.es”>Correo SFPIE</a> Enlace a un correo con asunto predeterminado: <ahref=”mailto:sfpie@uv.es?subject=el asunto del mensaje“>Correo SFPIE</a>
Anclas
Las anclas son útiles cuando se tienen páginas extensas (en las que hay que hacer mucho scroll) divididas en diferentes apartados ya que permiten ir al apartado deseado. Se ha de tener en cuenta que es poco recomendable hacer páginas tan extensas a no ser que sea estrictamente necesario, lo mejor es estructurar bien la información en diferentes páginas y realizar un buen esquema de navegación ya que la gente se satura al ver mucho contenido, sobre todo si es texto, a lo largo de una página. También se utilizan a la hora de crear índices. Las etiquetas son las mismas que para los enlaces normales <a> y </a>, la diferencia reside en el atributo name que es el que tendrá el valor que envíe a un punto determinado del documento (ese valor no ha de contener caracteres especiales).
Por ejemplo, para insertar un ancla o punto de fijación delante del un texto el código sería:
<aname=“enlace_tema2”> </a>Tema 2
Entre las etiquetas <a> y </a> no hay que insertar nada ya que lo que interesa enlazar es el ancla.
Si por ejemplo la página en la que estamos se llama links.htm, y el ancla que hemos creado antes se llama enlace_tema2, podemos crear un enlace que nos lleve a la línea de texto en la que se encuentra el ancla. Para ello habría que escribir:
<ahref=“links.htm#enlace_tema2”>Enlace a tema 2</a>
Si el ancla se encuentra en el mismo documento que el enlace, como hemos mostrado, podemos prescindir de poner el nombre de la página en el atributo href.
En el ejemplo anterior podríamos haber escrito:
<a
href=”#enlace_tema2″>Enlace a tema 2</a>
EJERCICIO SOBRE ENLACES E IMAGENES
Este ejercicio no es de carácter obligatorio pero con el mejoraremos la creación de enlaces y la inserción de imágenes. Para la realización de una página web con código Html tan solo es necesario el bloc de notas o cualquier editor de textos similar. Escribiremos el código a mano y, a continuación, guardaremos el documento como documento .html para poder visualizarlo en un navegador.
El ejercicio consiste en crear, mediante código Html, una página sencilla que contenga:
– Un breve texto con dos enlaces definidos a continuación:
Un enlace a un correo electrónico
Un enlace a una web externa
– Una imagen alineada con el texto que sea a su vez un enlace a un vídeo de una web externa.
(La alineación puede ser a la izquierda o a la derecha, el texto se puede justificar del modo que se prefiera y los márgenes de la página también se establecerán con los tamaños que se prefiera)
Más o menos la página debería quedar así:
ELEMENTOS MULTIMEDIA
Como ya se ha comentado anteriormente, es posible insertar elementos multimedia dentro de una página web, pero se han de tener en cuenta algunas consideraciones como por ejemplo que la carga de un archivo multimedia puede ralentizar la página o que el mal uso de elementos multimedia puede resultar molesto para los usuarios.
Al acto de incrustar un elemento de vídeo o audio en una página web se le llama comúnmente “embeber” debido a que la etiqueta empleada para ello es la etiqueta <embed>.
Insertar audio y vídeo desde nuestro espacio web
La primera consideración a tener en cuenta es que los elementos de vídeo pesan bastante y ocupan mucho espacio en disco, por ello hemos comentado antes que la página tarda bastante en cargar. Una alternativa es no alojar el vídeo directamente en nuestro espacio de disco sino embeberlo de cualquier otra plataforma, por ejemplo subir el vídeo a Mmedia o Youtube y embeberlo desde ahí. Los formatos de vídeo más habituales son .mp4, .mov y .avi mientras que en audio se usa sobre todo el .mp3 y .wav , son formatos de poco peso y poca pérdida de calidad.
La etiqueta empleada para insertar audio y vídeo es <embed> y esta no precisa etiqueta de cierre. La ruta del archivo multimedia se le indicará mediante el atributo src al igual que ocurre con las imágenes. La etiqueta embed posee diversos atributos, algunos ya conocidos como width y height que determinan el tamaño del vídeo y otros específicos de esta etiqueta.
Atributos
Especificaciones
width=””
Sirve para indicar el ancho del reproductor vídeo/audio
height=””
Sirve para indicar el alto del reproductor vídeo/audio
autostart=””
Indica si el vídeo/audio ha de empezar de forma automática al cargar la página (valor “true”) o no (valor “false”). Es aconsejable que no lo haga por lo que pondremos autostart=”false”
loop=””
Sirve para que una vez se acaba el vídeo/audio éste vuelva a empezar otra vez. Sus valores son false (no se repite), true (se repite continuamente) y cualquier número que indique las veces que se repetirá el vídeo, por ejemplo loop=”3″
starttime=””
Especifica en que punto queremos que comience el vídeo/audio. Sus valores se miden en minutos y segundos respectivamente, es decir, starttime=”05:04″
endtime=””
Especifica el punto en el que queremos que acabe el vídeo/audio. Es igual que starttime.
volume=””
Controla el volumen del sonido y puede oscilar entre 0 y 100.
align=””
Sirve para alinear el reproductor
hidden=””
Este elemento sólo tiene valor “true” y sirve para hacer invisible el reproductor por lo que no es aconsejable usar este atributo ya que el usuario no tiene control sobre la reproducción.
Controls=””
Este elemento tiene los valores “console” (por defecto) o “smallconsole” que muestra una consola de reproducción más pequeña.
Para insertar audio, se insertará el siguiente código:
Para embeber audio o vídeo desde cualquier plataforma como Mmedia, Youtube, Vimeo, etc. hemos de ir a la página del vídeo que queremos incrustar, copiar el código embed y pegarlo en nuestro documento html. De este modo el elemento multimedia será visible en nuestra página. Aquí vemos el ejemplo de Mmedia y Youtube.
Mmedia
Para insertar un vídeo de Mmedia vamos a la página del vídeo y pinchamos en la opción del reproductor que dice “menu”. Nos aparecerá el código que hemos de copiar y pegar.
Youtube
Para insertar un vídeo de Youtube vemos que debajo del vídeo aparece el texto “compartir”, pinchamos y nos da la opción “insertar” que nos ofrece el código embed que debemos copiar y pegar.
Insertar otros elementos y widgets de cualquier plataforma
Además de poder insertar vídeo, audio y animaciones flash, el código Html permite insertar en nuestra página otros elementos, generalmente llamados Widgets, con diferentes funcionalidades. Un ejemplo de estos elementos son los botones sociales (botones de “Me gusta” o “Compartir” de algunas redes sociales), ventanas de redes sociales que se incrustan en nuestra página (por ejemplo conversaciones de Twitter en torno a un determinado Hashtag), así como calendarios, relojes, contadores de visitas, etc.
Estos Widgets se embeben en nuestra página del mismo modo que se puede embeber un vídeo de Youtube. Tan solo se ha de ir a la página en cuestión y copiar y pegar el código embed que nos facilita el desarrollador de la página.
Por ejemplo el código que nos proporciona Twitter para embeber un botón de “Seguir” es el siguiente: <a href=”https://twitter.com/UV_EG” class=”twitter-follow-button” data-show-count=”false” data-lang=”es” data-size=”large”>Seguir a @UV_EG</a>
Este ejercicio no es de carácter obligatorio pero nos servirá para asimilar la inserción de elementos multimedia. Utilizando el archivo de texto creado anteriormente (el del ejercicio sobre enlaces e imágenes), añade un código embed de un vídeo u otro objeto multimedia (un calendario de Google Calendar o un mapa de Google Maps) para completar la página. Recuerda guardar el documento de texto como .html para poder visualizarlo en el navegador.
El resultado debe ser más o menos este:
LISTAS Y TABLAS
==Listas==
Listas ordenadas
Listas sin ordenar
Listas de definición
Comprar:
Pan
Cebollas
Harina
Huevos
Lechuga
Comprar:
Pan
Cebollas
Harina
Huevos
Lechuga
PanCebollasHarinaHuevosLechuga
Como vemos, las listas ordenadas se caracterizan porque sus elemento están numerados. Esta numeración puede ser mediante cifras, mediante letras del abecedario o mediante números romanos. Por otro lado, las listas sin ordenar se identifican
utilizando viñetas que pueden ser, a su vez, círculos, cuadrados, discos, etc. El aspecto de las viñetas puede variar de un navegador a otro. También se pueden establecer imágenes como viñetas de una lista.
Las etiquetas que predeterminan cada tipo de lista son las siguientes:
Las tablas son una buena opción para presentar los contenidos de forma ordenada en filas y columnas, incluso muchos sitios web las usan para ordenar todo el contenido de la web. Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre estas etiquetas habrá que especificar las filas y columnas que formarán la tabla. Las filas quedarán determinadas por las etiquetas <tr> </tr> y las columnas (que vienen delimitadas por las celdas) se determinan mediante las etiquetas <td></td>. Una celda es la intersección entre una fila y una columna, por lo que podremos especificar el número de celdas por fila, que equivale a especificar el número de columnas por fila. Para crear una tabla es obligatorio especificar tanto en número de filas como el número de columnas. Por ejemplo, para crear una tabla con tres filas y una sola columna escribiremos:
Como se observa las celdas van dentro de las filas y todo ello dentro de la etiqueta table. Dentro de una tabla se puede insertar otra tabla y así sucesivamente, esto es lo que se llaman tablas anidadas.
Las tablas también tienen sus atributos, los vemos a continuación: Bordes de tabla
Se puede aplicar el atributo border a una tabla con un valor que determinará el grosor de dicho borde . Por defecto no se muestra ningún borde, pero si se pone el atributo border=”1″ obtendremos una tabla con un borde de un pixel de grosor. Para poner un color al borde emplearemos el atributo bordercolor(se escribirá en hexadecimal o con el nombre del color en inglés), escribiremos por ejemplo: <table border=”1″ bordercolor=”red”> <table>
Tamaño y posición de la tabla
Las tablas también permiten delimitar un ancho y un alto (éstos pueden representarse mediante porcentaje o mediante píxeles). Las etiquetas que delimitan el ancho y el alto son widht y height respectivamente. Por ejemplo, podemos delimitar una tabla que ocupe el 80% de la pantalla de ancho y que tenga unos bordes marcados, para ello escribiremos: <table widht=”80%” border=”2″> </table>
Dentro de las etiquetas <table></table> se definirá el número de filas y de columnas que tendrá la tabla.
Por otro lado, con el atributo align podremos alinear horizontalmente la tabla con respecto a la página y con el atributo valign podemos alinearla verticalmente.
Los valores del atributo align son: Left (izquierda), Right (derecha), Center (centro).
Los valores del atributo valign son: Top (Arriba), Bottom (abajo), Middle (medio)
Espaciado entre celdas y entre su contenido
El atributo que se usa para generar espacio entre el contenido de las celdas y el borde es cellpadding, mientras que el atributo que determina el espacio entre celdas es cellspacing. Ambos contienen el valor numérico que le queramos dar ya que se mide en píxeles.
Si queremos determinar un espaciado único entre celdas, o entre celdas y su contenido, para toda la tabla hemos de meter el atributo dentro de la etiqueta <table>. Si por el contrario queremos especificar un espaciado solo para una determinada celda meteremos el atributo en la etiqueta <td> de dicha celda.
A continuación vemos un ejemplo en el que se ha dejado un espacio entre celdas de 10 px (cellspacing)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales ligula vitae lacus suscipit dictum. Nam quis turpis a nibh volutpat rhoncus. Proin vitae sem ut est euismod posuere ac porttitor mi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales ligula vitae lacus suscipit dictum. Nam quis turpis a nibh volutpat rhoncus. Proin vitae sem ut est euismod posuere ac porttitor mi.
En el siguiente ejemplo se han dejado 10 px de espacio entre el contenido de las celdas y el borde (cellpadding)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales ligula vitae lacus suscipit dictum. Nam quis turpis a nibh volutpat rhoncus. Proin vitae sem ut est euismod posuere ac porttitor mi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales ligula vitae lacus suscipit dictum. Nam quis turpis a nibh volutpat rhoncus. Proin vitae sem ut est euismod posuere ac porttitor mi.
Combinar filas y columnas
Se pueden combinar filas y columnas con los atributos Colspan (combina columnas) y Rowspan (combina filas). Por lo tanto, Colspan se puede definir como el número de columnas que ocupa una celda y Rowapan como el número de filas que abarca una determinada celda. Como podemos observar en la tabla que tenemos a continuación el apartado “Valores” ocupa en realidad lo mismo que ocupan los apartados “Peso” y “Potencia”, es decir, esa celda ocupa en realidad dos columnas y por lo tanto tiene un valor de colspan=”2″. Por otro lado, vemos que el apartado “Precio” es una celda que ocupa dos filas (ocupa lo mismo que la fila de “Valores” y la fila de “Peso” y “Potencia”), por ello tiene un valor de rowspan”2″.
Valores
Precio
Peso
Potencia
Modulo 1
890
70
995 Euros
Modulo 2
1.200
110
2.245 Euros
A continuación podemos ver el código necesario para la creación de esta tabla: Imágenes y color de fondo
Para insertar un color de fondo a la tabla escribiremos la etiqueta bgcolorseguida de un color escrito en hexadecimal (o un color de los admitidos escrito en inglés).
Por ejemplo para el color de fondo de la tabla escribiremos: <table bgcolor=”#”> </table>
Para el color de fondo de la celda escribiremos en la celda que queramos: <td bgcolor=”#”> </td>
Por otro lado, para insertar una imagen de fondo de tabla escribiremos la etiquera background seguida de la ruta en la que se encuentra la imagen que queremos insertar (pdemos insertarla en toda la tabla o sólo en una celda). Por ejemplo: <table background src=”imagenes/fondo.jpg”> </table>
EJERCICIO SOBRE TABLAS
Este ejercicio no es obligatorio pero sirve para poder comprender mejor el funcionamiento de las tablas y la inserción de imágenes. El ejercicio consiste en el montaje de un “puzzle de imágenes” mediante una tabla, es decir, el alumno deberá usar el lenguaje html para crear una tabla en la que se inserten cada una de las imágenes tal y como vemos en la figura de ejemplo. Para ello se ha seleccionado una web (Ikea) y se ha fraccionado en sectores para que esta sea montada de nuevo mediante tablas escritas con código Html.
Un consejo: será muy útil hacer la tabla con bordes.
Aquí puedes descargar la carpeta con las imágenes necesarias para la realización del ejercicio: Carpeta con imágenes
Capas
Podemos insertar una capa con las etiquetas <div> y </div>. Estas etiquetas sirven para crear bloques o capas, a las que podemos dar estilos, que permiten distribuir el contenido de una web (se distribuye una capa para la cabecera, otra para el menú, otra para el contenido principal, otra para el pie de página, etc.) Las capas pueden situarse en cualquier parte de la página y en ellas podemos insertar contenido HTML, estas capas pueden ocultarse y solaparse lo cual enriquece bastante el diseño. A través del atributo id se le da un nombre a la capa y con estilos se establece el resto de propiedades de la capa. Este estilo puede estar ubicado en el propio Html (dentro del Head o dentro de la propia etiqueta Div) o en una hoja externa.
Los atributos más empleados son Id (para identificar la capa) y Class (para aplicar a la capa estilos CSS). A través del atributo style (o de una hoja de estilos vinculada y con los identificadores Id o Class) se pueden establecer las propiedades que se encuentran a continuación (se trata de un pequeño avance del apartado de estilos CSS). Estas propiedades del atributo styleirán entre comillas dobles, con un punto y coma detrás de cada una. Para asignar los valores a las propiedades se utiliza el símbolo : (dos puntos).
– Position: Para que la capa aparezca en la posición establecida, se ha de introducir este atributo con el valor absolute. Si no se estableciera este valor, la capa se mostraría pegada al margen izquierdo, en la posición en la que hubiera sido insertada dentro del código. Con las propiedades left (izquierda) y top (superior) se establece la posición de la capa respecto a los márgenes izquierdo y superior de la página. Esta medida se puede establecer en píxeles (px) o con porcentaje (%).
– Widht y Height: sirve para establecer el tamaño de la capa. Se ha deponer un valor numérico en píxeles o porcentaje. – Z-index: establece el índice de la capa dentro de la página. Esto sirve para solapar capas (las que tengan un índice mayor irán por encima). – Visibility: sirve para establecer la visibilidad de la capa. Puede tomar los valores inherit (se muestra la capa mientras la capa a la que pertenece también se esté mostrando), visible (muestra la capa, aunque la capa a la que pertenece no se esté viendo) y hidden (la capa está oculta). – Layer-background-image y Background-image: establecen una imagen de fondo para la capa. La ruta y el nombre de la imagen han de aparecer entre paréntesis, después de la palabra url.
– Layer-background-color y Background-color se puede establecer un color de fondo para la capa. Ha de ser un nº hexadecimal. – Overflow: establece si se mostrará o no el contenido de la capa cuando no pueda ser visualizado en su totalidad, por ser la capa demasiado pequeña. Puede tomar los valores visible (se muestra todo el contenido de la capa, aunque esto implique hacer que la capa sea más grande), hidden (no es posible visualizar el contenido de la capa que no quepa en ella), scroll (se muestra la barra de desplazamiento, aunque el contenido de la capa pueda ser visualizado totalmente) y auto (se muestra la barra de desplazamiento cuando sea necesario).
Por ejemplo, podríamos insertar una capa escribiendo el siguiente código: <div id=“capa”style=”position:absolute; width:200px;height:115px;z-index:3;visibility:visible;background-image: url(imagenes/fondocapa.gif);“></div>
Otra forma de insertar capas es utilizando las etiquetas y , en lugar de las etiquetas <div> y </div>. La etiqueta se utiliza del mismo modo que la etiqueta <div>.
A continuación se muestra una web dividida en varios div:
Aunque se puede poner como identificador (Id) cualquier nombre con el que queramos identificar la capa para aplicarle un estilo, hay una serie de nombres comunes que los diseñadores web suelen usar para identificar algunos elementos que tenemos a continuación (tal y como se muestra en la imagen superior):
Contenedor: Para definir todo el contenedor de la página se suele emplear como id la palabra Container o Wrapper. Se emplea para definir las características básicas de la página: su anchura, sus bordes, imágenes laterales, si va centrada o no, etc.
Cabecera: Para definir la cabecera se suele emplear la palabra Header. Ésta incluye todos los elementos que aparecen en la parte superior de la página: logotipo, imagen o banner, etc.
Contenido principal: Para definir el contenido central se usa la palabra Content o Maincontent. Incluye el contenido principal y éste dependerá de la temática de la página: información de la biografía, información de contacto, presentación, etc.
Menú de navegación: Para definir el contenido del menú de navegación se suele emplear la palabra Nav.
Contenido lateral: Para las columnas laterales se suele emplear el nombre Sidebar (Sidebar left o Sideba right dependiendo de si la columna está en la izquierda o la derecha). Engloba por ejemplo un apartado de noticias, alguna ventana embebida de alguna red social, links de interés, etc.
Pie de página: Se emplea la palabra Footer para definir la parte inferior de la página web: aviso de copyright, política de privacidad, etc.
Ejercicio: crear página con Html
Es hora de crear nuestro propio sitio web con Html, este ejercicio es voluntario pero nos servirá de ayuda para asentar los conocimientos que hayamos adquirido hasta ahora. Para la realización de sitio web con código Html tan solo es necesario el bloc de notas o cualquier editor de textos similar. Escribiremos el código a mano y a continuación guardaremos el documento como documento .html para poder visualizarlo en un navegador. El sitio ha de contener algunos de los elementos vistos hasta ahora (no es necesario que los contenga todos) y un menú sencillo hecho con texto o con imágenes sobre el que se pueda navegar para pasar de una página a otra del sitio. Para realizar un menú tan solo es necesario crear hipervínculos a nuestras páginas del sitio.
Subida del proyecto al espacio web de la UV
Como ya se ha comentado en el apartado dedicado a La exportación del proyecto, para poder subir nuestra web a la red, y así hacerla visible en todo el mundo, tenemos que tener un dominio contratado al cual podemos subir esos archivos. Para poder disfrutar del espacio web que nos proporciona la UV primero se tiene que solicitar la activación de nuestro espacio web personal al CAU (Centro de Atención al Usuario/a) de la Universitat de València. El procedimiento es sencillo y se realiza de forma automática.
En primer lugar, entramos en nuestro espacio personal de la UV y hacemos clic en Els meus comptes (al lado del espacio habilitado para nuestra fotografía).
A continuación pinchamos en Activació/Desactivació de la meua pàgina web y procedemos a activar nuestro espacio.
Una vez habilitado el espacio ya podemos subir nuestro sitio web. Existen tres modos de subir el sitio web a nuestro espacio: desde el propio navegador, desde una unidad de red creada y desde un programa FTP.
|| || || ||
Desde el navegador
Subir archivos mediante un navegador:
Una vez activado el espacio web tenemos que ir a la carpeta Web para poder subir los archivos. A continuación, accedemos al nuestro entorno de usuario y después vamos a la carpeta Disc Virtual.
Dentro de la carpeta Disc Virtual vamos a la carpeta Web.
Cuando estamos dentro podemos ver los archivos que tenemos ya subidos, si es que los tenemos, o podemos ver el espacio vacío con un archivo llamado index.html que aparece por defecto. Este archivo es el más importante ya que es el primer archivo que lee el navegador y que vincula con el resto de páginas. Este archivo no tiene que estar dentro de ninguna carpeta si queremos entrar directamente a la web sin pasar por ninguna carpeta, tiene que estar siempre fuera cómo se muestra en la siguiente imagen. Los archivos también se pueden modificar desde este espacio ya que se dispone de un editor WYSIWYG (icóno del lápiz) y de un editor HTML (icono del folio con los corchetes).
En la parte inferior tenemos un menú que nos permitirá cargar los archivos nuevos, borrar archivos, o sustituir los que ya tenemos. El principal problema de este método es que los archivos se tienen que cargar un a uno o subir una carpeta comprimida y descomprimirla en el propio espacio Web (aquí están las instrucciones para llevar a cabo ese proceso).
Desde Unidad de red
Subir archivos mediante una unidad de red
En primer lugar tenemos que crear una Unidad de Red en nuestro ordenador. La manera de hacerlo dependerá del tipo de ordenador que tengamos (si es PC o MAC) y del sistema operativo que tengamos (no se hace del mismo modo en Windows XP que en Windows 7).
a- En Mac:
Vamos al menú Ir > Conectarse al servidor
Ponemos la dirección del espacio de disco de la UV
Ponemos el usuario y contraseña que tenemos de la UV y nos conectamos
Ya tenemos acceso a las diferentes carpetas que tenemos en el espacio UV, entre ellas el espacio Web que es el que nos interesa. Iremos a la carpeta web y copiaremos los archivos de nuestro sitio web dentro de esta carpeta.
b- En PC:
Primero tenemos que ir a Equipo y hacer clic sobre Conectar a unidad de red
Ahora hemos hacer clic en “Conectarse a un lugar Web para usarlo como almacén de documentos e imágenes”. Nos aparece esta pantalla (Tenemos que clicar en “Siguiente”):
Se abrirá otra ventana y tenemos que volver a clicar siguiente.
A continuación, tenemos que poner ya la dirección del lugar al que queremos acceder con la palabra “FTP” (Protocolo de Transferencia de Ficheros) delante, en este caso: ftp://disco.uv.es
Aparece una ventana pidiéndonos que especificamos nuestro nombre de usuario (tenemos que poner el usuario de la universidad).
Después tenemos que darle un nombre a la ubicación de red (es el nombre con el cual nos aparecerá en nuestro ordenador). En este caso también hemos puesto disco.uv.es.
Después de hacer clic en “Siguiente” nos aparece el mensaje para finalizar la operación, si está marcada la opción de bajo se nos abrirá automáticamente la unidad de red al darle a finalizar.
Antes de abrirse la unidad de red nos pedirá el usuario y la contraseña de la Universidad de Valencia.
Una vez lo hemos hecho tendremos acceso a nuestro espacio de disco de la universidad y a nuestro espacio Web. De este modo podremos gestionar los archivos de una manera sencilla y con una visualización por carpetas. Tan solo tendremos que copiar nuestros archivos del sitio web creado y pegarlo en nuestra carpeta Web.
Desde programa FTP
Subir archivos mediante un programa de Protocolo de Transferencia de archivos (FTP)
En este caso dependerá del tipo de software de FPT que se utilice. Existen numerosos programas de transferencia de ficheros en el mercado, algunos gratuitos y otros de pago, por eso no entraremos en detalles. Un ejemplo de software eficaz y gratuito es Filezilla (vemos su aspecto en la imagen inferior). De todos modos, son programas muy sencillos en los cuales sólo se tiene que poner la dirección IP del lugar al que queremos subir los archivos y nuestro usuario y contraseña. Después sólo se tienen que arrastrar los archivos a la carpeta web.
Creación de espacios web y cursos on-line con Exelearning | El entorno de trabajo | Estilos | Ayuda | Árbol de contenidos | La actividad en SCORM | Área de trabajo | Los estilos | Modificar un estilo existente | | CSS | PROPIEDADES DE HOJAS DE ESTILOS | LA EXPORTACIÓN DEL PROYECTO | | HTML | | ESTRUCTURA: HEAD Y BODY | | TEXTO | | Texto de prueba | Imagenes | | ENLACES | | | EJERCICIO SOBRE ENLACES E IMAGENES | ELEMENTOS MULTIMEDIA | | EJERCICIO SOBRE ELEMENTOS MULTIMEDIA | LISTAS Y TABLAS | EJERCICIO SOBRE TABLAS | | Capas | | Ejercicio: crear página con Html | Subida del proyecto al espacio web de la UV | Desde el navegador | Desde Unidad de red | a- En Mac: | b- En PC: | Desde programa FTP
Fuente: Verónica Pardo Sánchez–
Tècnica d’Innovació Educativa
Serveide Formació Permanent i Innovació Educativa (SFPIE)
Centre de Formació i Qualitat ‘Manuel Sanchis Guarner’
Correo: Veronica.pardo@uv.es
Presentación_Exelearning.pdf
Creación de espacios web y cursos on-line con Exelearning.pdf
Creación de espacios web y cursos on-line con Exelearning
Ocultar
Bienvenidos al curso Creación de espacios web y cursos on-line con Exelearning,
Se trata de un curso Online con un total de 16 horas de duración dirigido a PAS y PDI de la Universidad de Valencia. Mediante este curso se pretende que el alumno pueda llegar a alcanzar unos conocimientos básicos del programa Exelearning que le permitan diseñar de forma sencilla un sitio web y alojarlo en el espacio web de la universidad. En el menú de la izquierda se encuentran todos los apartados que se tratarán en el curso. A través de ellos se permite una navegación tanto continua como discontinua, es decir, se puede seguir el orden de los contenidos o pasar de un bloque a otro de forma indistinta. Es recomendable seguir el orden establecido, aunque si algún usuario ya tiene conocimientos sobre alguno de los bloques puede saltarlo y pasar a otro. Se trata de un programa fácil e intuitivo que permite crear un sitio web sencillo sin nociones de programación.
Objetivos:
– Adquirir conocimientos web básicos.
– Planificar y diseñar correctamente páginas web sencillas.
– Crear un sitio web con Exelearning y subirlo al servidor web de la UV.
Contenidos:
– Breve introducción al diseño web y a la creación de recursos educativos.
– Introducción a Exelearning: filosofía del proyecto, instalación e interfaz.
– Entorno de trabajo:
– Los estilos: conocimientos básicos de CSS para modificar un estilo.
– Exportación: como sitio web / como paquete Scorm.
– Subida en el espacio web de la UV / Subida a Moodle (Scorm).
Metodología y Evaluación
El curso se plantea a modo de manual de consulta en el que se explican nociones básicas de Exelearning. Es obligatoria la asistencia al 85% de las horas presenciales y la nota final constará como APTO/NO APTO. Se evaluará en base a un único ejercicio final obligatorio que consistirá en la realización de un sitio web sencillo creado con Exelearning que demuestre los conocimientos vistos en el curso. Este sitio web deberá subirse al espacio web de cada usuario, nos referimos al espacio de la universidad, para poder ser evaluado. Las dudas serán tratadas a través del correo electrónico y en las dos clases presenciales.
Herramientas para la realización del curso
Para la realización de este curso serán necesarias las siguientes herramientas:
– Software Exelearning.
– Navegador actualizado (Firefox, Safari, Chrome o Internet Explorer).
– Bloc de notas o editor HTML para modificar las hojas de estilo (CSS).
=
=
Requititos mínimos que ha de tener nuestro sitio web para aprobar
– Estar hecho con Exelearning.
– Estar subido en nuestro espacio web de la Universitat de València.
– Tener al menos 5 ítems en el menú, es decir, tiene que contener como mínimo 5 páginas con contenido (independientemente de cual sea la estructura jerárquica de las páginas).
– Contener al menos 1 vídeo embebido de cualquier plataforma (Mmedia, Vimeo, Youtube, etc.)
– Contener al menos 3 imágenes y una de ellas que tenga la función de enlace (que sea un hipervínculo que lleve a una página interna o externa).
– Contener al menos tres enlaces dentro del texto (a páginas internas o externas), sin contar los enlaces que genera el propio menú.
– Contener al menos un cuestionario de cualquier tipo con un mínimo de tres preguntas (puede ser cualquiera de las Actividades interactivas).
– Contener una cabecera personalizada, es decir, modificar la cabecera de uno de los estilos predeterminados.
Introducción a Exelearning
Exelearning sirve para ayudar a los docentes en la creación y publicación de contenidos web que albergan diferentes recursos como enlaces, vídeos, actividades, cuestionarios, imágenes, etc. Es una aplicación multiplataforma, desarrollada en Python, que funciona en Linux, Windows y McOS.
Los recursos elaborados con eXe pueden exportarse en diferentes formatos: IMS, SCORM 1.2, SCORM2004, IMS, ePub3… también como páginas web navegables en HTML. Una vez exportado a cualquier formato se pueden publicar los contenidos en un espacio web o en las plataformas denominadas LMS (Learning Management System) como por ejemplo en Moodle, Sakai o en el Aula Virtual de la UV. A continuación se esplica en qué consiste un LMS o Sistema de Gestión de Aprendizaje:
LMS. Sistema para la gestión del aprendizaje from Yolanda Corral
El proyecto eXe Learning surgió financiado por el Gobierno de Nueva Zelanda y coordinado por la University of Auckland, The Auckland University of Technology, y Tairawhiti Polytechnic. Actualmente este proyecto está parado aunque recientemente han surgido nuevas líneas de desarrollo promovidas por instituciones españolas como el denominado proyecto Forja Cenatic (Cenatic es el Centro Nacional de Referencia de Aplicación de las TIC basadas en fuentes abiertas) en el que están implicados diferentes desarrolladores que van publicando nuevas versiones. También desde el CeDeC (Centro Nacional de Desarrollo Curricular) con el apoyo del INTEF (Instituto Nacional de Tecnologías Educativas y de Formación del Profesorado) y otras instituciones se está trabajando en el desarrollo de esta herramienta creando nuevas plantillas y realizando mejoras. Algunos de los proyectos que se sustentan bajo el software de Exelearning son: el proyecto CREA (Contenidos y Recursos Educativos de Andalucía), de acceso abierto, o la producción de materiales para la Formación Profesional, de acceso restringido.
El hecho de que sea posible la colaboración y el desarrollo por parte de diferentes instituciones y desarrolladores radica en que ExeLearning es una herramienta de autor de código abierto y por ello cualquier persona con conocimientos de programación informática puede desarrollar nuevos avances en la herramienta o participar en la creación de plantillas. El programa tiene Licencia Pública General GNU, en inglés GNU General Public License (**GNU GPL**), esta licencia garantiza a los usuarios (personas, organizaciones, compañías) la libertad de usar, estudiar, compartir (copiar) y modificar el software. El programa se basa en la filosofía del software libre y se pretende garantizar su uso a todos los usuarios y protegerlo de intereses económicos.
Gracias al desarrollo de estas instituciones españolas, el programa ha mejorado en algunos aspectos que conviene tener en cuenta (aquí presentamos las mejoras más relevantes aunque hay más):
Podemos encontrar numerosos videotutoriales del programa en el canal de Youtube del CEDEC, estos videotutoriales nos pueden servir de apoyo o ampliación a los contenidos vistos en este curso.
Entre las ventajas y desventajas de Exelearning encontramos:
Desventajas:
Ventajas:
Los desarrolladores están trabajando en mejorar el programa y por ello no sería de extrañar que en breve pudieramos contar con nuevas actualizaciones. Algunos técnicos del CEDEC están realizando pruebas y subiendo los vídeos de esa versión BETA (versión de prueba) a Youtube. A continuación tenemos un vídeo en el que se indica que próximamente podremos subir directamente los contenidos a Google Drive:
Conceptos básicos en el diseño de una página web
Uno de los términos más importantes a la hora de definir la estructura de un sitio web es el término de Usabilidad. Como explica Steve Krug en su libro “No me hagas pensar”:
“[…] Todo lo que con ello quiero decir es que, hasta lo que humanamente es posible, cuando se mire una página web ésta ha de ser obvia, evidente, clara y fácil de entender. Tendría que poder entenderla (qué es y cómo usarla) sin agotar esfuerzos pensando en ella”.
Esta cita resume perfectamente lo que se entiende por usabilidad y básicamente se refiere a que nuestro sitio web, por muy complejo que resulte, sea siempre fácil de usar y que todos los elementos se puedan localizar fácilmente sin que el usuario tenga que hacer un excesivo esfuerzo y, sobre todo, sin que acabe cerrando la página por no encontrar lo que busca…es muy importante que la navegación quede clara y el usuario sepa siempre dónde está y cómo volver a otras páginas. Por ello, lo mejor de desechar desde un principio la información que no nos resulte de utilidad, evitar las redundancias, evitar los excesos en el diseño (sobre todo gifts animados y elementos excesivamente coloreados) y dejar lo que realmente es necesario y organizarlo de una forma coherente y útil.
Aunque Exelearning no nos va a dar mucho a la elección propia sino que el diseño está totalmente guiado, es aconsejable es plantearse unas preguntas básicas previas a la elaboración de nuestro sitio y estructurarlas en torno a los siguientes puntos:
Descarga e instalación del programa
Al tratarse de un programa de código abierto, diferentes desarrolladores pueden trabajar de manera paralela en las actualizaciones. Desde la página oficial de los creadores del software se puede descargar el programa original, pero es un software que no se ha ido desarrollando desde hace más de un año porque, como ya se ha comentado, el proyecto está parado. A continuación, se puede ver una imagen de la página de Exelearning creada en origen, se puede visitar el sitio y descargar el software en http://exelearning.org/ .
Al margen de la página oficial, hay otras versiones más actualizadas, y por lo tanto más recomendables, que contienen mejoras en el software, así como numerosas plantillas de estilo. Este es el caso de la versión desarrollada en España por parte de diferentes instituciones (INTEF, CeDeC, TodoFP, TKNIKA, Formación permanente de la Junta de Andalucía, Grupo MAX ,etc.) Esta versión se puede descargar en la página http://exelearning.net/ y será la que trabajemos durante el curso.
La instalación es sencilla e intuitiva y, resulta prácticamente igual para los diferentes sistemas operativos. Tan sólo se tiene que descargar el software al ordenador, desde la pestaña de descargas, y seguir los pasos que se indican.
Si tomamos como ejemplo el caso de Windows hemos de ir a Exelearning 2.0.3 – Versión instalable (las otras dos versiones no se instalan en el ordenador sino que se ejecutan directamente sin necesidad de instalación). Nos aparece una ventana en las que se nos pide permiso para guardar el archivo, hemos de aceptar.
Tras guardar, tenemos que ejecutar el archivo de instalación. En Mac a continuación tenemos que arrastrar el icono de eXe a la carpeta Aplicaciones. Una vez instalado el programa se nos creará un icono en el escritorio desde el que podremos acceder al programa, también se podrá acceder al programa desde Inicio.
Al ejecutar eXeLearning por primera vez, nos aparecerá una ventana de preferencias desde la que hemos de seleccionar el idioma y elegir el navegador en el que queremos trabajar. Si desmarcamos la casilla que aparece abajo no nos volverá a aparecer la ventana cada vez que ejecutemos el programa. Podremos volver a acceder a esta ventana desde Menu superior > Utilidades > Preferencias. De este modo podemos volver a cambiar el navegador que queramos usar como predeterminado.
El entorno de trabajo
El entorno de trabajo se divide en 4 partes bien diferenciadas: el menú superior, el árbol de contenidos, el bloque de actividades y el área de trabajo. A continuación podemos observar el entorno dividido por colores.
Menú superior
En el menú superior nos encontraremos las opciones necesarias para realizar tareas básicas como abrir, guardar, seleccionar estilos, imprimir, exportar, etc. A continuación explicamos cada uno de los ítems del menú más detalladamente.
Archivo
Al desplegar el menú Archivo encontramos diferentes opciones.
Nuevo / Ventana nueva / Abrir / Proyectos recientes
Guardar / Guardar como…
Hemos de ir guardando los cambios a medida que trabajamos en nuestro proyecto. Al guardarlo por primera vez pincharemos en Archivo> Guardar cómo y le daremos el nombre y la ruta que consideremos (la seleccionamos donde pone Guardar en:), para cambios posteriores iremos a Archivo> Guardar.
Al guardar el proyecto se nos crea un archivo con formato .elp .Este es el fichero que utilizaremos para trabajar, aunque será el fichero resultante de la exportación el que nos permitirá subir nuestros contenidos a un LMS o a un espacio web.
Imprimir
El programa nos permite imprimir los contenidos, dependiendo del ordenador (Windows, Linux, Mac) y de la impresora configurada, la ventana que nos aparecerá será diferente. En este caso el ordenador utilizado es un Mac y la impresora un modelo de Ricoh, la ventana que nos aparece es la siguiente. El resultado de la impresión dependerá del estilo que usemos y de las opciones de impresión que seleccionemos.
En el caso de los usuarios de Mac, si queremos exportar la impresión a .pdfmarcaremos en el desplegable de abajo Guardar como PDF. Por otro lado, los usuarios de Windows deberán tener instalada una aplicación del tipo PDF Creator para poder guardar en .pdf. Para usuarios de Linux el proceso es sencillo: haremos clic en Archivo > Imprimir. En la ventana que se abre, se nos mostrará una previsualización del contenido y las opciones de impresión del navegador.
Importar : HTML / Archivo XLIFF
El programa nos permite importar tanto archivos en formato XLIFF* como HTML y Metadatos. Pero, por la duración y objetivos del curso, no entraremos a detenernos en estas cuestiones más avanzadas.
*XLIFF es un formato de archivos que se emplea para la traducción de contenidos.
Exportar
eXeLearning nos permite exportar los contenidos generados a diferentes formatos para después integrarlos en diferentes soportes y entornos de aprendizaje. Los veremos brevemente ya que hemos incluido un apartado dedicado exclusivamente a la exportación.
Fusionar ELPs: Insertar paquete / Extraer paquete
Para poder reutilizar los contenidos creados podemos insertar materiales creados previamente en exelearning eXeLearning con la opción Insertar paquete, Para ello hemos de seleccionar una página de la estructura desde la que queremos añadir el contenido y mediante la opción “Insertar paquete” lo incorporaremos a nuestro proyecto. Por otro lado, podremos extraer contenidos a un nuevo archivo .elpmediante la opción Extraer paquete y seleccionando las páginas que queramos extraer.
Salir
Hemos de hacer clic en Salir cada vez que queramos cerrar la aplicación. Nos aparecerá una ventana para guardar los cambios, de este modo evitaremos que se nos borren cambios no guardado.
Utilidades
Al desplegar el menú Utilidades encontramos diferentes opciones. A excepción del Gestor de estilos y las Preferencias sobre el navegador y el idioma la mayoría de utilidades están enfocadas a un control más avanzado del programa y por ello no entraremos en profundidad a explicarlas.
Editor de iDevices
Se trata de una opción para usuario avanzado, con este ítem podemos crear, exportar e importar nuevos iDevices.
Gestor de estilos
Mediante este gestor podemos importar un estilo no presente en la aplicación, exportar los instalados y borrar aquellos que no nos interesa tener en el listado sin necesidad de ir a la carpeta del programa en la que se nos han instalado los estilos.
Preferencias
En Preferencias tenemos una pestaña de Configuración general en la que, como hemos comentado en el apartado de instalación, podemos seleccionar el idioma y el navegador que queremos utilizar. Por otro lado, aparece una pestaña llamada Avanzado en la que nos aparecen tres desplegables que nos servirán para:
– Configurar un formato predeterminado para documentos nuevos: podemos elegir entre HTML5 y XHTML.
– Configurar el modo del editor: el modo permisivo aceptará cualquier tipo de código aunque no cumpla con los estándares HTML5 o XHTML.
– Configurar el uso de enlaces internos (esta opción sólo es válida cuando exportamos a sitio web.)
Informe sobre recursos
Al solicitar un informe sobre recursos se crea un archivo CSV en en el que se registran rtodos los elementos y archivos contenidos en el .elp que se está generando. Esta es una opción prevista para grandes proyectos y de utilidad para creadores avanzados.
Visualización previa
La Visualización previa nos permite ver los contenidos creadosen (en HTML) en nuestro navegador predeterminado para hacernos una idea de cual es el resultado final.
Actualizar pantalla
Con esta opción la actualizamos la pantalla para ver los últimos cambios de nuestro trabajo.
Estilos
Desde esta opción podemos elegir cualquiera de los estilos cargados en Exelearning y dependiendo del estilo elegido tendremos un aspecto visual u otro. Con unos pocos conocimientos de CSS podemos modificar los estilos existentes para crear unos nuevos y si se tienen conocimientos avanzados podremos crear nuestros propios estilos partiendo de cero. En el apartado dedicado a los estilos se explicará brevemente cómo cambiar un estilo preestablecido para adaptarlo a nuestras necesidades.
Ayuda
En el apartado de Ayuda tenemos acceso a contenidos extra como tutoriales y manuales de eXe, notas de la versión que tenemos instalada y enlaces al sitio web y los foros de eXeLearning.net donde podemos realizar preguntas, notificar errores y pedir nuevas funcionalidades.
Árbol de contenidos
Con el árbol de contenidos podemos ir creando un menú de navegación estructurado en diferentes apartados o unidades para que los contenidos no sean presentados en una sola página, de este modo facilitaremos al usuario la navegación por nuestro sitio. Por defecto al abrir el programa aparece un primer nodo o página del menú denominada “Inicio”, desde esta portada colgarán el resto de contenidos que vayamos creando.
Podemos modificar el nombre de este nodo al hacer doble clic sobre el nodo en el árbol de contenidos o, si lo tenemos marcado, al hacer clic en Renombrar. Esto lo podemos hacer con todos los nodos que vayamos creando.
Añadir / Borrar página
Añadiremos nuevos nodos o páginas seleccionando el nodo del que queremos que cuelguen los nuevos contenidos y haremos clic en página Añadir página. Para borrar una página la hemos de seleccionar y, a continuación, hemos de hacer clic en Borrar. Al borrar una página no sólo borramos el ítem del menú sino que eliminamos todo su contenido y también las páginas que cuelgan de ese nodo.
A continuación se puede observar cómo quedaría el menú creado en el árbol de contenidos una vez exportado como sitio web (en este caso con el estilo INTEF). Al no haber contenidos creados, el espacio de la derecha se ve en blanco.
Trasladar páginas del menú y cambiar su jerarquía
Si por alguna cuestión queremos modificar el orden de alguno de los ítems del menú o crear dependencias entre las páginas, es decir, que una página ya creada se convierta en un subapartado de otra, hemos de marcar la página que queremos mover o incluir dentro de otra y hacer clic en las flechas inferiores.
Actividades
Los iDevices son las herramientas que nos permiten insertar actividades y contenidos de diversa índole en Exelearning (textos, galerías de imágenes, actividades de elección múltiple, etc.) Los desarrolladores del programa han ido perfilando cada vez mejor los diferentes iDevices hasta agruparlos en las categorías que tenemos actualmente organizadas según sus funcionalidades. Podemos crear nuevos iDevices dependiendo de nuestras necesidades aunque para ello hemos de tener conocimientos avanzados. En esta nueva versión de Exelearning, los iDevices se muestran agrupados por bloques de actividades según el tipo de información que representan (se pueden agrupar o desagrupar haciendo clic en el botón “Desagrupar los iDevices”). Además el usuario puede elegir los iDevices que quiere que se muestren marcando el botón “Editar los iDevices”, de este modo puede ocultar las herramientas que menos utiliza. No entraremos a describir de manera detallada cada uno de los iDevices que podemos elegir debido a que son herramientas muy sencillas de emplear, se trata en todos los casos de rellenar los huecos con las instrucciones que se indican y, tras esto, darle a aprobar (por ejemplo, en el caso de los cuestionarios, en el campo dónde pone pregunta se plantea la pregunta, dónde pone opción se plantean las opciones y dónde pone retroalimentación se plantea el feedback para el usuario…no tiene mayor dificultad).
La actividad en SCORM
Ocultar
Una de las actividades interactivas que más interesante nos puede resultar es la actividad de SCORM, esto se debe a que los cuestionarios creados en SCORM, y exportados como tal, nos facilitan feedback de los resultados de los alumnos al integrarlos en los diferentes LMS. En este tipo de actividad se proponen preguntas tipo test al igual que ocurre con la Pregunta de elección múltiple pero se permiteun rastreo de la actividad de los alumnos.
La elaboración de este tipo de cuestionarios es sencilla, al igual que ocurre con otro tipo de actividades interactiva, tan solo se han de rellenar los campos tal y como se indica. A continuación vemos un ejemplo de cuestionario con una sola pregunta.
===Pregunta===
¿Qué es un LMS?
Respuestas
Opción 1 Es un software para editar vídeo.
Opción 2 Es un sistema de gestión de aprendizaje.
Opción 3 Es un tipo de conexión.
Habilitar JavaScript
== Ocultar Para poder crear ese breve cuestionario hemos cumplimentado los campos de la siguiente manera.
Área de trabajo
En el área de trabajo observamos dos pestañas en la parte superior, la pestaña Autoría y la pestaña Propiedades. Para generar contenidos hemos de estar en la pestaña Autoría mientras que en la pestaña Propiedades encontramos con tres pestañas más que nos sirven para configurar los datos generales del proyecto (título del proyecto, autor, licencia, etc.), la exportación y los metadatos (mediante el estándar Dublin Core). En este caso nos centraremos en la pestaña Autoría.
La visualización del área de trabajo depende del iDevice o actividad seleccionada, aunque la mayoría de actividades se componen de un editor y un área de texto extensa en la que se añaden los contenidos. El editor, desarrollado por **TinyMCE**, es muy sencillo, intuitivo y similar al de otros programas como Word, se trata de un editor WYSIWYG (What You See Is What You Get en inglés “lo que ves es lo que obtienes”, es decir, lo que se ve en pantalla es el resultado final) de HTML y de código abierto. El editor permite dar formato al texto así como insertar diferentes elementos multimedia como imágenes, vídeos y animaciones, también, es posible representar expresiones matemáticas e insertar caracteres especiales y enlaces entre otras muchas opciones.
Así es como se visualiza el área de trabajo cuando se selecciona el iDevice de Texto Libre (en el bloque de Información textual):
Así es como se visualiza el área de trabajo cuando seleccionamos un iDevice de Pregunta Verdadero-Falso (en el bloque de Atividades interactivas), en este caso el editor se nos muestra escondido, pero podemos desplegarlo en cada uno de los campos:
Los estilos
Este es, sin duda, el punto más complejo puesto que requiere conocimientos de hojas de estilo CSS. Por eso, en este curso no vamos a profunditzar mucho en el tema. Lo más importante es, en este caso saber modificar un estilo predeterminado (los desarrolladores están continuamente trabajando en la creación de plantillas, por eso no se necesario que sepamos crearlas). Se trata de saber identificar los elementos básicos en la hoja de estilo (sobre todo la cabecera del lugar que suele traer el logotipo y el título o nombre del grupo) para poder modificarlo. En la siguiente página encontraréis información más detallada sobre las hojas de estilo:
http://librosweb.es/libro/css/
Para modificar un estilo tenemos que ir a la carpeta de estilos situada dentro de la carpeta de archivos del programa instalado, a continuación se explica el procedimiento para MAC y para PC:
MAC
Se debe ir a la carpeta en la que se ha instalado el programa, en este caso la carpeta Aplicaciones, con el botón secundario se debe marcar Mostrar contenido delpaquete.
Después se debe seguir la siguiente ruta: Contents >Resources > exe > style. Dentro de la carpeta style encontraremos todos los estilos disponibles.
Tras localizar los estilos, podemos escoger cualquier estilo predeterminado, después de copiarlo, cambiarle el nombre y modificar lo que queramos. Aunque podemos modificar directamente cualquiera de los estilos predeterminados, lo ideal es hacer una copia de la carpeta y renombrarla para realizar las modificaciones (de esta manera conservaremos siempre el estilo original). Lo más recomendable es elegir de entrada un estilo que nos guste y en el que no tengamos que realizar demasiados cambios. Podemos observar que en Exelearning se habrá incluido el nuevo estilo, en este caso hemos creado el estilo llamado “Manual_Exelearning” a partir del estilo predeterminado “Tknika”.
PC
En un PC se tiene que ir también al lugar en el cual se ha instalado el programa, por defecto lo encontraremos en:
c:\Archivos de Programa\exe\
Tras esto, debemos acceder del mismo modo a la carpeta Style y aquí encontraremos los estilos que podemos modificar.
Modificar un estilo existente
En Exelearning podemos modificar todo el estilo de un sitio creado con esta herramienta, desde el tamaño de cada bloque hasta el aspecto del menú pasando por los colores de los párrafos, enlaces o encabezados, entre otros. No obstante, puesto que se trata de un curso de 16 horas y el lenguaje CSS resulta un lenguaje complejo para el que se requiere tener además conocimientos de HTML, veremos solo algunos detalles que nos ayudarán a personalizar un poco nuestra páginas, aunque es importante tener en cuenta que podemos darle el aspecto que queramos con los conocimientos adecuados. A esto se ha de añadir que cada estilo tiene sus particularidades (el estilo denominado MAX nombra de un modo diferente los archivos), aunque se explicarán los más generales.
Modificar cabecera y otras imágenes mediante sustitución
En primer lugar, tenemos que localizar qué se la imagen de cabecera para el sitio web, para hacer esto tenemos que abrir el archivo CSS llamado Content (se puede abrir con cualquier editor web o con un editor de textos sencillo), este archivo está en la carpeta del estilo que hemos copiado y renombrado .
En las primeras líneas se explica como se ha nombrado la imagen de la cabecera porque sea más fácil de localizar y modificar.
Sabiendo que la cabecera en este caso se ha nombrado como my_header.jpg ya podemos proceder a cambiar el archivo de cabecera de un modo sencillo y sin saber CSS. Para ello, localizamos la imagen en la carpeta de estilo y, después de comprobar el tamaño que tiene (985 x 108px en el caso del estilo que hemos elegido para este curso), elaboramos nuestra propia cabecera con el software que nos resulto más sencillo (Paint, Photoshop, Gimp. etc.) y lo guardamos con el nombre de my_header.jpg, tras esto, lo pegamos o arrastramos a la carpeta de nuestro estilo machacando, de este modo, la cabecera original. Se trata básicamente de sustituir una cabecera por otra, esta la manera más sencilla de realizarlo sin necesidad de escribir ni una sola línea de código. De este modo tan sencillo podemos cambiar todas las imágenes del estilo desde la cabecera que parece cuando se exporta como página sola hasta los iconos de los iDevices.
Es conveniente hacer la cabecera con las mismas medidas para no descuadrar el estilo original. Si decidimos darle otras medidas se tiene que tener en cuenta que esto puede influir lo el resto del diseño y este puede acabar deformándose (en ese caso habrá que saber un poco de código CSS para modificar las medidas de la página y adaptarla a la nueva cabecera). El tamaño de la cabecera depende del estilo que hayamos elegido para modificar.
Cambiar fondo (Background)
La palabra utilizada para designar la imagen de fondo de una página es background y habitualmente se abrevia con las letras bg. Por eso, si vamos a la carpeta que contiene las imágenes del estilo, podemos ver que hay algunas imágenes que contienen las letras bg en el nombre (por ejemplo: page_bg.gif o popup_bg.gif). Esto quiere decir que se trata de imágenes de fondos (la primera es la de fondo de página y la segunda es el fondo de un pop-up). A veces no hay una imagen de fondo en el estilo que hemos elegido sino que se trata de un color sólido de fondo. En este caso, si queremos poner una imagen, tenemos que añadir un poco de código a la hoja de estilo. Para lo cual tenemos que alojar la imagen de fondo en la carpeta en la cual están todos los archivos de estilo y después tenemos que abrir el estilo del navegador (nav.css) y enlazar la foto en el apartado “body” con el siguiente código:
background-image: url(nombre_fondo.png);
Entre paréntesis tenemos que poner el nombre que le hayamos dado a la imagen con su correspondiente extensión. Cómo se muestra en el ejemplo:
Por otro lado, si no queremos poner una imagen de fondo y preferimos un determinado color sólido, podemos cambiar el color del estilo elegido de una manera sencilla. Tan sólo tenemos que ir al archivo nav.css y cambiar el código que se refiere al color de fondo, es decir, poner en la etiqueta “background” el color que queramos. Para hacer esto tenemos que tener en cuenta algunas consideraciones sobre los códigos de color existentes.
Los colores en HTML se representan mediante un código hexadecimal, mediante su nombre en inglés o mediante RGB. En la tabla siguiente podemos observar un ejemplo de 5 colores y sus diferentes códigos:
Por ejemplo, si queremos poner de fondo el tercer color de la tabla (el rosa) podemos hacerlo de las siguientes maneras (elegiremos una de las tres):
background: #BC8F8F;
background: Rosy brown;
background: (188,143,143);
Existen múltiples programas y aplicaciones web para obtener el código de un color. También hay en Internet numerosas parrillas con los nombres de los colores en inglés y sus equivalentes en hexadecimal y RGB. En las siguientes páginas puedes encontrar herramientas y parrillas de colores:
http://html-color-codes.info/
A continuación podéis ver dos imágenes de un sitio web creado con Exelearning, en la primera se ha puesto una imagen de fondo, en la segunda se ha puesto un color sólido (Rosy Brown en este caso).
CSS
Como hemos dicho, el objetivo de las hojas de estilo es facilitar la labor de formateado de un texto y separar el formato del contenido. Pero se ha de tener en cuenta que el estilo se puede insertar de tres maneras y tan solo la última es la que cumple la función descrita. Podemos dar formato a un texto de los siguientes tres modos:
Al igual que ocurre con Html, el código CSS se puede escribir usando cualquier editor de texto. Este código se puede aplicar a las etiquetas definidas Html (Body, p, h1…) o podemos aplicar nuestros propios nombres que usaremos como identificador para darle una propiedad CSS, es decir, por ejemplo podemos identificar toda la parte superior de nuestra página bajo el nombre “cabecera” y darle unas determinadas propiedades CSS. Aunque CSS no diferencia mayúsculas y minúsculas es mejor escribir en minúsculas para mayor compatibilidad, por otro lado, si se quiere insertar un comentario dentro den código sin que afecte al mismo se ha de hacer entre los símbolos /* */.
Las reglas de formato CSS tienen dos partes: el selector y el bloque de declaración. El selector es el elemento al que se va a aplicar el formato, puede ser un párrafo (p), un encabezado (h1), un nombre de clase (Class) o un identificador (Id), mientras que el bloque de declaración define los elementos de estilo que se van a aplicar, por ejemplo si el texto es azul, si el tipo de letra es Arial, etc. El bloque de declaración está formado a su vez por una propiedad y un valor, separadas entre si por dos puntos (:). La propiedad indica el aspecto que hay que cambiar (color, tamaño de letra…) mientras que el valor indica cómo hacerlo (color azul, tamaño 12 píxeles…)
Tal y como hemos comentado, podemos crear nuestros propios selectores para definir un estilo. El selector además de aplicarse a cada etiqueta Html puede ser un identificador o una clase.
Se pueden hacer dos clases diferentes para la misma etiqueta pero diferenciando el lugar en el que se encuentra la etiqueta, por ejemplo si la etiqueta p (párrafo) se encuentra dentro de una tabla podemos hacer que se comporte de un modo distinto a como lo haría si la etiqueta no está dentro de una tabla. Por ejemplo:
Clases
Con las clases se puede crear más de un estilo para cada etiqueta Html. Las clases dividen una etiqueta Html en varios tipos y a cada uno de ellos se le asigna un nombre. Este nombre se pone detrás de la etiqueta Html separada por un punto en la parte CSS mientras que en la parte de Html se pone la palabra Class=” “ y el nombre que hayamos seleccionado para vincularlo a ese estilo. Por ejemplo,
En el código Html pondremos:
<p class=”color_parrafos”> <p>
Mientras que en la hoja de estilos CSS definiremos esa clase:
p.color_parrafos {
color:red;
font-size: 18 px;
}
También podemos crear clases genéricas sin necesidad de poner la etiqueta Html delante del punto, cualquier etiqueta que tenga ese nombre de clase tendrá las propiedades que se hayan establecido en el CSS. Por ejemplo:
Si en el código Html ponemos:
<h1 class=”azul”> </h1> o <p class=”azul”> </p>
Y en el código CSS ponemos:
.azul {
color:blue
}
Tanto la etiqueta h1 como la etiqueta p llevan el nombre de clase “azul” y, por ello, a ambas se les aplicará el estilo que se ha definido para esa clase aunque sean etiquetas diferentes.
Identificadores
Este modo es parecido al anterior y sirve para especificar identificadores genéricos, no tienen que estar vinculados a ninguna etiqueta concreta de Html. Se establecen con el atributo id del mismo modo que antes lo hemos hecho con el atributo class, es decir:
<h1 id=”azul”> </h1>
Y en el código CSS ponemos:
#azul {
color:blue
}
En lugar de un punto delante del selector, para identificar un elemento idhemos de escribir una almohadilla en el código CSS. La diferencia radica en que el identificador sirve para identificar de forma única una etiqueta html, es decir si tenemos en el código un identificador de encabezado que se llame “azul” (<h1 id=”azul”> </h1>), no podemos tener luego en el mismo html un identificador de párrafo que se llame “azul” <p id=”azul”> </p>. El valor del atributo id de un elemento no puede repetirse en ningún otro atributo id del mismo documento. El identificador sirve también para poder identificar elementos javascript, por ello, si se usan las dos modalidades para la misma etiqueta (class e id) tendrá preferencia el elemento id.
Enlaces (A)
Los enlaces, que llevan en Html la etiqueta <a>, son una pseudo-clase y pueden tener diferentes formatos según su estado, es decir, pueden tener un determinado aspecto si son un enlace sin visitar, si son un enlace visitado o pueden tener otro aspecto al pasar el ratón por encima o al hacer clic.
Los valores posibles son:
Por ejemplo:
Los tipos de enlace se pueden poner solos o se pueden combinar con cualquier tipo de selector ya sea una etiqueta Html, una clase o un identificador para especificar qué enlaces queremos modificar. Esto se hace si por ejemplo sólo queremos modificar los enlaces de imagen o los enlaces de un determinado párrafo al que hayamos nombrado con una clase o identificador determinado.
Como ya se ha dicho, para vincular nuestro Html con una hoja de estilo tan solo es necesario escribir dentro de la etiqueta <head> </head> del html la etiquetas link y vincularla con la hoja de estilos que hayamos creado. Si por ejemplo hemos creado una hoja de estilos llamada estilo.css escribiremos:
<head>
<link href=”estilo.css” rel=”stylesheet” type=”text/css”>
</head>
La hoja de estilos deberá estar situada en el mismo directorio que el index.
Una buena página para profundizar en el tema de los estilos CSS es la siguiente:
PROPIEDADES DE HOJAS DE ESTILOS
Como se ha comentado antes, una regla consta de dos partes: el selector y la declaración. El selector indica a qué elementos afectará la regla. En la regla anterior el selector es body, por lo que el formato se aplicará al cuerpo de la página web.
Después del selector y un espacio en blanco aparecen unas llaves de apertura y de cierre. Entre ellas encontramos la declaración de la regla.
Es posible aplicar una misma regla a más de un elemento sin necesidad de repetirla:
h1, h2, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
En la regla de arriba, el selector está compuesto por las etiquetas h1, h2 y p, por lo que el formato que se establece en su declaración afectará a todos estos elementos.
A continuación se explican algunas de las propiedades de estilo que se pueden aplicar.
Formatos de fuente (Font)
Ejemplo para cambiar el formato de fuente de un párrafo:
Formatos de texto (Text)
Ejemplo para cambiar el formato de texto de un párrafo:
Formatos de fondo (Background)
Ejemplo para cambiar el formato de fondo (background) de un párrafo:
Formatos de lista (List)
Ejemplo para cambiar el formato de lista no numerada:
Formatos de cuadro o bloque (Box)
Entendemos por cuadro la zona que envuelve a una etiqueta Html, es una caja que puede ser visible o invisible. Se refiere al entorno y por eso se emplea sobre todo para posicionar elementos, por ejemplo se puede modificar la posición de una imagen respecto a su entorno (se puede alinear a la izquierda, a la derecha, centrar, dejar más margen a la derecha, etc.)
Ejemplo para cambiar el formato de una imagen:
Algunos elementos no contienen atributos para dar unos determinados formatos en CSS, por ello lo aconsejable es meter esos elementos dentro de otros para poder darles formato. Un ejemplo para que se entienda: una imagen en CSS no tiene la propiedad de alinearse al centro, pero esto no implica que no se pueda hacer. Lo más práctico para solucionarlo es meter la imagen dentro de un bloque como por ejemplo una capa (div) o un párrafo (p) y así centrar el contenido del bloque como si fuera texto. Por ejemplo, llamamos al div o al p “centrar_imagen” y escribimos en el código CSS:
Otra opción para el mismo problema consiste en crear un también un div en Html, y en CSS darle una medida (width) y unos valores en la propiedad margin respecto al su entorno como se ve en el ejemplo:
LA EXPORTACIÓN DEL PROYECTO
Una vez tengamos nuestro sitio web creado podemos exportarlo de diferentes maneras dependiendo del dispositivo en el que queramos que se visualice, como ya explicamos en la descripción del entorno de trabajo, podemos exportar a formato EPUB3, como sitio web, como paquete SCORM, como XLIFF, etc., dependerá siempre del uso que vayamos a dar a esos materiales.
En nuestro caso veremos los dos modos de exportación más extendidos: la exportación como sitio web (carpeta auto-contenida) y la exportación como Scorm para insertar en algún LMS. Aunque scorm no es el único es el único formato aceptado para el ámbito educativo, vemos que podemos exportar también a otros estándares educativos como IMS o Common Cartridge, se trata del formato más extendido y aceptado.
Exportar como sitio web como carpeta auto-contenida
Mediante esta opción crearemos un sitio web que respete todo el menú creado en el árbol de contenidos y que permita la navegación a través de los contenidos. Para ello, tenemos que ir a la pestaña del menú Archivo > Exportar para exportar como Sitio web > Carpeta Auto-contenida.
A continuación se nos abrirá un cuadro en el cual se nos pregunta dónde queremos guardar la exportación. Tenemos que darle una ubicación, seleccionando la carpeta en la que queramos ubicarlo, y darle el nombre que queramos a la carpeta.
Si vamos a la carpeta creada y hacemos doble clic en el archivo index.htmlveremos nuestro sitio web en nuestro ordenador. Para que el sitio sea visible en Internet deberemos tener contratado algún servicio de alojamiento webde pago o gratuito, estos últimos suelen insertar publicidad y tener bastantes limitaciones, para poder subir los contenidos y que estén disponibles a todo el mundo. En nuestro caso, la Universitat de València nos facilita un espacio web gratuito y con unas buenas condiciones para que podamos subir nuestro sitio web. En el siguiente apartado mostramos cómo subir esos materiales al espacio de la UV.
Exportación SCORM
SCORM (Sharable Content Object Reference Model) es un formato estandarizado para contenidos educativos estructurados. Al igual que el .mp3 para la música o el .jpg para imagen, el formato SCORM surge de la necesidad de homogeneizar los diferentes contenidos educativos creados bajo un mismo formato. De este modo, cualquier contenido SCORM puede ser interpretado en plataformas compatibles, por ejemplo en Moodle por citar una de las más conocidas o el Aula Virtual de la Universitat de València. Este estándar surgió con la finalidad de facilitar la tarea a los profesionales que trabajan con contenidos educativos que necesitan ser fácilmente reutilizados y editados, por ello se pretenden satisfacer las siguientes premisas:
Para obtener materiales que se ajusten a las premisas arriba mencionadas hemos de ir a Archivo > Exportar > Estándar educativo > SCORM 1.2 o SCORM2004 . Como resultado obtendremos una carpeta comprimida (.zip) que podrá exportarse a múltiples plataformas LMS que admitan esta especificación (por ejemplo Moodle, Sakai,…)
Respecto a las diferencias entre SCORM 1.2 y SCORM2004 hemos de añadir que la primera es una versión anterior y, por lo tanto, SCORM2004 es una versión mejorada que surge de la necesidad de flexibilizar más el estándar anterior. Encontramos más información al respecto en el siguiente enlace.
HTML
HTML, son las siglas de HyperText Markup Language (lenguaje de marcado hipertextual) y se trata, dicho de forma simple, del lenguaje de marcación más extendido que se usa para describir contenido en la red. Por lenguaje de marcación o lenguaje de marcas entendemos la codificación que se hace de un documento mediante etiquetas (<>) que posteriormente serán “traducidas” por un navegador (programa que permite visualizar las páginas web). Los documentos HTML deben tener la extensión html o htm, de este modo, el usuario puede visualizar los contenidos de una página web en un navegador. No se debe confundir HTML con un lenguaje de programación como puede ser Javascript se trata más bien de un lenguaje descriptivo. Este código describe y traduce los contenidos ya sean textos, imágenes u otros elementos. Este lenguaje fue creado por Tim Berners Lee (conocido por ser el creador de la Web) y su equipo en 1991ante la necesidad de intercambiar y distribuir información de manera efectiva a través de la World Wide Web. También está detrás de la creación del protocolo HTTP (HyperText Transfer Protocol) y el sistema de localización de objetos en la web URL(Uniform Resource Locator). El organismo encargado de regular y normalizar el código HTML es el Consorcio de la World Wide Web (abreviado W3C)*, fundado también en 1994 por Tim Berners Lee. Actualmente el HTML ha evolucionado hasta el punto de llegar a la versión HTML5 la cual tiene más etiquetas y posibilidades multimedia dentro del propio código, es decir, sin necesidad de instalar plugins externos. Por cuestiones de extensión, en el curso que nos ocupa veremos los elementos más básicos del HTML sin entrar en las nuevas opciones que se han implementado con el HTML5.
Si entramos en cualquier página web y pinchamos con el botón secundario nos aparece la opción “Ver código fuente” (también se accede desde la opción “ver” del menú del navegador). De este modo podemos acceder al código HTML de la página y ver cómo se ha construido, veremos las etiquetas que indican cómo deben interpretarse los elementos de la página. Lo que ocurre es que probablemente también nos encontraremos con otros tipos de lenguajes más complejos como Javascript y con enlaces a hojas de estilo, hojas Javascript, PHP, etc. ya que el HTML actúa muchas veces como contenedor de otros lenguajes. Pero eso no debe preocuparnos por ahora.
Las etiquetas
El lenguaje Html está formado por etiquetas. Estas etiquetas pueden ser llenas o vacías.
Las etiquetas llenas se forman mediante la instrucción correspondiente seguida del texto al que queremos que afecte y se cierran con la misma instrucción con una barra delante. Si no se cerrara afectarían a todos los elementos que se encuentran en la página. Por ejemplo:
<H1> Este es un texto de prueba </H1>
Las etiquetas vacías son exactamente iguales que las llenas pero no es necesario cerrarlas para indicar a qué texto queremos que afecten porque empiezan y terminan en el mismo punto. Por ejemplo:
<HR>
Por otro lado, algunas etiquetas tienen atributos de elemento que deben escribirse entre comillas. En el siguiente ejemplo la etiqueta <A>, que indica que hay un enlace, lleva el atributo HREF con la ruta del enlace entre comillas.
<A HREF=”http:/www.uv.es”> Link de la UV </a>
– Las etiquetas en HTML pueden escribirse tanto en mayúsculas como en minúsculas, pero hay que tener cuidado ya que el valor de los atributos que van entre comillas hay que escribirlos exactamente como deben ser, es decir, si tenemos un archivo en minúsculas que queremos vincular, hemos de escribir el nombre del archivo en minúsculas, no podemos usar mayúsculas. También se han de evitar los símbolos extraños, como acentos, y los espacios a la hora de escribir atributos ya que el navegador puede no reconocer la orden.
– Cualquier documento HTML ha de comenzar y acabar de la siguiente manera para indicar al navegador que se trata de lenguaje HTML:
<HTML>
</HTML>
Dentro de estos elementos quedará contenida toda la información de la página Web.
Comentarios
Se pueden insertar comentarios en el código Html a modo de recordatorios o de indicaciones. Se realiza escribiendo el comentario entre las etiquetas <!— —>. Esto es útil sobre todo porque puede pasar bastante tiempo desde que creamos un código hasta que lo volvemos a revisar y, de este modo, dejamos escritas instrucciones que no afectan a la lectura del código. Un ejemplo de comentario se escribiría de la siguiente manera:
<!– Este es un comentario en HTML –>
*Sitio en español W3C: http://www.w3c.es/
ESTRUCTURA: HEAD Y BODY
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Cabecera (Head)
Head es la primera de las dos partes en las que se estructura un documento Html. Aquí reside la información básica del documento y generalmente esa información no se muestra al usuario. Entre las etiquetas Head se encuentran las siguientes etiquetas:
<TITLE> </TITLE> Sirve para asignar un título a una página que se verá en la parte superior de la ventana del navegador. Se ha de escribir el título entre las dos etiquetas. Por ejemplo: <title> Página de pruebas </title>
<META> Se utiliza para añadir información o metadatos sobre la página. Esta información puede ser utilizada por los buscadores. La etiqueta <meta>no necesita etiqueta de cierre. Por ejemplo: <meta name=”keywords” content=”curso dreamweaver, html, css“>
<STYLE> Se emplea para introducir un estilo en el mismo documento Html. Por ejemplo: <style type=”text/css”> body,td,th { color: #333; } </style>
<LINK> Esta etiqueta nos servirá para enlazar con la hoja de estilos que hayamos creado, por ejemplo: <link href=”estilo.css” rel=”stylesheet” type=”text/css”> </link>
<SCRIPT> La etiqueta script determina si el html contiene algún otro lenguaje como puede ser Javascript. Por ejemplo: <script language=”JavaScript”> </script>
Cuerpo (BODY)
Body es la segunda parte de la estructura y en ella reside el verdadero contenido de la página que se nos mostrará en el navegador. Esta etiqueta tiene atributos que podemos modificar para presentar los contenidos.
Márgenes:
Se pueden modificar por ejemplo los márgenes como vemos en el código que hay a continuación:
<body marginwidth=”20px” marginheight=”30px”>
De este modo le estoy diciendo que el margen izquierdo y derecho de la página han de tener 20 pixeles de espacio y los márgenes superior e inferior 30 pixeles.
También se pueden dar valores diferentes a cada uno de los márgenes:
<body leftmargin=“30” topmargin=“10” rightmargin=“20” bottommargin=“0” >
Fondo
Desde la etiqueta body se pueden agregar otros atributos como el color del fondo o la imagen de fondo de la página.
El color de fondo se establece a través del atributo bgcolor, al que es posible asignarle un color representado en hexadecimal o por un nombre predefinido. La etiqueta para poner el fondo de color blancos sería la siguiente con sus dos posibilidades:
<body bgcolor=“#FFFFFF”> o <body bgcolor=”white”>
La imagen de fondo puede establecerse a través del atributo background, escribiendo la ruta en la que se encuentra la imagen. Al poner la ruta hemos de fijarnos bien en la localización de la imagen, si por ejemplo la imagen se llama fondo.jpg y se encuentra dentro de la carpeta imagenes en el mismo espacio en el que se encuentra la web (es importante que el nombre de la carpeta o del archivo no contengan acentos) escribiremos:
<body background=“imagenes/fondo.jpg”>
Texto
Por último, es posible establecer también el color para todo el texto que irá en el cuerpo de la página. Se puede determinar e a través del atributo text:
<body text=“#000000”>
De este modo el color del texto será negro.
También podemos determinar el color de los enlaces no visitados con el atributo link y los visitados con el atributo vlink. Por ejemplo:
<body link=“#000000”>
TEXTO
Resaltar texto
Existen varias formas de resaltar una palabra o un texto y todas ellas son muy conocidas por el habitual uso que hacemos de los editores de texto. Las etiquetas de las que disponemos son las siguientes:
Encabezados
Son llamadas también etiquetas de título y sirven para destacar un texto en base a su tamaño, es decir, hacen el texto más grande o más pequeño. Existen hasta 6 tamaños de etiquetas de encabezado.
Texto de prueba
Texto de prueba
Texto de prueba
Texto de prueba
Texto de prueba
Texto de prueba
Párrafos
Las etiquetas para agrupar el texto en párrafos es la siguiente:
<p> </p>
Dentro de esas etiquetas irá el texto que queramos diferenciar como párrafo.
Es posible cambiar la alineación del texto de cada párrafo. Para ello se ha de aplicar el atributo align y darle un valor, el valor puede ser left (izquierda), right (derecha), center (centrado) o justify (justificado), por ejemplo: <p align=”left”> </p>
Saltos de línea
Al pulsar la tecla INTRO con un editor de texto producimos un salto de línea pero en un documento Html esto no ocurre ya que el salto no se muestra en el navegador. Para que el salto se haga visible hay que insertar la etiqueta<br> donde queramos producir el salto. Se parece a la etiqueta de párrafo <p> pero el espacio de interlineado que deja es menor.
No hay que insertar la etiqueta </br> ya que la etiqueta <br> no necesita etiqueta de cierre.
Por ejemplo, para insertar el texto:
Habría que escribir:
Bienvenidos al curso Diseño de páginas web: Dreamweaver, <br> Se trata de un curso Online con un total de 50 horas de duración dirigido a PAS y PDI de la Universidad de Valencia.
Separadores
Este elemento dibuja una línea horizontal que sirve para separar elementos. Se produce insertando la etiqueta <hr>. Esta etiqueta no necesita etiqueta de cierre pero se pueden especificar algunos valores para definir su aspecto:
right (derecha)
center (centro)
Por ejemplo, cuando escribimos lo siguiente:
Observamos el siguiente resultado:
Curso Dreamweaver
Bienvenidos al curso Diseño de páginas web: Dreamweaver,
Se trata de un curso Online con un total de 50 horas de duración dirigido a PAS y PDI de la Universidad de Valencia.
Sangrados
Para que un texto aparezca sangrado (con espacio en los márgenes izquierdo y derecho), se inserta éste entre las etiquetas <blockquote>y</blockquote>. Esta etiqueta hace que el texto aparezca en una nueva línea y ligeramente metido hacia dentro.
Si se escriben varias etiquetas <blockquote> y</blockquote> se consigue que los márgenes sean mayores.
Por ejemplo:
Bienvenidos al curso Diseño de páginas web: Dreamweaver,
Se escribe de la siguiente manera:
Imagenes
La etiqueta <img> es la etiqueta encargada de insertar imágenes. Esta etiqueta no necesita etiqueta de cierre puesto que la imagen aparece una sola vez, no hay que decirle donde empieza y dónde acaba. La ruta (ubicación) de la imagen ha de especificarse a través del atributo src. Por otro lado, con el atributo alt se establece un texto alternativo a la imagen. Este texto aparecerá solo si el navegador no puede mostrar la imagen, por ejemplo si un determinado dispositivo no puede cargar la imagen mostrará el texto alternativo en su lugar, por ello es importante ponerlo. Este texto ha de dar una breve descripción de la imagen. El texto alternativo se muestra también al situar durante unos segundos el puntero sobre la imagen.
Así pues, para insertar una imagen como ésta:
Habría que escribir:
En este caso, se ha de tener en cuenta que la imagen está dentro de la carpeta imagenes (que se encuentra en el mismo directorio que el documento html de nuestra web) y se llama panoramica_tarongers.jpg
Es necesario poner la extensión del archivo de imagen (en este ejemplo se trata de un .jpg) para que el navegador reconozca el tipo de archivo. Es recomendable que todos los documentos html se encuentren en una misma carpeta, y que dentro de este directorio existan otras carpetas para agrupar otros elementos, como puede ser una carpeta destinada a almacenar imágenes, o una carpeta destinada a almacenar archivos de audio, etc. De este modo, nuestra estructura web interna (no visible para los usuarios) estará mucho mejor organizada y será más fácil localizar cualquier archivo.
Ruta Absoluta o Relativa
La ruta de una imagen (o de cualquier otro elemento multimedia) puede ser absoluta o relativa.
Nos referimos a ruta absoluta cuando la imagen está alojada en un servidor web externo y la ruta que ponemos para acceder a ella es la URL en la que está alojada (indicando protocolo, servidor, carpeta y nombre). Por ejemplo,
Por otro lado, la ruta es relativa cuando las imagen está guardada en una carpeta propia de nuestra web y ponemos la ubicación de dicha carpeta .
Tamaño de la imagen
El ancho y el alto de la imagen se puede establecer mediante los atributos width y height, respectivamente. De este modo, aunque la imagen tenga unas medidas fijas, podremos escalar o modificar su tamaño para adaptarlo a nuestras necesidades. Por ejemplo:
Código:
Código:
Bordes
Normalmente, al visualizar una página en un navegador las imágenes aparecen sin borde pero mediante el atributo border es posible establecer uno. El atributo border tiene un valor numérico que indica el grosor en píxeles del borde.
Código:<img src=”imagenes/edificio.jpg” alt=”Manuel Sánchis Guarner” width=”160px” height=”242px” border=”0″>
Código:<img src=”imagenes/edificio.jpg” alt=”Manuel Sánchis Guarner” width=”160px” height=”242px” border=”1″>
Código:<img src=”imagenes/edificio.jpg” alt=”Manuel Sánchis Guarner” width=”160px” height=”242px” border=”3″>
Si se desea establecer un vínculo sobre una imagen (los vínculos se explicarán en el siguiente punto) y no se quiere mostrar el borde (borde que aparece coloreado por tratarse de un vínculo), es necesario establecer border=“0”.
Alineación de la imagen respecto al texto
El atributo align es el que describe la alineación de las imágenes y lo hace con respecto a la línea de texto en la que se encuentran. Por ejemplo, para una imagen alineada a la derecha en el código se escribiría lo siguiente:
Sus valores pueden ser:
Espacio entre imágenes y texto
Otra característica que se le puede atribuir a la imagen es el espacio vertical y horizontal que puede tener respecto a texto. Para ello se emplean las etiquetas de espacio horizontal hspace y espacio vertical vspace.
El código que habría que escribir para dejar un espacio vertical y horizontal de 20px sería:
<imgsrc=”imagenes/libro.jpg” alt=”Libro abierto” width=”145px” height=”90px” border=”0″ align=”right”hspace=”20″ vspace=”20″>
Imagen como fondo
En el apartado Estructura: Head y Body se encuentra la explicación de cómo poner una imagen como fondo en una web.
ENLACES
Un link, hiperenlace, hipervínculo, o vínculo, es un enlace, que al ser pulsado lleva a alguna página o archivo. Puede haber diferentes tipos de enlaces: enlaces de texto, enlaces de imagen, etc. es decir, se puede insertar un enlace prácticamente sobre cualquier elemento. Del mismo modo, se puede enlazar a diferentes elementos: enlazar a una imagen, a un PDF, a un correo electrónico, etc. Las etiquetas entre las que se ha de insertar el objeto a ser enlazado son las siguientes:
<a> Enlace </a>.
Al igual que ocurre con el atributo src en imágenes, se ha de especificar la ubicación o ruta en la que se encuentra la página o archivo que queremos mostrar al hacer clic sobre el vínculo. En este caso el atributo utilizado es href.
Por ejemplo, si queremos enlazar del siguiente modo con la página de la Universitat de València:
Debemos escribir:
En este caso también existe la posibilidad de escribir la ruta absoluta o relativa del archivo tal y cómo se explica en el apartado Imágenes. La ruta relativa llevará al documento situado en nuestra carpeta del sitio mientras que la ruta absoluta llevará al documento a través de una URL (el documento deberá estar alojado en un servidor). En el ejemplo del enlace anterior podemos ver la ruta absoluta.
Enlace desde imagen
En este caso, en lugar de situar texto dentro de las etiquetas <a> </a> se sitúa una imagen.
Por ejemplo, para obtener el siguiente resultado (al pinchar en la imagen se observa que es un enlace):
Debemos escribir:
<a href=”http://www.adobe.com/es/” ><img src=”images/adobe.png” height=”213″ width=”300″ border=”2″></a>
Destino del enlace
El destino del enlace hace referencia a lo que ocurre cuando pinchamos en un vínculo, es decir, podemos hacer que la página se abra en la misma ventana del navegador que estamos visualizando o en otra nueva ventana. Esto se determina mediante el atributo target al que se le puede asignar los siguientes valores:
Las opciones más empleadas son _blank y _self.
Aquí se puede comprobar el efecto:
Lo más práctico y lógico es usar la opción de “ventana nueva” cuando la página a la que enlazamos es externa, es decir, no pertenece a nuestro sitio web y “misma ventana” cuando no queremos sacar al usuario del sitio.
Tipos de enlaces
Son los enlaces que hemos visto arriba. Son enlaces a páginas internas o páginas externas a nuestro sitio web. Aquí podemos ver el código de ejemplo con la ruta absoluta o relativa:
Enlace a un documento PDF (ruta absoluta) : <ahref=“http://www.uv.es/peticion_servicios.pdf“ target =“_blank”>Formulario de petición de servicios</a>
Enlace a un documento PDF (ruta relativa) : <ahref=“documentacion/peticion_servicios.pdf” target =“_blank”>Formulario de petición de servicios</a>
Enlace a un vídeo (ruta absoluta) : <ahref=“http://mmedia.uv.es/buildhtml?user=carmurma&path=/cream/III_Trobades_Exp_Educ_2013_bis/&name=carleshernandez.mp4“target =“_blank”>Ver conferencia</a>
Enlace a un vídeo (ruta relativa) : <a href=“videos/conferencia.mp4”target =“_blank”>Ver conferencia</a>
Enlace a una imagen (ruta absoluta) : <ahref=“http://www.uv.es/imagenes/libro.jpg“ target =“_blank”>Ver imagen</a>
Enlace a una imagen (ruta relativa) : <a href=“imagenes/libro.jpg”target =“_blank”>Ver imagen</a>
Enlace a un correo: <a href=“mailto:sfpie@uv.es”>Correo SFPIE</a>
Enlace a un correo con asunto predeterminado: <ahref=”mailto:sfpie@uv.es?subject=el asunto del mensaje“>Correo SFPIE</a>
Anclas
Las anclas son útiles cuando se tienen páginas extensas (en las que hay que hacer mucho scroll) divididas en diferentes apartados ya que permiten ir al apartado deseado. Se ha de tener en cuenta que es poco recomendable hacer páginas tan extensas a no ser que sea estrictamente necesario, lo mejor es estructurar bien la información en diferentes páginas y realizar un buen esquema de navegación ya que la gente se satura al ver mucho contenido, sobre todo si es texto, a lo largo de una página. También se utilizan a la hora de crear índices. Las etiquetas son las mismas que para los enlaces normales <a> y </a>, la diferencia reside en el atributo name que es el que tendrá el valor que envíe a un punto determinado del documento (ese valor no ha de contener caracteres especiales).
Por ejemplo, para insertar un ancla o punto de fijación delante del un texto el código sería:
Entre las etiquetas <a> y </a> no hay que insertar nada ya que lo que interesa enlazar es el ancla.
Si por ejemplo la página en la que estamos se llama links.htm, y el ancla que hemos creado antes se llama enlace_tema2, podemos crear un enlace que nos lleve a la línea de texto en la que se encuentra el ancla. Para ello habría que escribir:
<a href=“links.htm#enlace_tema2”>Enlace a tema 2</a>
Si el ancla se encuentra en el mismo documento que el enlace, como hemos mostrado, podemos prescindir de poner el nombre de la página en el atributo href.
En el ejemplo anterior podríamos haber escrito:
<a
href=”#enlace_tema2″>Enlace a tema 2</a>
EJERCICIO SOBRE ENLACES E IMAGENES
El ejercicio consiste en crear, mediante código Html, una página sencilla que contenga:
– Un breve texto con dos enlaces definidos a continuación:
– Una imagen alineada con el texto que sea a su vez un enlace a un vídeo de una web externa.
(La alineación puede ser a la izquierda o a la derecha, el texto se puede justificar del modo que se prefiera y los márgenes de la página también se establecerán con los tamaños que se prefiera)
Más o menos la página debería quedar así:
ELEMENTOS MULTIMEDIA
Como ya se ha comentado anteriormente, es posible insertar elementos multimedia dentro de una página web, pero se han de tener en cuenta algunas consideraciones como por ejemplo que la carga de un archivo multimedia puede ralentizar la página o que el mal uso de elementos multimedia puede resultar molesto para los usuarios.
Al acto de incrustar un elemento de vídeo o audio en una página web se le llama comúnmente “embeber” debido a que la etiqueta empleada para ello es la etiqueta <embed>.
Insertar audio y vídeo desde nuestro espacio web
La primera consideración a tener en cuenta es que los elementos de vídeo pesan bastante y ocupan mucho espacio en disco, por ello hemos comentado antes que la página tarda bastante en cargar. Una alternativa es no alojar el vídeo directamente en nuestro espacio de disco sino embeberlo de cualquier otra plataforma, por ejemplo subir el vídeo a Mmedia o Youtube y embeberlo desde ahí. Los formatos de vídeo más habituales son .mp4, .mov y .avi mientras que en audio se usa sobre todo el .mp3 y .wav , son formatos de poco peso y poca pérdida de calidad.
La etiqueta empleada para insertar audio y vídeo es <embed> y esta no precisa etiqueta de cierre. La ruta del archivo multimedia se le indicará mediante el atributo src al igual que ocurre con las imágenes. La etiqueta embed posee diversos atributos, algunos ya conocidos como width y height que determinan el tamaño del vídeo y otros específicos de esta etiqueta.
Para insertar audio, se insertará el siguiente código:
Insertar audio y vídeo desde cualquier plataforma
Para embeber audio o vídeo desde cualquier plataforma como Mmedia, Youtube, Vimeo, etc. hemos de ir a la página del vídeo que queremos incrustar, copiar el código embed y pegarlo en nuestro documento html. De este modo el elemento multimedia será visible en nuestra página. Aquí vemos el ejemplo de Mmedia y Youtube.
Insertar otros elementos y widgets de cualquier plataforma
Además de poder insertar vídeo, audio y animaciones flash, el código Html permite insertar en nuestra página otros elementos, generalmente llamados Widgets, con diferentes funcionalidades. Un ejemplo de estos elementos son los botones sociales (botones de “Me gusta” o “Compartir” de algunas redes sociales), ventanas de redes sociales que se incrustan en nuestra página (por ejemplo conversaciones de Twitter en torno a un determinado Hashtag), así como calendarios, relojes, contadores de visitas, etc.
Estos Widgets se embeben en nuestra página del mismo modo que se puede embeber un vídeo de Youtube. Tan solo se ha de ir a la página en cuestión y copiar y pegar el código embed que nos facilita el desarrollador de la página.
Por ejemplo el código que nos proporciona Twitter para embeber un botón de “Seguir” es el siguiente:
<a href=”https://twitter.com/UV_EG” class=”twitter-follow-button” data-show-count=”false” data-lang=”es” data-size=”large”>Seguir a @UV_EG</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+’://platform.twitter.com/widgets.js’;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);</script>
Y el resultado que podemos ver en nuestra página es este:
Seguir a @UV_EG
EJERCICIO SOBRE ELEMENTOS MULTIMEDIA
El resultado debe ser más o menos este:
LISTAS Y TABLAS
Como vemos, las listas ordenadas se caracterizan porque sus elemento están numerados. Esta numeración puede ser mediante cifras, mediante letras del abecedario o mediante números romanos. Por otro lado, las listas sin ordenar se identifican
utilizando viñetas que pueden ser, a su vez, círculos, cuadrados, discos, etc. El aspecto de las viñetas puede variar de un navegador a otro. También se pueden establecer imágenes como viñetas de una lista.
Las etiquetas que predeterminan cada tipo de lista son las siguientes:
<ol>
<li>Pan</li>
<li>Cebollas</li>
<li>Harina</li>
<li>Huevos</li>
<li>Lechuga</li></ol>
<ul><li>Pan</li>
<li>Cebollas</li>
<li>Harina</li>
<li>Huevos</li>
<li>Lechuga</li>
</ul>
<dl>
<dd>Pan</dd>
<dd>Cebollas</dd>
<dd>Harina</dd>
<dd>Huevos</dd>
<dd>Lechuga</dd>
</dl></td>
Tablas
Las tablas son una buena opción para presentar los contenidos de forma ordenada en filas y columnas, incluso muchos sitios web las usan para ordenar todo el contenido de la web. Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre estas etiquetas habrá que especificar las filas y columnas que formarán la tabla. Las filas quedarán determinadas por las etiquetas <tr> </tr> y las columnas (que vienen delimitadas por las celdas) se determinan mediante las etiquetas <td></td>. Una celda es la intersección entre una fila y una columna, por lo que podremos especificar el número de celdas por fila, que equivale a especificar el número de columnas por fila. Para crear una tabla es obligatorio especificar tanto en número de filas como el número de columnas. Por ejemplo, para crear una tabla con tres filas y una sola columna escribiremos:
Como se observa las celdas van dentro de las filas y todo ello dentro de la etiqueta table. Dentro de una tabla se puede insertar otra tabla y así sucesivamente, esto es lo que se llaman tablas anidadas.
Las tablas también tienen sus atributos, los vemos a continuación:
Bordes de tabla
Se puede aplicar el atributo border a una tabla con un valor que determinará el grosor de dicho borde . Por defecto no se muestra ningún borde, pero si se pone el atributo border=”1″ obtendremos una tabla con un borde de un pixel de grosor. Para poner un color al borde emplearemos el atributo bordercolor(se escribirá en hexadecimal o con el nombre del color en inglés), escribiremos por ejemplo:
<table border=”1″ bordercolor=”red”> <table>
Tamaño y posición de la tabla
Las tablas también permiten delimitar un ancho y un alto (éstos pueden representarse mediante porcentaje o mediante píxeles). Las etiquetas que delimitan el ancho y el alto son widht y height respectivamente. Por ejemplo, podemos delimitar una tabla que ocupe el 80% de la pantalla de ancho y que tenga unos bordes marcados, para ello escribiremos:
<table widht=”80%” border=”2″> </table>
Dentro de las etiquetas <table></table> se definirá el número de filas y de columnas que tendrá la tabla.
Por otro lado, con el atributo align podremos alinear horizontalmente la tabla con respecto a la página y con el atributo valign podemos alinearla verticalmente.
Los valores del atributo align son: Left (izquierda), Right (derecha), Center (centro).
Los valores del atributo valign son: Top (Arriba), Bottom (abajo), Middle (medio)
Espaciado entre celdas y entre su contenido
El atributo que se usa para generar espacio entre el contenido de las celdas y el borde es cellpadding, mientras que el atributo que determina el espacio entre celdas es cellspacing. Ambos contienen el valor numérico que le queramos dar ya que se mide en píxeles.
Si queremos determinar un espaciado único entre celdas, o entre celdas y su contenido, para toda la tabla hemos de meter el atributo dentro de la etiqueta <table>. Si por el contrario queremos especificar un espaciado solo para una determinada celda meteremos el atributo en la etiqueta <td> de dicha celda.
A continuación vemos un ejemplo en el que se ha dejado un espacio entre celdas de 10 px (cellspacing)
En el siguiente ejemplo se han dejado 10 px de espacio entre el contenido de las celdas y el borde (cellpadding)
Combinar filas y columnas
Se pueden combinar filas y columnas con los atributos Colspan (combina columnas) y Rowspan (combina filas). Por lo tanto, Colspan se puede definir como el número de columnas que ocupa una celda y Rowapan como el número de filas que abarca una determinada celda. Como podemos observar en la tabla que tenemos a continuación el apartado “Valores” ocupa en realidad lo mismo que ocupan los apartados “Peso” y “Potencia”, es decir, esa celda ocupa en realidad dos columnas y por lo tanto tiene un valor de colspan=”2″. Por otro lado, vemos que el apartado “Precio” es una celda que ocupa dos filas (ocupa lo mismo que la fila de “Valores” y la fila de “Peso” y “Potencia”), por ello tiene un valor de rowspan”2″.
A continuación podemos ver el código necesario para la creación de esta tabla:
Imágenes y color de fondo
Para insertar un color de fondo a la tabla escribiremos la etiqueta bgcolorseguida de un color escrito en hexadecimal (o un color de los admitidos escrito en inglés).
Por ejemplo para el color de fondo de la tabla escribiremos:
<table bgcolor=”#”> </table>
Para el color de fondo de la celda escribiremos en la celda que queramos:
<td bgcolor=”#”> </td>
Por otro lado, para insertar una imagen de fondo de tabla escribiremos la etiquera background seguida de la ruta en la que se encuentra la imagen que queremos insertar (pdemos insertarla en toda la tabla o sólo en una celda). Por ejemplo:
<table background src=”imagenes/fondo.jpg”> </table>
EJERCICIO SOBRE TABLAS
Un consejo: será muy útil hacer la tabla con bordes.
Aquí puedes descargar la carpeta con las imágenes necesarias para la realización del ejercicio:
Carpeta con imágenes
Capas
Los atributos más empleados son Id (para identificar la capa) y Class (para aplicar a la capa estilos CSS). A través del atributo style (o de una hoja de estilos vinculada y con los identificadores Id o Class) se pueden establecer las propiedades que se encuentran a continuación (se trata de un pequeño avance del apartado de estilos CSS). Estas propiedades del atributo styleirán entre comillas dobles, con un punto y coma detrás de cada una. Para asignar los valores a las propiedades se utiliza el símbolo : (dos puntos).
– Position: Para que la capa aparezca en la posición establecida, se ha de introducir este atributo con el valor absolute. Si no se estableciera este valor, la capa se mostraría pegada al margen izquierdo, en la posición en la que hubiera sido insertada dentro del código. Con las propiedades left (izquierda) y top (superior) se establece la posición de la capa respecto a los márgenes izquierdo y superior de la página. Esta medida se puede establecer en píxeles (px) o con porcentaje (%).
– Widht y Height: sirve para establecer el tamaño de la capa. Se ha deponer un valor numérico en píxeles o porcentaje.
– Z-index: establece el índice de la capa dentro de la página. Esto sirve para solapar capas (las que tengan un índice mayor irán por encima).
– Visibility: sirve para establecer la visibilidad de la capa. Puede tomar los valores inherit (se muestra la capa mientras la capa a la que pertenece también se esté mostrando), visible (muestra la capa, aunque la capa a la que pertenece no se esté viendo) y hidden (la capa está oculta).
– Layer-background-image y Background-image: establecen una imagen de fondo para la capa. La ruta y el nombre de la imagen han de aparecer entre paréntesis, después de la palabra url.
– Layer-background-color y Background-color se puede establecer un color de fondo para la capa. Ha de ser un nº hexadecimal.
– Overflow: establece si se mostrará o no el contenido de la capa cuando no pueda ser visualizado en su totalidad, por ser la capa demasiado pequeña. Puede tomar los valores visible (se muestra todo el contenido de la capa, aunque esto implique hacer que la capa sea más grande), hidden (no es posible visualizar el contenido de la capa que no quepa en ella), scroll (se muestra la barra de desplazamiento, aunque el contenido de la capa pueda ser visualizado totalmente) y auto (se muestra la barra de desplazamiento cuando sea necesario).
Por ejemplo, podríamos insertar una capa escribiendo el siguiente código:
<div id=“capa”style=”position:absolute; width:200px;height:115px;z-index:3;visibility:visible;background-image: url(imagenes/fondocapa.gif);“> </div>
Otra forma de insertar capas es utilizando las etiquetas y , en lugar de las etiquetas <div> y </div>. La etiqueta se utiliza del mismo modo que la etiqueta <div>.
A continuación se muestra una web dividida en varios div:
Aunque se puede poner como identificador (Id) cualquier nombre con el que queramos identificar la capa para aplicarle un estilo, hay una serie de nombres comunes que los diseñadores web suelen usar para identificar algunos elementos que tenemos a continuación (tal y como se muestra en la imagen superior):
Ejercicio: crear página con Html
Subida del proyecto al espacio web de la UV
Como ya se ha comentado en el apartado dedicado a La exportación del proyecto, para poder subir nuestra web a la red, y así hacerla visible en todo el mundo, tenemos que tener un dominio contratado al cual podemos subir esos archivos. Para poder disfrutar del espacio web que nos proporciona la UV primero se tiene que solicitar la activación de nuestro espacio web personal al CAU (Centro de Atención al Usuario/a) de la Universitat de València. El procedimiento es sencillo y se realiza de forma automática.
Desde el navegador
Subir archivos mediante un navegador:
Una vez activado el espacio web tenemos que ir a la carpeta Web para poder subir los archivos. A continuación, accedemos al nuestro entorno de usuario y después vamos a la carpeta Disc Virtual.
Dentro de la carpeta Disc Virtual vamos a la carpeta Web.
Cuando estamos dentro podemos ver los archivos que tenemos ya subidos, si es que los tenemos, o podemos ver el espacio vacío con un archivo llamado index.html que aparece por defecto. Este archivo es el más importante ya que es el primer archivo que lee el navegador y que vincula con el resto de páginas. Este archivo no tiene que estar dentro de ninguna carpeta si queremos entrar directamente a la web sin pasar por ninguna carpeta, tiene que estar siempre fuera cómo se muestra en la siguiente imagen. Los archivos también se pueden modificar desde este espacio ya que se dispone de un editor WYSIWYG (icóno del lápiz) y de un editor HTML (icono del folio con los corchetes).
En la parte inferior tenemos un menú que nos permitirá cargar los archivos nuevos, borrar archivos, o sustituir los que ya tenemos. El principal problema de este método es que los archivos se tienen que cargar un a uno o subir una carpeta comprimida y descomprimirla en el propio espacio Web (aquí están las instrucciones para llevar a cabo ese proceso).
Desde Unidad de red
Subir archivos mediante una unidad de red
En primer lugar tenemos que crear una Unidad de Red en nuestro ordenador. La manera de hacerlo dependerá del tipo de ordenador que tengamos (si es PC o MAC) y del sistema operativo que tengamos (no se hace del mismo modo en Windows XP que en Windows 7).
a- En Mac:
Vamos al menú Ir > Conectarse al servidor
Ponemos la dirección del espacio de disco de la UV
Ponemos el usuario y contraseña que tenemos de la UV y nos conectamos
Ya tenemos acceso a las diferentes carpetas que tenemos en el espacio UV, entre ellas el espacio Web que es el que nos interesa. Iremos a la carpeta web y copiaremos los archivos de nuestro sitio web dentro de esta carpeta.
b- En PC:
Primero tenemos que ir a Equipo y hacer clic sobre Conectar a unidad de red
Ahora hemos hacer clic en “Conectarse a un lugar Web para usarlo como almacén de documentos e imágenes”. Nos aparece esta pantalla (Tenemos que clicar en “Siguiente”):
Se abrirá otra ventana y tenemos que volver a clicar siguiente.
A continuación, tenemos que poner ya la dirección del lugar al que queremos acceder con la palabra “FTP” (Protocolo de Transferencia de Ficheros) delante, en este caso: ftp://disco.uv.es
Aparece una ventana pidiéndonos que especificamos nuestro nombre de usuario (tenemos que poner el usuario de la universidad).
Después tenemos que darle un nombre a la ubicación de red (es el nombre con el cual nos aparecerá en nuestro ordenador). En este caso también hemos puesto disco.uv.es.
Después de hacer clic en “Siguiente” nos aparece el mensaje para finalizar la operación, si está marcada la opción de bajo se nos abrirá automáticamente la unidad de red al darle a finalizar.
Antes de abrirse la unidad de red nos pedirá el usuario y la contraseña de la Universidad de Valencia.
Una vez lo hemos hecho tendremos acceso a nuestro espacio de disco de la universidad y a nuestro espacio Web. De este modo podremos gestionar los archivos de una manera sencilla y con una visualización por carpetas. Tan solo tendremos que copiar nuestros archivos del sitio web creado y pegarlo en nuestra carpeta Web.
Desde programa FTP
Subir archivos mediante un programa de Protocolo de Transferencia de archivos (FTP)
En este caso dependerá del tipo de software de FPT que se utilice. Existen numerosos programas de transferencia de ficheros en el mercado, algunos gratuitos y otros de pago, por eso no entraremos en detalles. Un ejemplo de software eficaz y gratuito es Filezilla (vemos su aspecto en la imagen inferior). De todos modos, son programas muy sencillos en los cuales sólo se tiene que poner la dirección IP del lugar al que queremos subir los archivos y nuestro usuario y contraseña. Después sólo se tienen que arrastrar los archivos a la carpeta web.
