Saltar la navegación

7. El ascenso de la popularidad: Tu web de extraescolares

Rétor dice:Llegados a este punto, has aprendido a utilizar los diferentes lenguajes de programación que se emplean en la creación de las páginas web y sus características básicas:

  • HTML
  • CSS
  • PHP

Has instalado un servidor web para hacer funcionar una web dinámica en el esquema de programación en el servidor y también has visto cómo estructurar un diseño web, e incluso se te ha proporcionado una plantilla básica para posicionar un menú lateral. ¡Es el momento de utilizarlo para la creación de La Web de Extraescolares!

1. Extraescolares con diseño

Imagen de un diseño básico de la web con un título arriba, un menú lateral con tres opciones y un contenido en su zona central.Lo primero que vamos a realizar es el diseño de nuestra página web. Haréis un diseño en grupo para discutir entre todos la apariencia de la página. Tenéis toda la libertad para darle la apariencia que os guste, ¡aplicad vuestra creatividad! Aunque tenéis que cumplir con unos componentes básicos que son los siguientes (a la izquierda podéis observar el esquema básico):

  • La web debe tener un título en su parte superior.
  • Contendrá un menú lateral con las siguientes opciones: Presentación - Actividades - Añadir actividades.
  • Por defecto, cuando se abre la página web (ese primer fichero debe tener por nombre index.html, ya que será la página que se abre por defecto al visitar el sitio) la información que se presentará será la correspondiente al apartado Presentación. En esta presentación podréis disponer el texto, imágenes, vídeos,...todo lo que consideréis atractivo para presentar vuestro trabajo.

Para el resultado

  • Como resultado de este primer ejercicio se obtendrá el fichero index.html
  • Recordad que deberéis delimitar con el atributo class visto en el apartado 4.2. las diferentes partes, o bloques, de la página. En el siguiente ejercicio los posicionaremos adecuadamente con la aplicación del CSS.

2. Cada elemento a su sitio y CSS para todos

Imagen que muestra los diferentes tipos de dispositivos que pueden consultar una web y que originan un diseño responsive.Una vez construida la estructura de nuestra página es la hora de añadir estilos. ¡Usarás el CSS aprendido! Por supuesto puedes añadir todas las reglas que consideres que contribuirán a mostrar la web lo más atractiva posible, pero también hay una serie de puntos básicos por los que debes comenzar:

  1. Posiciona adecuadamente cada bloque de elementos. Puedes guiarte por la ilustración del ejercicio 1. ¡Recuerda! En el apartado 4.2., en el punto último, tienes una guía del código para posicionar, aunque tendrás que recalcular los píxeles o porcentajes de posicionamiento.
  2. Añade un estilo que se aplique al título de la página (que seguramente usará la etiqueta h1).
  3. Añade un estilo que se aplique a todos os párrafos de texto normal que se usen en la información de la página utilizando un tamaño de letra 14 y texto justificado.
  4. Los enlaces que aparezcan en el texto se deberán mostrar en un tamaño de letra mayor: tamaño 16, y en color azul.
  5. El resto de encabezados que se usen en la web deben tener un color de letra verde oscuro.

Cumplidos estos puntos, añade más reglas y ¡realiza un diseño atractivo! El resultado de este ejercicio será un fichero aparte del anterior con extensión .css (No olvides llamarlo desde tu fichero index.html del ejercicio 1)

Clavis dice ¿Quieres ser más eficiente?

Vamos a reflexionar sobre la naturaleza de los procedimientos y recursos eficientes que tiene CSS. Uno de los recursos de CSS es que para posicionar un bloque dentro de una página web se recomienda usar porcentajes en vez de píxeles. ¿Por qué? Pues porque tu web se consultará desde montones de dispositivos de muy diferentes características: PCs, móviles de diferentes tamaños de pantalles, tablets de diferentes marcas y dimensiones... Si utilizas píxeles para posicionar un elemento, puede que se vea bien en tu pantalla, pero en otra más pequeña quizás quede el elemento cortado o desplazado encima de otro contenido, haciendo inaccesible la información. Al utilizar los porcentajes, lo que estás haciendo es posicionar los elementos en relación al tamaño de la pantalla que consulta la web, ¡por lo que siempre se visualizará correctamente! Esto es lo que en programación web se llama estilo responsive o adaptativo (visualización correcta en cualquier dispositivo).

Estos procedimientos te permiten resolver con éxito y de manera eficiente el reto que se te ha encomendado.

¡Vamos allá!

3. Pasen y vean nuestras actividades

Imagen de una web que tarda en cargar, por lo que no tiene un diseño eficiente.¡Es la hora de presentar las actividades del centro! El trabajo que se ha realizado, y que se seguirá realizando, a lo largo del curso. El administrador de la base de datos o encargado de recopilar la información sobre las mismas las habrá ido almacenando en la base de datos de actividades que creaste en el punto 4 del apartado 6. Es tu turno: ahora hay que mostrar esta información en la web, y lo harás utilizando tus conocimientos de interoperabilidad HTML-PHP. El funcionamiento que debes implementar será el siguiente:

  1. Este apartado se mostrará cuando el usuario de la web haga clic en el enlace lateral Actividades (puedes consultarlo en la imagen del ejercicio 1).
  2. Te recomendamos que cuando pulses en dicho enlace se abra un nuevo fichero HTML. Para ello duplica el fichero existente index.html, renómbralo y cambia el contenido de la presentación que mostraba en la zona central de la página, por el nuevo código que mostrará las actividades extraídas de la base de datos. Recuerda guardar siempre este nuevo fichero en el mismo directorio que los anteriores para que pueda ser accedido en la misma ruta.
  3. Tu código PHP debe conectar con la base de datos existente.
  4. Realizarás la consulta SQL para extraer los datos de las actividades.
  5. Finalmente, les darás formato a la presentación de dichos datos siguiendo el ejemplo realizado en el punto 3 del apartado 6.
  6. Te recomendamos seguir esta estructura al presentar cada actividad:

Imagen que muestra la estructura de la presentación de la actividad: Texto

Lumen dice ¡Es importante!

  • Te recomendamos crear un nuevo fichero HTML porque si utilizas el mismo creado en el ejercicio 1 (index.html) cada vez que se acceda a la web, ésta se cargará completa: incluyendo la carga de todas las actividades extraescolares de la base de datos en la zona inferior de la página. Esto puede ralentizar la carga inicial de la página web y hacer que le usuario se "aburra" de esperar a que cargue. ¡No queremos perder visitantes! Dejando el fichero index.html sólo para la presentación aseguramos una rápida consulta a nuestra web, haciéndola más eficiente. También recomendamos crear el nuevo fichero html a llamar, para la presentación de las actividades, a partir del index.html porque debemos seguir presentando la misma estructura: menú lateral, título, estilos, etc... Sólo cambiará la información central que, en vez de presentar la web, presentará las actividades. Para nosotros son dos ficheros distintos, pero para el usuario esto es invisible y sólo percibirá que cambia el contenido central.
  • Se van a publicar las actividades extraescolares del año en curso, por lo que la consulta select que vamos a realizar a la base de datos deberá implementar la condición de que su fecha esté comprendida entre el 01/09/2022 y el 30/06/2023.
  • La conexión a la base de datos debe ser automática, por lo que necesitarás incluir en el código PHP el usuario y la contraseña de la base de datos para un acceso automático con el fin de sacar y mostrar la información.
  • Cuando crees el código para mostrar la imagen, no olvides darle un ancho y un alto html por defcto. Si no lo haces, las imágenes se mostrarán con el tamaño y resolución que se hayan subido a la base de datos, ¡y pueden tener un tamaño enorme que descuadre la web!

4. Para mostrar primero hay que almacenar

¡Afrontamos el último paso de nuestro reto! Hay que crear la interfaz web que permitirá al administrador de la base de datos, o la persona encargada de documentar las actividades extraescolares del centro, introducir la información de las actividades que se van realizando en el centro.

Gracias a este paso tendremos una web que se va actualizando automáticamente, sin realizar ningún cambio en su código, con las actividades que se van añadiendo. ¡Perfecto para que la pueda mantener un usuario sin conocimientos de creación de páginas web ni de diseño web!.

Imagen ejemplo de uso de textarea en un formulario.Obviamente, para este paso realizarás un formulario web que permita recopilar los datos. Estos son los campos de los que deberá constar:

  1. Usuario y contraseña para conectarse a la base de datos: Sólo una persona con permisos debe poder añadir los eventos, por l oque pediremos el usuario y la contraseña de conexión a la base de datos para que cualquier usuario no pueda utilizar dicho formulario web y añadir contenido malicioso.
  2. Título de la actividad: campo de tipo texto.
  3. Foto de la actividad: campo de tipo fichero.
  4. Descripción de la actividad: campo de tipo textarea. (En la imagen izquierda tienes un ejemplo de campo textarea en un formulario html)

¡Recuerda! El resultado de este ejercicio debe ser también una página diferente que te recomendamos sea un duplicado del archivo index.html cambiando su contenido de la zona central de información. No olvides conectar con la base de datos y realizar el insert SQL adecuado.

Lumen dice No olvides...

  • Puedes consultar los distintos tipos  de campos para un formulario web HTML en esta página. (Consulta input types en el margen izquierdo de la web).
  • Para el tipo textarea consulta aquí su información y no olvides darle un atributo "name" para que el formulario web sepa a qué variable PHP debe volcar posteriormente el valor.

Lumen dice ¿Un reto?

¿Qué tal te ha ido el reto? ¿Has conseguido realizar los cuatro ejercicios? Recuerda que la primera vez que nos enfrentamos a la programación web no resulta intuitiva, ni su construcción, ni su funcionamiento. Seguramente deberás hacer muchas pruebas escribiendo código y visualizando el resultado una y otra vez para hacer las correspondientes modificaciones de código y rectificaciones. Pero no olvides consultar con tu profesorado y compañeros y compañeras de clase ante cualquier duda.

¡Muchos ojos ven más que dos y varias mentes llegan más rápido a un resultado!

Incluso si puede llegar a parecerte un callejón sin salida, entre varios hallaréis la solución. Ya sabes que cuando trabajamos en grupo aprendemos también en equipo y cada uno tiene una habilidad diferente que puede poner al servicio de los demás.