Prácticas de HTML
Desarrollo de Aplicaciones Telemáticas, 2023-2024
Grado en Ingeniería en Tecnologías de la Telecomunicación
Grado en Ingeniería en Sistemas de Telecomunicación
Escuela de Ingeniería de Fuenlabrada
Universidad Rey Juan Carlos
La memoria de estas prácticas debes escribirla en un fichero en formato de texto plano. El fichero estará en tu cuenta del laboratorio. El dia del examen, recogeremos automáticamente tus prácticas.
Es imprescindible que respetes al pie de la letra los nombres de los ficheros especificados en el guión. Una letra mal puesta equivale a una práctica no presentada (o un examen no presentado). Si bien dispondrás de un script que verificará que has usado los nombres correctos
Redacta la memoria describiendo escuetamente todo lo que haces. Esta memoria te será muy útil para preparar el examen práctico (recuerda que podrás llevarla al examen).
No merece la pena que te preocupes de tener una redacción muy cuidada: copia y pega órdenes y resultados, describe telegráficamente lo que haces. Vete preparando la memoria a la vez que trabajas, no lo dejes para el final.
Cuando un paso del guión te pida una orden de shell o similar, es recomendable que primero ejecutes la orden y luego copies y pegues en la memoria. Si resulta algún texto, pégalo también.
Cuando el guión pida que escribas o edites un fichero, basta con que lo modifiques en su sitio. No es necesario que copies y pegues en la memoria.
Crea el directorio ~/dat. Aquí guardarás la mayoría de tu trabajo de prácticas en la asignatura
Ponle permisos rwx------
Debes mantenerlo así todo el curso. Recuerda que debes ser autor del 100% de tus prácticas y no permitir que ningún compañero tuyo tenga acceso a ningún fragmento. Ya deberías saber cambiar los permisos. Si no recuerdas cómo se hace, repasa las transparencias shell I que encontrarás en los anexos de la página de la asignatura.
https://gsyc.urjc.es/~mortuno/index_dat.html#transparencias-de-teor%C3%ADa
Crea el directorio
~/dat/docs
Durante todo el curso, guarda ahí los documentos que quieras tener disponibles durante los exámenes.
Crea el directorio
~/dat/practica01
Crea el fichero
~/dat/practica01.md
Donde escribirás esta memoria de prácticas en formato markdown
https://gsyc.urjc.es/ mortuno/at/markdown.pdf
https://www.markdownguide.org/basic-syntax
https://guides.github.com/features/mastering-markdown
Observa que el nombre de este fichero no es
~/dat/practica01/practica01.md # ¡Este no es el nombre correcto!
Escribe dentro tu nombre, apellidos y login (del laboratorio Linux).
Crea el directorio
~/dat/images
En él podrás guardar imágenes para tus memorias de prácticas. Tal vez no lo uses, bien porque tu memoria no tenga imágenes, bien porque las dejes online en algún servidor. Pero crea el directorio igualmente. Observa que nos referimos ahora a las imágenes de las memorias de prácticas. Durante el curso escribirás también diversos ficheros HTML, que tendrán su propio directorio de imágenes.
Seguiremos este convenio en todas las prácticas, un directorio para cada práctica y un fichero de texto plano para cada práctica, fichero que cuelga de ~/dat
Escribe un fichero en formato markdown con el nombre ~/dat/markdown.md. Prueba los elementos básicos de markdown que hemos visto en clase. Genera una versión en HTML con pandoc y css. Usa pandoc para limpiar el markdown. El resultado de esta práctica es el fichero .md, no es necesario ninguna memoria adicional.
Analiza con el W3C Markup Validation Service el código de 3 sitios web. Han de pertenecer a organismos o empresas de cierta relevancia.
En el fichero ~/dat/practica01.md escribe un pequeño informe con los resultados, explicando en qué consisten y cómo se arreglarían. No es necesario que los describas todos, es suficiente con 10 errores (entre las tres páginas).
Prepara un fichero HTML llamado ~/dat/practica01/ej01.html que contenga un ejemplo de cada uno de los elementos HTML vistos en clase:
Comentario (con tu nombre, apellidos y login)
p, br, em, pre
h1, h2 (y algún otro h si quieres)
Enlaces a otra página
Enlace a un apartado de la página actual
div, span
ol, ul, dl
img
img dentro de un enlace
No especifiques colores, fuentes, tipos de letra ni nada similar. En el siguiente tema veremos cómo hacerlo de forma correcta.
Guarda las imágenes en el directorio ~/dat/practica01/images
Puedes usar el editor que prefieras, pero debería ser uno con soporte para HTML.
El contenido no es relevante, usa cualquier texto de prueba.
Ignora todo aquello que es propio de HTML 4 y obsoleto en HTML 5. Recuerda que salvo indicación en contrario, todo el HTML que manejamos en la asignatura es HTML 5.
Comprueba con el W3C Markup Validator que tu código no provoca errores.
Recuerda que en prácticas como esta donde lo único que tienes que hacer es escribir un fichero html, no es necesario añadir nada en el fichero de memoria de prácticas (practica01.md).
En este ejercicio practicarás el uso de formularios HTML.
Prepara dos ficheros HTML llamados ~/dat/practica01/alta.html y ~/dat/practica01/operacion.html
Contendrán formularios para darse de alta y para operar una aplicación web. Puede ser un banco, una compañía de seguros (hogar, automóvil...), una compañía telefónica, una agencia de transporte, de paquetería, viajes, empleo, alquiler de vehículos, etc. Ambas páginas se corresponderán al mismo negocio.
El formulario de la página alta.html solicitará al usuario los datos necesarios para darse de alta en esta compañía imaginaria.
El formulario de la página operacion.html permitirá al usuario introducir la información necesaria para una operación cualquiera de este negocio. Por ejemplo, en el caso del banco la página de operación puede ser para realizar una transferencia bancaria, revisar recibos, revisar cargos en cuenta o en tarjeta de crédito. Si es una compañía de seguros, la operación puede ser dar un parte. En una agencia de transporte, encargar una recogida de un paquete para un envío, etc
Haz que los campos sean razonablemente realistas, aunque no te preocupes por nada relativo al aspecto gráfico o el formato. Procura usar el mayor tipo de elementos de formulario posibles.
Sugerencia: entre en alguna página web de una empresa real y tómalo como referencia.
Usa siempre el elemento <label>
Si lo deseas, puedes añadir más de una página de operaciones, con los nombres
~/dat/practica01/operacion02.html, ~/dat/practica01/operacion03.html, etc.
Comprueba con el W3C validator que tu código no provoca errores. Podrá dar avisos relativos al uso de input color o input date, pero verifica que no da ningún otro aviso.
Para esta práctica necesitas tu propio ordenador, posiblemente tendrás que hacerla en casa (a menos que hayas llevado el portátil a clase).
Crea en algún lugar de tu ordenador de casa una carpeta llamada dat. No importa si es Linux, Windows o macOS. Usando FreeFileSync, haz que sea una réplica (bidireccional) de tu directorio ~/dat
Provoca un conflicto, intencionadamente
Soluciona el conflicto
Durante todo el curso, mantén sincronizadas estas dos carpetas.
Sobre esta práctica no es necesario que escribas memoria. Pero es una práctica imprescindible. No hacerla correctamente podría suponer un suspenso en la asignatura: si se perdieran tus prácticas del laboratorio (algo difícil pero no imposible), podrás entregar la copia que realizas con este método. Si no tuvieras una copia al día, tendrías que repetirlo todo. Si no te diera tiempo, suspenderías.
Ejecuta el script ~mortuno/revisa practicas dat para comprobar que los nombres de tus ficheros son correctos.