Índice

HTML/XHTML CSS Diseño Responsivo FlexBox Animaciones Compatibilidad con múltiples navegadores

HTML/XHTML

Algunas de las actividades planteadas están tomadas de librosweb.es, de Javier Eguíluz

Actividad 1.Empleando el texto siguiente, crea una página html (empleando las reglas de estilo xhtml) cuyo aspecto sea el siguiente:



Actividad 2. Partiendo de la actividad 1, haz las modificaciones necesarias para que la página se muestre del siguiente modo:

Ten en cuenta que se han realizado las siguientes modificaciones:

  • 1. La nota es tratada como una cita (y se desplaza hacia la derecha).
  • 2. Se ha cambiado parte del texto de la nota, y se desea que el lector se de cuenta.
    • 2.1. Donde pone "está casi", ahora pone "ha sido".
    • 2.2. Para más información sobre los cambios, se cita la url siguiente http://www.debian.org/devel/debian-installer/.
  • 3. Se ha destacado el texto "Este documento contiene las instrucciones de instalación del sistema Debian GNU/Linux 5.0."

Actividad 3.Empleando el código fuente de la página anterior, introduce las siguientes modificaciones:

  • Sustituir "Licencia pública general GNU" por el acrónimo GPL y dar una definición.
  • Sustituir Intel x86 por la abreviatura i386 y añade su significado.
  • Añadir a la primera aparición de la palabra Debian (en el título) el siguiente texto de definición:

Debian es un sistema operativo (S.O.) libre, para su computadora. El sistema operativo es el conjunto de programas básicos y utilidades que hacen que funcione su computadora. Debian utiliza el núcleo Linux (el corazón del sistema operativo), pero la mayor parte de las herramientas básicas vienen del Proyecto GNU; de ahí el nombre GNU/Linux.

  • Añadir al final la siguiente cita de Richard Stallman:
  • Las obras de conocimiento deben ser libres, no hay excusas para que no sea así.

Actividad 4. Empleando el código fuente del ejercicio anterior, marca la dirección de correo que se indica al final, dejando claro que se trata de "una dirección de correo". Utiliza marcado genérico.

Actividad 5.Empleando las etiquetas que has aprendido, escribe un código fuente cuyo resultado sea el siguiente:

Actividad 6. A partir de la estructura de de directorios y archivos indicada en la siguiente imagen:

1) Crear la siguiente página llamada indice.html que sirva como página principal del sitio:

2) Crear la página de índice del portfolio: Página con la información sobre los proyectos realizados

3) A su vez, las páginas de cada uno de los proyectos, serán similares a las siguientes:

4) Descarga una imagen de internet que desees colocar como favicon. Haz los cambios necesarios para la imagen aparezca en la barra de título del navegador. En la imagen puedes ver el símbolo de Sumatorio.

5) En la página principal, debes tener en cuenta las siguientes cuestiones:

  • Se ha resaltado "Lo que estoy aprendiendo".
  • Observa que se ha rectificado la fecha del curso.
  • Se ha resaltado "mis nuevos avances".
  • Si ponemos el ratón sobre las siglas CCNA, se muestra el texto "Cisco Certified Network Administrator"
  • Al poner el ratón sobre el texto del título "GNU/Linux", se muestra el texto explicativo: "GNU/Linux es un S.O. libre"
  • El enlace en la palabra CentOS apunta a "https://wiki.centos.org/Download"
  • Observa la cita en la parte inferior de la página

Entrega la actividad con el nombre Act-sitio.zip. El archivo debe incluir el sitio completo.

Actividad 7. Incrusta objetos de vídeo en tus páginas web.

  • Consulta un vídeo de Youtube e incrústalo en una página.
  • Descarga los vídeos de este enlace, y utiliza el elemento video de HTML5 para que pueda verse en Firefox.

Actividad 8. Crea, empleando las etiquetas table, th, tr, td y caption, así como los atributos scope, summary, colspan y rowspan, construye la siguiente tabla:

Observa que cada asignatura tiene su propia etiqueta descriptiva, para que cualquier usuario pueda ver el significado de las siglas. La imagen de la primera celda de la tabla, puedes descargarla de aquí.

Actividad 9. Utilizando tus conocimientos sobre tablas en xhtml, escribe una página como la siguiente:

Sigue las siguientes indicaciones

  • Utiliza agrupamiento en filas (thead y tbody).
  • Utiliza también agrupamiento por columnas según las siguientes especificaciones:
    • Un grupo con la primera columna, otro grupo con las dos columnas centrales y un último grupo con la última columna).
    • El grupo de columnas central tendrá un ancho de 200 píxeles por columna. Agrega también el siguiente atributo a las columnas centrales: style="background-color:#ddddff".
  • Añade en la cabecera información sobre el ámbito (scope). Finalmente, agrega en la tabla el atributo rules="groups" (este último atributo solo funcionará en firefox u ópera. Prueba también con rules="all").

Las imágenes para hacer el ejercicio, las puedes descargar desde aquí. El texto de la página está aquí

Entrega la actividad con el nombre Act-tablas.zip. El archivo comprimido debe incluir todo lo necesario.

Actividad 10. Crea una página con el siguiente formulario:

La mayoría de requisitos se pueden observar claramente a través de la imagen. Pero hay un requisito que no es posible ver, y que procedo a indicar aquí. Cada etiqueta descriptiva junto a un campo debe estar vinculada a dicho campo.

Los nombres de los campos, por orden de aparición, será:

  • nombre
  • apellidos
  • usuario
  • password
  • web
  • email
  • sexo
  • noticias
  • so
  • comentarios

Otro aspecto a comentar, es que el campo "Sistema Operativo preferido", debe ser una lista desplegable, que permita además introducir valores no descritos en la lista. Los valores ofrecidos son:

  • Windows XP
  • Windows 7
  • Windows 8
  • Windows 10
  • Ubuntu
  • Fedora
  • Debian
  • CentOS
  • Mint
  • MacOS

El formulario debe enviar los campos del formulario a la página http://www.mauriciomatamala.net/LMSGI/formulario.php

Entrega la actividad con el nombre Act-formularios.html.

CSS

Vamos a empezar por la página librosweb.es/css/capitulo_1/como_incluir_css_en_un_documento_xhtml.html. A continuación conoceremos los selectores básicos en librosweb.es/css/capitulo_2/selectores_basicos.html. Para esta sección, puede ser necesario consultar la siguiente referencia de CSS para conocer las propiedades y sus posibles valores.

Adicionalmente, vamos a consultar la siguiente página: librosweb.es/css_avanzado/capitulo_3/selectores_de_css_3.html sobre selectores en CSS3.

Actividad 1. Empleando el código fuente mostrado en este enlace, utiliza los selectores que has aprendido para obtener el resultado mostrado en esta imagen. A continuación se dan algunas indicaciones:

  • El título principal es de color gris y está subrayado.
  • El título secundario dentro de la sección "introduccion", utiliza el color de letra "#99c".
  • Todos los párrafos dentro de la sección "introduccion" utilizan una fuente "monospace" y un color "#779".
  • Toda sección marcada de forma genérica como "destacado", utiliza una fuente en negrita y color de fondo amarillo.
  • Una cita (blockquote) se muestra con un fondo de color "#d3d3d3", un estilo de letra cursiva, y un color de letra "#00f".
  • El autor de una cita utiliza una fuente "monospace".
  • Las listas desordenadas, aparecen con un tamaño de letra "0.8em" y un color gris.
  • Los elementos de lista marcados como "principal" utilizan una fuente en negrita.
  • Los textos marcados como "email" utilizarán una fuente "monospace", fuente en negrita y tamaño de fuente "1.5em".
  • En la tabla, las filas pares utilizan un color de fondo "#cce".
  • La primera fila de la tabla tiene fuente en color rojo
  • La primera columna de la tabla tiene fuente en color rojo
  • El pie de página tiene un tamaño de fuente "0.8em" y el texto está centrado.

El modelo de cajas está explicado en http://librosweb.es/css/capitulo_4.html

Como añadidos al modelo de cajas, podemos hablar de las siguientes propiedades:

Actividad 2. Empleando el código fuente de ejemplo mostrado más abajo, realiza los siguientes cambios:

  • Los bordes deben desaparecer. Puede dejarlos mientras resuelves los apartados, pero al final debes quitarlos (o comentarlos).
  • Añadir la imagen de fondo "fondo-bar-nav.jpg" a la barra de navegación (id="barnav"). Esta imagen debe repetirse en la componente x (es decir, horizontalmente).
  • Asigna a las cajas de la columna izquierda (class="cajaizq") las siguientes propiedades:
    • Color de fondo gris. Por ejemplo #ccc.
    • Margen de 10 píxeles
    • Relleno de 20 píxeles
  • Asigna a las cajas principales (class="cajaprin") las siguientes propiedades:
    • Añadir la imagen de fondo "fondo-caja.jpg". Esta imagen debe repetirse en la componente x (es decir, horizontalmente).
    • Añadir el color de fondo blanco (por si la caja es más alta que la imagen, la parte sobrante se verá de color blanco)
    • Margen de 10 píxeles
    • Relleno de 20 píxeles
  • El pie de página tendrá un fondo de color gris. Por ejemplo #aaa. Si deseas centrar el texto del pie puedes utilizar la propiedad "text-align:center".
  • Asigna a body un color de fondo gris oscuro, como por ejemplo #888.
  • Asigna al contenedor color de fondo blanco.

Como ayuda, aquí tienes una muestra de cómo se muestra originalmente la página, y de como debe quedar después de hacer los cambios indicados.

La página antes de los cambios

La página después de los cambios

Para resolver este ejercicio, necesitarás utilizar las imágenes incluidas en este fichero coprimido: Descargar imágenes para el ejercicio..

El código fuente sobre el que podeis trabajar es el siguiente: Descargar código fuente de la actividad.

Actividad 3. Empleando la página anterior, haz las modificaciones necesarias para obtener un resultado similar al siguiente:

Actividad 4. Añade los elementos necesarios para que la página anterior adquiera un aspecto similar al siguiente:

Los menús son una parte importante en las páginas web. Nos permiten movernos con comodidad por un sitio, además nos permiten ubicarnos. Seguiremos como inicio las técnicas descritas en http://librosweb.es/libro/css/capitulo_9.html.

Actividad 5. Crea una sencilla página que contenga un "menú izquierdo" y otro "menú de navegación". Ambos menús deben estar separados en cajas independientes, de manera que se puedan probar correctamente. El comportamiento de ambos menús se especifica a continuación.

Entrega la actividad como Act-css-menus-desplegables.zip, donde se contenga todo lo necesario para poder ver la página al descomprimir el archivo.

Cuando vimos los formularios en html, quedaron bastante feos. A continuación cito dos enlaces que pueden ayudarnos a comprender mejor cómo darles estilo:

El código fuente de partida lo puedes descargar desde aquí: formulario-sin-estilo.zip

Ahora que hemos usado el elemento div hasta en la sopa, vamos a ver que dice HTML5 sobre el layout: http://mosaic.uoc.edu/ac/le/es/m8/ud2/

Actividad 6. La siguiente imagen muestra una estructura típica de las páginas web

Hemos visto herramientas tanto de HTML como de CSS que permiten construir un sitio con unas características similares. Deberás crear una página que siga los siguientes requisitos:

  • La "barra lateral" puede estar a la izquierda o a la derecha.
  • La "cabecera" está perfectamente alineada con la "barra lateral" y con la "sección principal".
  • La "barra lateral" y la "sección principal" tienen la misma altura, y llegan hasta el "pie".
  • Los márgenes, bordes y espacios de relleno de las cajas son libres, y cuando se mantenga un ritmo en el diseño.
  • Puedes usar (si lo deseas) como contenido el texto "Lorem Ipsum".

El siguiente ejemplo sigue la estructura citada. Se trata simplemente de un ejemplo, por lo que no es necesario que sea igual.

Entrega el ejercicio en un archivo comprimido llamado actividad-pagina-css.zip que incluya todos los elementos necesarios para que la página se pueda visualizar correctamente.

Responsividad

Para poder entender qué es el diseño web responsivo, podemos consultar en www.mauriciomatamala.net/LMSGI/web-responsiva.php

Actividad 7. Modifica la actividad anterior para que cuando la pantalla tenga un ancho inferior a 680px, la página adopte la siguiente estructura:

Entrega la actividad en un archivo comprimido llamado Act-css-responsiva.zip que incluya todos los elementos necesarios para que la página se pueda visualizar correctamente.

Flexbox

Vamos a ver una introducción a un modelo de diseño nuevo que apareció con CSS3, basado en cajas elásticas, llamado Flexbox

Actividad 8. Observa las siguientes imágenes. Hacen referencia a la evolución de un layout que incluye flexbox. El código fuente de dicha página, puedes encontrarlo aquí.

Crea los estilos CSS utilizando flexbox, para conseguir un comportamiento lo más parecido posible.

Entrega un documento llamado Act-flexbox.html

GridView

Una de las técnicas de diseño de Layouts más utilizad es GridView. No se trata de la especificación de CSS3 (Grid), que es bastante poco soportada en la actualidad por los navegadores. Se trata de una técnica de diseño basada en retículas, similares a las empleadas en diseño gráfico.

Actividad 9. Observa las siguientes imágenes. Corresponden a una misma página, diseñada mediante gridview, con diferentes tamaños de pantalla. Escribe una página responsiva parecida a la mostrada, que cambie su aspecto cuando el ancho del viewport pasa de 500px.

La página tiene 500px como punto de ruptura para el cambio.

Comprime el ejercicio en un archivo llamado Act-css-grid.zip, de forma que incluya todo lo necesario para comprobar el ejercicio al descomprimir.

Animaciones

Las animaciones se suelen utilizar para que al usuario le de tiempo a acomodarse a un cambio y eliminar así la brusquedad. Por eso, se pueden utilizar en el diseño de manús y layouts. En el siguiente artículo sobre animaciones en CSS3 podemos ver una introducción al tema.

Actividad 10. Retoma la actividad sobre menús (actividad 7), y busca la manera de aplicar una animación, para los submenús se muestren suavemente.

Entrega la actividad con el nombre Act-css-animacion.zip, de forma que incluya todo lo necesario para comprobar el ejercicio a descomprimir.

Compatibilidad con múltiples navegadores

Cuando escribimos una hoja de estilos, la forma en que los diferentes navegadores lo interpretan varía. Y el problema mayor está con aquellos navegadores antiguos que no implementan alguna de las características. Estamos hablando de Browser testing.

Actividad 11. Crea una web responsiva con un diseño similar al siguiente:

Comprueba que la web se ve correctamente en los siguientes navegadores:

  • iPhone 5 con IOS 9.0
  • IE 8 con resolución 800x600
  • IE 9 con resolución 1280x800
  • IE 10 con resolución 1280x1024
  • Samsung Galaxy S3 con Android 4.4
  • Chrome 39 en Linux con resolución 1024x768

Toma una captura de cada uno de los tests, y entrégalos en un archivo llamado Act-compatibilidad.zip.

Para terminar, vamos a ver una introducción a SASS.

Actividad 12. Utilizando SASS, crea un esquema para GridView de 12 columnas.

Entrega un archivo llamado Act-sass.scss.