Descripción de la tarea

Introducción

Un sitio web es un conjunto de páginas web interrelacionadas y con una temática en común, a las que se accede desde una dirección URL raíz, llamada normalmente página de portada o inicio. Existen muchos tipos de sitios web, por ejemplo un blog sería un sitio web que se actualiza periódicamente en forma de artículos. Otros sitios web son más estáticos y permiten presentar información de una empresa u organización que no cambia con asiduidad.

Aunque actualmente en la web 2.0 disponemos de miles de herramientas gratuitas para crear sitios web y publicarlos, con esta tarea vamos a programar una página web en nuestro propio servidor local, utilizando los siguientes lenguajes de programación:

  • HTML: lenguaje de marcas que permite la creación de páginas web estructuradas.
  • CSS: lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para establecer el diseño visual de los documentos web (HTML).
  • PHP: lenguaje para crear formularios.

Desarrollo de la tarea

Para abordar esta tarea deberás crear un Sitio Web: este sitio debe ser tu tarjeta de presentación, una página web donde te presentes, indiques tus aficiones y enlaces a tu blog y redes sociales.

La tarea es un pequeño proyecto de aprendizaje que se estructura en fases, puedes ir haciéndolas una a una.

Si tienes dudas, pregunta claramente antes de dar un paso en falso y pasar a la siguiente fase sin tenerlo claro; haz uso de los foros. En todo momento, el profesorado podrá hacerte recomendaciones y darte consejos sobre tu página web.


1. Crea la página web

Vas a crear tu propia página web de presentación en varios pasos.

Con un bloc de notas (o el programa Notepadd) debes escribir el código HTML de tu página web:

  • En ella debes indicar tu nombre, presentarte brevemente y enlazar al artículo de presentación que escribiste en tu blog de aula.
  • Colgar una fotografía personal. Esta imagen debe estar guardada en la misma carpeta donde coloques tu página web.

El siguiente código HTML sirve para incrustar imágenes en tu web que estén en tu propio ordenador: <img src="archivo.jpg">

El resultado será una cosa sencilla, parecido a esto:

Página web de Ticodemo
Página web del alumno TICodemo. Captura de pantalla de elaboración propia

2. Añade imágenes libres

Siguiendo los manuales estarás en disposición de crear un álbum de fotos interactivas sobre tus hobbies o aficiones:

Página web de Ticodemo

Captura de pantalla de elaboración propia

Debes crear una tabla con 4 imágenes que estén colgadas en Internet:

  • Busca al menos 4 imágenes (con licencia libre) relacionadas con alguna afición personal y colócalas en tu página web.
  • Insértalas en una tabla de varias filas y columnas, y enlaza cada foto a la url de la imagen original.

El siguiente código HTML sirve para incrustar en tu web imágenes que estén publicadas en internet:

<img src="https://www.example.com/nombreimagen.jpg">

Después debes enlazar a tus redes sociales para darte a conocer y conseguir un mayor número de seguidores. Añadirás a tu paǵina un botón para que tus amigos de twitter te sigan:

Botón Twitter

Captura de pantalla de elaboración propia


3. Añade un formulario


Tu tarea consiste en crear un formulario de contacto que facilite que tus seguidores se pongan en contacto contigo.

Para crear un formulario usarás el lenguaje HTML y PHP, tal y como lo hemos hecho en la tarea anterior. El servidor local APACHE que ya tienes instalado en tu equipo te servirá para ejectuar el formulario.

Puedes basarte en ese formulario que ya creaste y adaptarlo, cambiando los ítems a tus necesidades (formulario.html y tratamiento_datos.php).

Formulario

Imagen de creación propia bajo licencia cc

Una vez creado el formulario debes insertarlo en tu página web (en el sitio adecuado para ello) mediante un enlace al archivo formulario.html.


4. Añade el estilo CSS

Ahora avanzarás con elementos más complejos y aprenderás a mejorar el aspecto de tu web. Te vas a adentrar en el fascinante mundo del diseño gráfico de páginas web, usando hojas de estilo CSS.

Para crear el estilo usamos el lenguaje CSS tal y como lo hemos hecho en las dos tareas anteriores de la unidad (Práctica 2.1. y Tarea 2.2).

Puedes partir de una plantilla CSS: usar el estilo demo.css (Tarea 2.2) o el usado en la Practica 2.1, adaptándolo y cambiándolo a tus necesidades.

Después podrás incrustar esa hoja de estilo en la propia página HTML o bien, enlazarlo a la página HTMLa través de un archivo CSS. En la sección de ayuda puedes encontrar un manual al respecto.

CSS incrustado

Captura de pantalla de elaboración propia

...

Cuenta tu experiencia en el portfolio

Documenta Al final del desarrollo de tu tarea deberás realizar una reflexión sobre tu propio aprendizaje y la publicarás en el blog en forma de artículo que incluya al menos los siguientes elementos:

  • Documenta el proceso: Explicando el proceso que has seguido y las diferentes fases de la tarea.
  • Reflexiona sobre tu aprendizaje: Siguiendo la escalera de la metacognición debes indicar:
          1. Qué has aprendido con la tarea.
          2. Cómo lo has aprendido y cuánto tiempo le has dedicado a la misma.
          3. Para qué te ha servido y qué utilidad tiene lo aprendido.
          4. Indica tu grado de satisfacción final respecto a los objetivos planteados y el resultado conseguido.

Por ultimo, escribe un mensaje en twitter con la dirección url del artículo y usando los hashtags habituales.

Modo de envío

Una vez finalizada la tarea, deberás entregar las siguientes evidencias de tu aprendizaje:

  1. Carpeta comprimida (mi_web_nombre_del_alumno.zip) que incluya la página web completa, es decir archivos HTML, CSS, PHP e imágenes que hayas incrustado.
  2. Indica la dirección del artículo del blog donde has documentado la tarea y el mensaje de twitter donde lo has compartido.

¡Adelante!