Prácticas de HTML
Aplicaciones Telemáticas
Grado en Ingenieria Telemática, 2021-2022
Escuela Técnica Superior de Ingeniería de Telecomunicación
Universidad Rey Juan Carlos
La memoria de estas prácticas debes escribirla en un fichero en formato markdown. El fichero estará en tu cuenta del laboratorio. El dia del examen, entregarás automáticamente tus prácticas mediante un script que te indicará el profesor.
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 ~/at. 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.
Crea el directorio
~/at/practica01
Crea el fichero
~/at/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
~/at/practica01/practica01.md # ¡Este no es el nombre correcto!
Esta memoria de prácticas la escribirás en formato markdown
Escribe dentro tu nombre, apellidos y login.
Crea el directorio
~/at/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 ~/at
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 ~/at/practica01.md escribe un pequeño informe con los resultados, explicando en qué consisten y cómo se arreglarían. Si son muchos no es necesario que los describas todos, es suficiente con 10 errores (entre las tres páginas).
Prepara un fichero HTML llamado ~/at/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 ~/at/practica01/images
Puedes usar el editor que prefieras, pero debería ser uno con soporte para HTML. Por ejemplo atom.
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 validator que tu código no provoca avisos ni 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).
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 at. No importa si es Linux, Windows o macOS. Usando FreeFileSync, haz que sea una réplica (bidireccional) de tu directorio ~/at
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.
En este ejercicio practicarás el uso de formularios HTML.
Prepara dos ficheros HTML llamados ~/at/practica01/alta.html y ~/at/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
~/at/practica01/operacion02.html, ~/at/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.