Grupo de Apoyo a la Teleenseñanza

La web es la mejor plataforma para el e-learning o tele-enseñanza ya que nos permite llegar a todos los alumnos fácilmente y mostrar los contenidos didácticos necesarios para mejorar el aprendizaje ya sea como complemento a las clases presenciales o como manera de impartir clases no presenciales. En la manera en que los contenido tengan más calidad en la presentación de los mismos, serán más atractivos para el alumno y le instará a que los siga más de cerca.

Es por esto que desde el Grupo de Apoyo a la Teleenseñanza dedicamos dos temas al desarrollo web, y en concreto en este mes veremos las posibilidades que tenemos cuando usamos otras herramientas más avanzadas. Ofreceremos este mes un pequeño "mini-curso" de Dreamweaver para crear una página web.

El lenguaje de la web, hablando múltiples lenguajes

Una web políglota, los lenguajes de la web

En con un navegador web, no sólo podemos visualizar páginas web expresadas en lenguaje HTML, aunque sí que éste es el más extendido. Existen otros tipos de lenguajes que nos sirven para expresar una página web. En esta sección daremos un repaso por la mayoría de ellos.

HTML

Ya vimos en el tema del mes anterior que se trata de un lenguaje de marcas o etiquetas que nos indican qué estamos expresando y su contenido. HTML es ampliamente usado y estándar en Internet es por eso que todos los navegadores soportan por lo menos alguna versión de HTML.

• W3C HTML Home Page (traducción a castellano)

CSS

Como vimos en el ultimo tema del mes las hojas de estilo CSS nos permiten modificar las propiedades de las etiquetas HTML en su conjunto y no de manera separada. De manera que podamos crear un "estilo" propio de colores y fuentes comunes para todo nuestro sitio web.

• Cascade Stylesheets Home Page (traducción a castellano)

XML

Es el lenguaje de moda. Muchas páginas se están adaptando a este lenguaje, es una extensión de HTML permitiendo crear etiquetas propias para ordenar los datos de una web que podemos representar posteriormente mediante documentos en lenguaje XSLT que vienen a ser las hojas de estilo CSS para HTML.

• W3C XML (traducción a castellano)

JAVASCRIPT

Es un lenguaje de programación que se utiliza junto al HTML para proporcionar capacidad de crear webs dinámicas, poder detectar tipos de navegador o resolución gráfica del cliente, etc.... Se trata de un lenguaje "por el lado cliente", es decir, que es nuestro ordenador el que ejecuta las líneas de programa de JavaScript que se encuentra en la página web y por tanto los cálculos los realizará nuestro navegador. JavaScript es ampliamente utilidado por todos los sitios web.

• ECMAScript -definición del estándar- (traducción a castellano)

VBSCRIPT

Pertenece al mismo tipo de lenguajes que JavaScript a diferencia que está expresado en una sintaxis parecida al lenguaje de programación Visual Basic. Este lenguaje está solamente soportado por Internet Explorer y el resto de los navegadores no soportan este tipo de lenguaje. En cambio se usa VBScript comunmente porque permite añadir efectos y un dinamismo a los sitios web que sean visualizados con Internet Explorer que no logra JavaScript. Normalmente el método usado por todos los diseñadores web es detectar el tipo de navegador con el que se está visualizando la página web y, si usa IExplorer ejecutar código VBScript, y si es otro navegador ejecutar otro código alternativo en JavaScript.

• VBScript Reference

PHP

Pertenece a los lenguajes de programación de tipo "del lado servidor", ya que todas las líneas de programa son interpretadas por el servidor antes de que se visualice el resultado en el navegador. De manera que se puede generar una página con contenido HTML en el momento que el usuario pide que se le muetre la página. De ésta manera podemos obtener siempre resultados actualizados. Podemos pensar por ejemplo en un buscador de páginas web, siempre produce resultados diferentes dependiendo de la búsqueda y del momento en que se le consulte de manera que aunque siempre se pida la misma página, se visualizarán contenidos distintos porque el servidor muestra resultados actualizados generando una página HTML que el navegador puede leer.

• Manual de PHP, en español

ASP

Es la alternativa a PHP usado ampliamente por los servidores de Microsoft, permite crear servicios web usando la tecnología de Microsoft con integración con productos como Office, Internet Information Server, Windows Server, etc... Su funcionamiento es el mismo que PHP, se interpreta en el servidor y al cliente simplemente le llega una página HTML actualizada con los contenidos generados de forma automática.

• Microsoft ASP Portal

CGI

Son verdaderos programas que se ejecutan en el servidor para producir una página web. Están creados con cualquier lenguaje de programación habitual aunque se suele usar PERL. La diferencia con PHP y ASP es que estos últimos no son programas ejecutables sino que el código se escribe en un archivo de texto y es un programa intérprete el que lee el fichero de texto e interpreta las instrucciones de éste, es lo que se llama lenguaje de script.

Dreamweaver, la herramienta web por excelencia

La herramienta de edición web por excelencia

Dreamweaver es un editor visual que permite la creación rápida de páginas web así como la introducción de código HTML si fuese necesario. Permite la edición de ficheros XML, PHP, introdución de JavaScript, etc... este programa es ampliamente usado por la comunidad de desarrolladores web por la versatilidad que ofrece.

 

En la interfaz de Dreamweaver se ordenan mediante paneles todo lo necesario para editar una web, teniendo tanto la opción visual como la introducción de código directamente.

Interfaz de Macromedia Dreamweaver

Como podemos ver, en el modo Diseño podremos editar el contenido de una página web de una manera muy sencilla, ofreciéndonos todo tipo de ayudas visuales. Podemos también dividir la pantalla en dos, de modo que tengamos visible tanto el modo visual como la inserción de código.

Es también al insertar código cuando vemos la potencia de Dreamweaver ayudándonos en la labor indicando las opciones a insertar en un cuadro contextual como se muestra en la siguiente imagen.

Dreamweaver mostrando los asistentes de completado de código

Podemos ver como al empezar a escribir una etiqueta nos aparece el asistente de completado con un listado de etiquetas que podemos insertar o atributos de la etiqueta que estamos editando.

En la barra de herramientas tenemos las opciones más comunes, como crear campos de email, tablas, insertar objetos Flash, comentarios, formularios, etc...

Barra de herramientas de Dreamweaver

Podemos insertar los componentes más comunes de una página web usando la barra de herramientas de manera que no nos será difícil poder editar y agregar lo que queramos a nuestro gusto.

Con Dreamweaver podremos además, crear y editar hojas de estilo CSS, editar código JavaScript y VBScript, páginas PHP y ASP, y un largo etc de estándares de Internet.

Editando páginas web con Dreamweaver

En esta sección explicaremos algunas nociones de edición de páginas web con Dreamweaver, de manera que cualquier persona pueda aprender a usarlo fácilmente.

Si nos fijamos en la parte superior de la ventana de Dreamweaver podemos localizar en por orden, la barra de menú, la barra de herramientas, las pestañas con los documentos que tenemos abiertos y la barra de documento que nos permite cambiar entre las distintas vistas, publicar y poner título a nuestro documento.

Parte superior de la ventana de Dreamweaver

Otra zona importante es la sección de Propiedades que se encuentra en la parte inferior de la ventana de Dreamweaver cuando seleccionamos un elemento. De manera que podamos modificar todas las propiedades del elemento seleccionado de manera directa.

Sección de propiedades del objeto seleccionado

En el panel lateral de la derecha tendremos acceso más directo a distintas opciones así como el panel de comportamientos que permite añadir opciones dinámicas a nuestra página de forma muy sencilla.

PARA SABER MÁS

Para aprender más de la edición de páginas web con Dreamweaver ofrecemos unos enlaces a unos cursos prácticos disponibles en la red basados en la última versión de Dreamweaver 2004. Ambos gratuitos

• Curso de Dreamweaver 2004 de AulaClic
• Curso de Dreamweaver de MixMail

Creando páginas web dinámicas

A menudo encontramos web con alto índice de interactividad o páginas como Google Suggest que te "sugieren" los términos de búsqueda de manera automática mientras escribes.

Hay muchas maneras de añadir interactividad a una página web, la más utilizada y estándar es JavaScript. En el tema del mes pasado ya ofrecíamos algunos enlaces interesantes a tutoriales y manuales de JavaScript. Otra forma es usar otras tecnologías como applets de JAVA o Flash que se insertan como objetos independientes dentro de una página web HTML. Usando estas tecnologías podemos incluir interactividad y nos abre un abanico de posibilidades mucho más grande.

Hemos creado una sección aparte para hablar de la extensión CourseBuilder para Macromedia Dreamweaver que permite crear páginas dinámicas para realizar test rápidamente a través de asistentes muy sencillos.

• Ir a sección de CourseBuilder para Macromedia Dreamweaver

Como hemos visto se pueden crear páginas con interactividad que pueden ser interesantes a nuestros propósitos mediante JavaScript que nos ha completado automáticamente la extensión CourseBuilder.

Otra opciones más avanzadas permiten crear páginas interactivas a través de lenguajes de servidor (explicado en otra sección) o del uso de elementos JAVA o FLASH, éste último siendo muy válido para la enseñanza virtual ya que nos permite crear elementos interativos en el grado de complejidad que nosotros queramos, de una manera más sencilla que programando directamente.

Puede ver algunos ejemplos de las posibilidades de Flash y algunos desarrollos que proponemos desde nuestro grupo en nuestra sección específica.

• Sección de Desarrollo Flash del GAT
• Tema del mes de octubre Flash en el GAT
• Curso de Introducción a Macromedia Flash impartido por el GAT

Si desea obtener más información no dude en ponerse en contacto con nosotros.