Tarea UT2-CSS

Enunciado

Orientaciones para el
alumnado
IMPORTANTE: Cuantos más ejercicios de CSS se hagan, más
opciones se tendrán para aplicar en la tarea.

Esta tarea tiene como objetivo ampliar y modificar la Tarea de la UT2

HTML del país elegido y aplicar estilos CSS, también se pueden hacer
y se deben hacer modificaciones y/o ampliaciones, si se considera
necesario (arreglar las indicaciones de la tarea de HTML), pero debéis
mantener los elementos que se pedían, al menos 3 páginas, etiquetas
de HTML, listas, tablas, formularios.....para poder aplicar las
propiedades CSS que se han ido aprendiendo.

1. El proyecto se debe realizar con NetBeans/ Visual Studio Code

(Ver videos).
2. Elige un navegador en concreto para realizar la tarea, ya que el
resultado puede ser diferente según el navegador elegido e
indícalo en el momento de hacer la entrega, para que el
profesorado pueda ver el resultado lo más ajustado posible a tu
trabajo.
3. Lleva siempre el control de los elementos que vas incluyendo, las
modificaciones que vas realizando y haz copias de seguridad
para poder volver a una situación anterior, es un trabajo de
pruebas y errores.
4. Es recomendable ajustarse a los conocimientos que se van
teniendo, adquiriendo progresivamente y no querer aplicar
elementos que se ven en internet y todavía no se controlan.

Nota: Si algún alumno presenta una página generada por un

software o copiada de algún sitio ya construido se calificará con
un 0.

Existen herramientas software para comprobar los plagios.

 Notas
No te desanimes si al final el resultado no queda tan bonito, ni
tan espectacular como otras páginas que se ven en internet. Lo
más importante es hacer lo que pide el enunciado.

Seguro que una vez terminado el proyecto pensarías que en ese

momento lo harías mejor, es porque el aprendizaje va en
progresión.

Recuerda que lo más importante es conocer las etiquetas, ya

que hay software que construye plantillas, proyectos,... pero
después si se quiere adaptar o mejorar esos proyectos se debe
conocer HTML, CSS... en eso estamos. Al final HTML lo
utilizarás para modificar páginas elaboradas por otros
programas.

Los navegadores incorporan herramientas de diseño web (F12)

que muestran de manera interactiva como va quedando el
resultado con los cambios que se van realizando y se van
reflejando en el proyecto final. No olvides ir haciendo copias del
proyecto para poder regresar a una situación anterior.

En una carpeta Apellido1_Nombre_CSS se van a ir incluyendo los elementos

necesarios para la tarea, incluido un archivo de texto donde se indicará el navegador
que se ha elegido, si has elegido una resolución en concreto...es decir aquellas
indicaciones que creáis conveniente.

Haz una copia del proyecto de HTML del país elegido y conviértelo en un proyecto de
NetBeans o de Visual Studio Code. Primeramente haz los arreglos que se te indican
en la corrección de la tarea de HTML. Si tienes dudas consulta a la profesora.

En la carpeta public_html (en NetBeans) o en otra (VSC) van a ir los archivos html
que se deben crear, las imágenes en una carpeta images, los audios en otra carpeta,
los videos en una carpeta videos, todas las propiedades de estilo en archivos .css
externos (A veces los atributos de anchura y altura de las imágenes van en el
elemento/etiqueta, se hace por claridad, esto no se va a considerar erróneo)

En el ejemplo que se va a presentar se había elegido el personaje de Lucky Luke,

pero es perfectamente aplicable al tema del país:

En la página principal
(index.php) en este caso, se ha
colocado una imagen, una lista
que será un menú a las páginas
correspondientes y unas
imágenes que permitirán el
acceso a las redes sociales.

Con CSS se aprecia

principalmente el cambio en el
menú. La lista ahora está en
horizontal

(Ver w3schools o ejercicios)

La tarea a realizar consistirá en el proyecto de HTML, al que a los elementos de
HTML que se pedían, se les debe incluir propiedades CSS eliminándolas de los
archivos html:

1. de color y fondo.
2. de texto
3. de fuente e iconos.
4. de enlaces
5. de listas
6. de tablas
7. de formularios
8. utilizar el modelo de caja
9. propiedades de posicionamiento

Cada uno de los apartados tendrá su calificación y se valorará el trabajo realizado en

cada apartado como en la tarea de HTML.

Si habéis utilizado propiedades de estilo en los atributos o en la etiqueta <style>

debéis pasarlos a archivo externo. (con las imágenes se hará una excepción)
En este caso, además de la página principal (index.html), hay 4 páginas con un
diseño homogéneo y con propiedades de estilo CSS que hace que las páginas
ahora tengan el siguiente aspecto (MINIATURAS):

La parte superior de la página idéntica en todas. La tabla con

los comics más famosos, se han reducido a dos para que se
pueda visualizar la página al completo.
autor.html
En la parte inferior, un ancla a la parte superior y un enlace a
la página principal index.html (autor.html)

Además del mismo diseño que el resto, la descripción de los

personajes con imágenes y texto
personajes.html
En la parte inferior un ancla a la parte superior y un enlace a la
página principal index.html (personajes.html)

El mismo diseño con alguna imagen.

concurso.html En la parte inferior, un formulario, el ancla y el enlace, igual que

las páginas anteriores (concurso.html)

El mismo diseño y una tabla con unos dibujos que al pulsar en

el enlace se pueden descargar para colorear.
videos.html
En la parte inferior, el mismo diseño que las otras páginas, y un
video (videos.html)
Tenéis dos posibilidades para entregar la tarea:

1. Subiendo la carpeta comprimida con todos los elementos que intervienen en el

proyecto. En el caso de que ocupe poco espacio (máximo 5MG) esta opción se
puede realizar.
2. En cualquier caso, si se tiene una cuenta de gmail u otra que permita
almacenamiento en la nube, se puede, en la entrega, facilitar la URL
correspondiente, para realizar la descarga de la tarea. (Comprobadlo)

Ejercicio creado por Karmele Arocena

basado en un ejercicio realizado por Leire Eslava
Este obra está bajo una licencia de Creative Commons Reconocimiento-
SinObraDerivada 4.0 Internacional.
Obra publicada con Licencia Creative Commons Reconocimiento Compartir igual 4.0