HTML básico Boletín de prácticas Práctica 3: HTML básico INFORMÁTICA 1 Curso 2005-2006 Biblioteconomía y Documentación
1.- ENUNCIADO Haciendo uso de lo aprendido en clase de teoría diseñar las siguientes páginas web y publicarlas en el servidor web de alumnos/as, mural.uv.es. El diseño de la página será libre, pero deberá cumplir al menos las condiciones consignadas. Se valorará cualquier iniciativa en el diseño o arquitectura del sitio web, siempre que el lenguaje utilizado sea exclusivamente HTML estándar. 1.1 Página de presentación: Portal a las prácticas de Informática I. El alumno diseñará una página Web sencilla que llamará index.html y que situará en el directorio raíz de su espacio Web. Esta página tiene un diseño libre, pero deberá constar de un solo fichero html y servirá únicamente como portal para llegar a las páginas correspondientes a las prácticas 3 y 4. La página podrá tener un aspecto similar a éste. Esta página deberá cumplir como mínimo: Se deberá llamar index.html o index.htm y se publicará en la carpeta raíz del espacio web del alumno. De este modo, la URL de la página será http://mural.uv.es/cuentadelalumno, donde cuentadelalumno es el nombre de la cuenta utilizada. Deberá tener dos enlaces que apuntarán a las páginas iniciales correspondientes a las práctica 3 y 4. Estos enlaces apuntarán a las URL o http://mural.uv.es/cuentadelalumno/practica3/index.html y o http://mural.uv.es/cuentadelalumno/practica4/index.html Página 2 de 7
respectivamente. El segundo enlace estará, de momento, inactivo. Ver el apartado relativo a la publicación para más información acerca de la publicación de las páginas y las URL de las páginas. Deberá haber al final de la página dos enlaces a las direcciones de correo electrónico de los integrantes del grupo de prácticas. La página deberá contener la fecha de su última actualización al final. El resto del diseño de la página es libre, con la única limitación de que sólo se podrá utilizar HTML estándar editado directamente en código fuente mediante cualquier editor ASCII como el bloc de notas de Windows, sin utilizar editores web tales como Dreamweaver o FrontPage. 1.2 Página de la práctica 3: Se diseñará un sitio web con una estructura similar a la que puede verse en la figura inferior: Esta página deberá cumplir como mínimo lo siguiente: a) Una estructura inicial mostrada mediante frames, con un total de tres marcos: izquierdo, superior derecho, e inferior derecho. b) Como se muestra en la figura adjunta el marco izquierdo contiene el escudo de la Universidad de Valencia y una serie de enlaces en forma de lista. Los enlaces de esta lista deberán abrir las páginas enlazadas en el marco inferior derecho. Las URL a referenciar serán las correspondientes a: Página 3 de 7
a. Inicio: La página que se muestra en la figura superior. Esta página deberá contener una tabla con los nombres de los integrantes del grupo y sus fotografías obtenidas del portal del alumno más dos enlaces al correo electrónico de los integrantes del grupo. b. Curricula: no contendrá enlaces. En la lista, a continuación y a un nivel de sangrado mayor, se incluirán dos enlaces a sendas páginas con los curricula de los integrantes del grupo. Los curricula podrán ser reales, pero la información de contacto incluida tal como la dirección postal o el número de teléfono deberán ser falsos. c. Enlaces de interés: Una página con al menos tres enlaces operativos que los alumnos consideren de interés. d. Universidad de Valencia: http://www.uv.es c) La página deberá contener la fecha de su última actualización al final. d) El resto del diseño de la página es libre, con la única limitación de que sólo se podrá utilizar HTML estándar editado directamente en código fuente mediante cualquier editor ASCII como el bloc de notas de Windows, sin utilizar editores web tales como Dreamweaver o FrontPage. e) Se valorará el estilo de las páginas diseñadas y las funciones o contenidos más allá de los mínimos exigidos con un 20% de la nota final. 2.- PUBLICAR LAS PÁGINAS WEB CREADAS. 2.1 Comprobación de la cuenta y activación del espacio web del alumno Cualquier usuario de la comunidad universitaria tiene la posibilidad de publicar páginas web en los servidores de la Universidad de Valencia. Para ello sólo es necesario disponer de una dirección de correo activa de la UV. En el caso de los alumnos, el servidor web asignado es mural.uv.es Los pasos a seguir para utilizar el espacio web asignado en mural son: 1- Si aún no tenemos activa nuestra cuenta de correo electrónico, debemos activarla en http://cuentas.uv.es identificándonos mediante la tarjeta universitaria. Una vez activada la cuenta de correo podremos utilizarla para consultar nuestro correo electrónico a través de http://correo.uv.es, lo que nos servirá para comprobar que está operativa. En caso de que ya tuviésemos activa la cuenta pero hubiésemos extraviado la contraseña, deberemos ponernos en contacto con alguno de los operadores informáticos de la UV para que nos dé una nueva. 2- Una vez creada y comprobada la cuenta de correo, deberemos activar el espacio web en la citada página http://cuentas.uv.es pulsando en el enlace Activar/Desactivar web 3- Con todo ello tendremos creado y disponible un espacio web cuya URL es http://mural.uv.es/cuentadelalumno, donde cuentadelalumno el nombre de usuario de correo, siendo nuestra cuenta de correo. Página 4 de 7
2.2 Preparación del espacio web y publicación de las páginas. Cuando ya tengamos activa nuestra cuenta web podremos publicar nuestras páginas en este espacio copiándolas mediante cualquier programa de FTP. En las aulas está disponible el Filezilla, el cual es gratuito y puede encontrarse en multitud de servidores FTP públicos. Para publicar las páginas iniciaremos la aplicación Filezilla instalada. En la pantalla de conexión indicaremos el servidor mural.uv.es, nuestra cuenta de usuario y nuestra contraseña, tras lo cual pulsaremos el botón quickconnect. Comprobaremos que hemos conectado cuando aparezcan las carpetas disponibles en el servidor remoto en la parte derecha de la pantalla, en el apartado remote site. En esta pantalla, la parte izquierda representa el sistema local, es decir el ordenador en el que estamos trabajando en el aula, y la parte derecha representa el servidor web. Podremos transferir archivos entre ambos simplemente seleccionándolos en la lista y pulsando la flecha correspondiente a la dirección en que queremos llevarlos. IMPORTANTE: El servidor mural.uv.es no es una máquina con sistema operativo Windows. Los nombres de archivo deberán referenciarse con el nombre exacto en nuestras páginas para que se visualicen correctamente en el servidor, de modo que si, por ejemplo, hacemos en una de nuestras páginas una referencia del tipo <IMG SRC= imagen.gif > pero el fichero de imagen se llama IMAGEN.GIF la página se visualizará correctamente en el equipo local pero cuando la publiquemos en el servidor la citada imagen no aparecerá. Puesto que mural.uv.es no es una máquina Windows, las rutas no se definen igual que en este sistema operativo. De este modo, todas las rutas a ficheros que definamos en nuestras páginas HTML deberán ser relativas, no absolutas, y deberán definirse separadas por el carácter /, no por el \ usado habitualmente en Windows. Si por ejemplo en nuestras páginas hacemos referencia a un fichero de imagen que está en el mismo directorio de nuestro diskette mediante Página 5 de 7
la cláusula <IMG SRC= A:\practica3\imagen.gif > estando todos los ficheros de la Web en el directorio practica3 del disquete, cuando publiquemos la página la imagen no se visualizará, ya que en mural.uv.es no existe la ruta A:\. De este modo, deberemos usar <IMG SRC= /practica3/imagen.gif >. Para la realización de las prácticas crearemos dentro de nuestro espacio de usuario dos carpetas a las que llamaremos practica3 y practica4. Para ello, pulsaremos con el botón derecho del ratón en el espacio de remote site y elegiremos la opción create directory. Con ello podremos ver nuestro espacio así. Página 6 de 7
Una vez creadas las dos carpetas, haremos doble clic sobre la carpeta correspondiente a la práctica y arrastraremos todos los ficheros correspondientes a la web que queremos publicar. Con ello, si por ejemplo nuestro usuario es cuentadelalumno y la página principal de nuestra web correspondiente a la práctica 3 es index.html, la URL en la que quedará nuestra práctica 3 será http://mural.uv.es/cuentadelalumno/practica3/index.html. Cuando posteriormente creemos nuestras páginas para la práctica 4 las depositaremos en la carpeta practica4, con lo que quedarán separados los ficheros correspondientes a ambas prácticas. Puede encontrarse más información acerca de la publicación de páginas web en el servidor mural.uv.es en http://cuentas.uv.es, en el apartado preguntas y respuestas. También existe amplia información acerca del uso del servicio web de la Universidad de Valencia en http://www.uv.es/ciuv/cas/web/ 3.- NORMAS DE LA PRÁCTICA Cada equipo deberá enviar por correo electrónico la URL de la práctica al profesor. Para el envío de la URL se usará la cuenta de correo de la Universidad de Valencia. La fecha de entrega de esta práctica es el 25 de noviembre de 2005. En el mensaje enviado deberán constar la URL de las páginas, los nombres y DNI de los componentes del equipo y sus grupos de prácticas. Los equipos constarán de un máximo de dos componentes. Los componentes del equipo deberán ser notificados al profesor en la primera sesión de la práctica 3. Los equipos de prácticas se mantendrán para las prácticas 3 y 4. Si existiese algún problema referente al funcionamiento de la cuenta de usuario del alumno o al uso del correo electrónico deberá ser comunicado al profesor durante la sesión de prácticas. No se admitirán memorias entregadas en papel ni en disquete. Sólo se corregirán aquellas páginas Web publicadas en el servidor Web de alumnos de la Universidad de Valencia. 4.- SITIOS WEB DE INTERÉS PARA EL DESARROLLO DE LAS PRÁCTICAS DE HTML Guía para escribir documentos HTML: http://sestud.uv.es/manual.esp. Completo manual de HTML desarrollado y mantenido en la Universidad de Valencia con ejemplos gráficos. Webestilo: http://www.webestilo.com. Completo sitio web en castellano acerca del desarrollo de sitios Web. Particularmente recomendado su apartado de usabilidad. Iconos y Logos de la Universidad de Valencia: http://www.uv.es/formatos. Web de la Universidad de Valencia con todos los recursos de iconografía para publicaciones corporativas de la Universidad. Gestión de espacios Web en la Universidad de Valencia: http://www.uv.es/siuv/cat/zinternet/gespais.htm. Descripción del servicio de espacio Web en la Universidad. Página 7 de 7