Sesion Laboratorio 2 Practica 1 1
- Tiempo: 2h
- Fecha: Jueves, 1 de Febrero de 2024
-
Objetivos de la sesión:
- Enunciado de la práctica 1
- Configuración del repositorio como página web
- Tener el "hola mundo" accesible como página web de github
- Preparar la plantilla para el CV
- Introducción
- Enunciado de la práctica 1 (ESPECIFICACIONES)
- Github Pages
- La URL principal de tus prácticas
- Poniendo en marcha el hola_mundo
- Herramientas para desarrolladores en el navegador
- Hola Mundo 2
- Actividades NO guiadas
- Resumen de tareas a realizar
- Conclusiones
- Autores
- Licencia
- Enlaces
- Configura tu repositorio de prácticas como página web
- Añade la URL de tus prácticas en la página principal de tu repo (About)
- Envíame la URL de tus prácticas en la entrega que tienes en Aula virtual solo si no lo has hecho ya: estudiantes.
- Prueba el ejemplo Hola mundo 1 y déjalo en P1/S1/hola_mundo.html
- Prueba el ejemplo Hola mundo 2 y déjalo en P1/S1/hola_mundo2.html
- Haz la plantilla de tu CV en P1/index.html
- Haz la plantilla de tu CV Responsive P1/index.html
Para familiarizarnos con HTML, CSS, Github y VSCode crearemos una página web sencilla: Tu Currículum.
Será una página pública y accesible a cualquiera desde Github.
No incluyas datos personales.
Si prefieres no hablar sobre tí, puedes hacer el currículum de un personaje público o de ficción
En esta imagen se muestra el CV de Hermione Granger (De la saga de Harry Potter) realizado por Elena Mª del Río Galera en el curso 2019-2020
O también puedes echar un vistazo a este otro de Sara Fernández Torres.
Para que nuestras páginas sean visibles en internet deben estar alojadas en un servidor web.
Github nos permite configurar nuestros repositorios para que los ficheros que tenemos en ellos estén accesibles via web
Nos metemos en nuestro repositorio de prácticas: 2023-2024-CSAAI-Practicas y pinchamos en el botón de Settings
A la derecha tienes el apartado Pages, hacemos clic para ir a la configuración.
Buscamos el desplegable que hay debajo de Branch que por defecto está a None
Este botón nos permite configurar el repo como página web, indicando la rama del repositorio que queremos utilizar como página: Seleccionamos main.
Tras hacerlo, esto es lo que nos aparece:
Para completar la operación pinchamos en el botón de Save.
Nuestro repo se configura como servidor web y si actualizas las página, aparece la URL donde estará nuestra página web.
En mi caso, como soy el usuario jesusgpa, la URL generada es esta: https://jesusgpa.github.io/2023-2024-CSAAI-Practicas/
En tu caso la URL será similar, pero con tu Nombre de usuario en vez de jesusgpa
Inicialmente, como todavía no hemos añadido ninguna página web, github crea una partir del contenido de tu README.
Si entras en la nueva URL verás algo como esto:
NOTA: La configuración de un repo como página web puede llevar unos minutos.
Es posible que al acceder tu URL te salga un mensaje de error diciendo que la página no existe.
Sólo hay que esperar unos minutos hasta que aparezca (depende de la carga de trabajo que tengan los servidores de github en ese momento)
Si has completado el apartado anterior, ya tienes la URL disponible.
La denominaremos: URL de tus prácticas, que debe tener esta pinta:
Deberás realizar dos acciones con esta URL
Para que la URL de tus prácticas esté accesible para tí o cualquier otra persona que visite tu repo, la colocaremos su página principal.
Ve a tu repositorio y pincha en el botón de configuración que está a la derecha de About, en la parte superior derecha
Te aparecerá una ventana nueva donde deberás introducir la URL de tus prácticas en la entrada de texto que pone Website
Tras apretar el botón verde de Save changes aparecerá tu URL en la zona de la derecha, debajo de About.
Ahora ya es visible para cualquiera
Ya estamos listos para mostrar nuestras páginas al MUNDO
Envíame la URL de tus prácticas por Aula Virtual.
Recuerda que esta URL es la que tiene esta sintaxis:
El hola_mundo lo escribimos desde cero y lo probamos en local en la sesión anterior: Escribiendo el hola mundo desde cero
Deberás guardar este fichero: hola_mundo.html en tu repositorio en la carpeta P1/S1
Una vez subido, ya será accesible como página web.
Abre la URL de tu repositorio, y añade al final el recurso al que quieres acceder:
P1/S1/hola_mundo.html.
La URL completa de tu hola mundo será:
https://jesusgpa.github.io/2023-2024-CSAAI-Practicas/P1/S1/hola_mundo.html
Desde el navegador del ordenador verás algo como esto:
Nuestra primera página web ya está en el aire.
Si introducimos la URL en el navegador del teléfono móvil, ahí también veremos la página.
Aunque lo veremos con letra muy pequeña, sobre todo si ponemos el móvil en vertical.
Por defecto, si no se indica nada, las páginas web están preparadas sólo para verse bien en las pantallas de los ordenadores.
Cuando subamos el hola_mundo2.html veremos que esto se soluciona.
Los navegadores no sólo nos permiten ver las páginas web, sino que vienen con muchísimas herramientas integradas para los desarrolladores (nosotros ahora somos desarrolladores web)
Abrimos la página del hola mundo en el navegador y al pulsar el botón derecho veremos que hay una opción que pone View Page Source
Al seleccionar esta opción, se abre una pestaña nueva donde aparece el código original HTML de la página que se está visualizando.
En este caso es una paǵina que hemos hecho nosotros, y el código nos es familiar
Esto lo podemos hacer con cualquier página. Por ejemplo, con la página de github de nuestro repositorio:
Si miramos sus fuentes saldrá algo como esto:
Sale mucho código, y no entendemos casi nada... bueno, algo sí.
Hay etiquetas que son iguales que las de nuestro hola mundo, como por ejemplo la primera (DOCTYPE).
En general, el código html de las páginas será muy difícil de entender porque suele estar generado por las máquinas.
Son páginas dinámicas que se generan al vuelo.
No están escritas por un humano.
El navegador nos permite ver y analizar todas las peticiones realizadas al servidor web, a través del protocolo HTTP, así como sus correspondientes respuestas.
Desde el menú de la parte superior derecha del Firefox, buscamos el submenú web developer
Y dentro de este menú buscamos Network
Pinchamos en Network y se nos abre una ventana nueva (o bien nos aparece un panel nuevo abajo o en el lateral, esto según lo tengamos configurado)
Desde esta nueva ventana es donde veremos las peticiones y las respuestas.
Pinchamos en el botón Disable Caché para que cada vez que recarguemos la página se hagan las peticiones siempre.
Si no la deshabilitamos, las siguientes peticiones no se realizan, porque el archivo a solicitar ya está disponible en la caché
Para comenzar, bien pinchamos en el botón Reload que aparece en la ventana Network, o bien le damos al botón de recargar la página
Vamos a analizar los datos que han aparecido. En la parte inferior izquierda vemos que se han hecho 2 solicitudes.
Cada solicitud se corresponde con una fila de tabla.
Están ordenadas: la primera fila es la primera solicitud, y luego se hace que está debajo.
En la primera solicitud vemos que el navegador le ha pedido al servidor el fichero hola_mundo.html.
El resultado de la petición se ve en la primera columna: Un código de 200 significa que todo está OK.
En la segunda solicitud vemos que el navegador pide le pide al servidor el fichero favicon.ico.
Se trata de un icono opcional.
Si el servidor lo tiene, el navegador lo usa para colocarlo en la pestaña.
En esta foto se muestran varias pestañas de mi navegador.
Los favicons son las imágenes que están en cada pestaña, en la parte de la izquierda
La petición del favicon es algo que hace el navegador por su cuenta.
Nosotros NO lo estamos indicando en ningún lugar de nuestro HTML.
Si pinchamos en cualquier lugar de la primera petición, se nos despliega en la derecha un panel con mucha más información.
En la primera pestaña, Headers, vemos todos los detalles de las cabeceras de petición y respuesta.
En la parte superior vemos el método usado (GET) y la URL completa del recurso que se solicita.
Si examinamos la cabecera de la respuesta, vemos algunos campos de interés:
- content-encoding: Me indica que la información que se devuelve (la página html solicitada) está comprimida con gzip
- content-length: Indica la cantidad de bytes que se envían en el cuerpo de la respuesta: 238 Bytes
- content-type: Me indica el tipo de información del cuerpo. En este caso se devuelve un archivo en HTML, codificado en UTF-8
El número total de bytes transferidos son de 900, de los cuales 662 bytes son de la cabecera y 238 de la página web (que recordemos que está comprimida con gzip).
El tamaño total del archivo recibido es de 350 Bytes
Vamos a crear el fichero hola_mundo2.html desde el VSCode, pero en vez de escribirlo etiqueta por etiqueta, vamos a usar la plantilla que nos proporciona VSCode.
Es la que siempre utilizaremos para comenzar desde 0.
Creamos el fichero en la carpeta P1/S1
Pulsamos las teclas ht y elegimos la opción html:5
Nos aparecerá una plantilla completa con el esqueleto del fichero HTML típico.
Por defecto el cursor se nos coloca en el campo device-width.
El valor que viene por defecto indica que, en dispositivos móviles, se establezca un ancho en píxeles igual al del dispositivo (Más información)
Este valor lo dejamos como está.
Pulsamos TAB y el cursor nos pasa al siguiente parámetro (initial-scale):
Este parámetro nos indica el estado inicial del zoom en los dispositivos móviles.
Lo dejamos a 1.0.
Pulsamos TAB de nuevo.
Ahora el cursor se nos vuelve al interior de la etiqueta <title>.
Escribimos el título. Por ejemplo: Hola Mundo 2 y damos de nuevo al TAB
El cursor se nos sitúa entre las etiquetas <body> y </body>, listos para introducir el contenido.
En este gif animado se muestra el proceso completo.
Completamos el Hola Mundo 2 añadiendo una cabecera H1 y un párrafo.
Lo subimos al repositorio.
Ahora vemos la nueva página web, que estará situada en esta URL (con tu nombre de usuario en vez del mío):
https://jesusgpa.github.io/2023-2024-CSAAI-Practicas/P1/S1/hola_mundo2.html
Si la vemos en el teléfono móvil, ahora las letras salen más grandes y se ven mejor que en el ejemplo del Hola mundo inicial.
Esto es debido a las nuevas etiquetas <meta> que se han añadido
- Tu CV debe estar en la URL:
Cuando no se indica fichero, el servidor web devuelve index.html. Por tanto, tu CV debe estar en ese fichero
-
Créalo desde 0 (igual que el hola_mundo2.html), para que se vea bien desde el móvil también.
-
En el cuerpo mete de momento etiquetas h1 con los diferentes apartados y etiquetas p con los párrafos.
-
Según vayamos aprendiendo html y css, lo vas completando.
- Configura tu repositorio de prácticas como página web
- Añade la URL de tus prácticas en la página principal de tu repo (About)
- Envíame la URL de tus prácticas en la entrega que tienes en Aula virtual
- Prueba el ejemplo Hola mundo 1 y déjalo en P1/S1/hola_mundo.html
- Prueba el ejemplo Hola mundo 2 y déjalo en P1/S1/hola_mundo2.html
- Haz la plantilla de tu CV en P1/index.html
- Descarga la plantilla del CV Responsive, la puedes encontrar en el apartado de contenidos del aula virtual.
Ya sabemos cómo configurar nuestro repositorio como servidor web, y colocar fichero html para que sean visibles desde cualquier parte de internet.
También tenemos lista la plantilla para hacer nuestro CV, según vayamos aprendiendo html y css.
Ya lo tenemos todo listo para empezar nuestro viaje al mundo web.
Jesús Parrado Alameda (jesusgpa)
- Creado a partir del contenido generado por el profesor Jose María Cañas
- Creado a partir del contenido generado por el profesor Juan Gonzalez-Gomez
