Ejercicios prácticos de RWD

Utilizando HTML5 y CSS3, diseña un portal web personal siguiendo las siguientes directrices con un diseño Resposibe Web Design que sea adaptable a todos los dispositivos. Recuerda tanto los documentos HTML como CSS deben ser válidos por el W3C.

Responsive Web Design y estrucutra de capas

  • Crea un diseño web adaptable para los siguientes tamaños de dispositivo:
    • Monitor: min-width: 1000px.
    • Tablet: min-width: 500px and max-width: 1000px.
    • Móvil: max-width: 500px.
  • Capa Contenedor: Contendrá todo el contenido de la página, estará centrada en el navegador y su medida según el dispositivo será:
    • Monitor: 920px.
    • Tablet: 700px.
    • Móvil: 100%.
  • Capa Contenedor (<div>): Se estructurará en las siguientes capas (utiliza las etiquetas nuevas que proporciona HTML5 o capas en su defecto).
    • Cabecera (<header>).
    • Menú (<nav>).
    • Contenido (<div>), que se dividide en Artículo (<article>) y Columna (<aside>).
    • Pie (<footer>).
  • En el diseño Monitor, las capas Artículo y Columna estarán una al lado de otra. En los diseños Tablety Móvil, las capas estarán una encima de otra.

General

  • La hoja de estilos CSS debe estar definida en un único archivo independiente del contenido HTML.
  • Según el programa que utilices, establece el charset (Codificación de caracteres) a ISO-8859-1 o a UTF-8 dentro del <head> del documento.
  • Utiliza la directiva @font-face para cambiar el tipo de la página.
  • Incluye tu propias imágenes e iconos que estarán descargadas en tu ordenador.
  • Asigna un color de fondo a la página y que el contenedor tenga otro color distinto, puede ser imágenes si se desea.
  • Utiliza "id" para las capas de la estructura solamente y "class" para el resto de elementos. Crea las mínimas clases posibles, intentando reutilizar sus propiedades siempre que puedas.
  • Sólo se podrá utilizar la etiqueta <br/> dentro de un párrafo para realizar un salto de línea, nunca para separar el contenido de los elementos de la página.
  • Las líneas grises se definirán mediante propiedades "border" y no etiquetas <hr>.

Capa Cabecera

  • Nombre del portal. Puedes incluir imágenes

Capa Menú

  • Diseñarlo mediante etiquetas <ul> y <li>.
  • En los diseños Monitor y Tablet aparecerán los elementos del menú en horizontal.
  • En el diseño Móvil aparecerán los elementos del menú en vertical ocupando todo el ancho de la capa.
  • Es opcional incluir submenús, el icono del submenú y utilizar Javascript para añadir efectos.
  • Puedes tomar como referencia el siguiente ejemplo de menú, pero utiliza tus opciones y colores propios.

Ejercicios CSS3 Menú responsive

​Capa Artículo

  • ​Incluir al menos una imagen que ocupe el 100% de ancho de la capa.
  • Incluir texto suficiente crear títulos y subtítulos que se enumeren automáticamente. Personalizar el formato del texto. Permitir que el texto sea editable.
  • Incluir un ejemplo de efecto de animación que se pueda realizar con CSS 3 (pero sin Javascript ni ninguna otra librería).

Capa Columna

  • Incluir un formulario para suscribirse a las novedades de la página que incluya los siguientes campos: "Nombre", "Email", "Blog personal" y "Fecha nacimiento". Marca los campos "Nombre" e "Email" como requeridos. Puedes inspirarte en el siguiente formato.

Ejercicios CSS3 - Formularioç

Capa Pie

  • ​Incluir una columna a la izquierda con los datos de contacto y otra a la derecha con los iconos de las redes sociales más utilizadas (no utilizar tablas). Sólo en el diseño Móvil aparecerán una debajo de otra.
  • Insertar debajo de las dos columnas un mapa con un ancho del 100% del contenido con la dirección de contacto (Ejemplo). Configurar las medidas del iframe mediante una clase, ya que utilizar <iframe width="100%"...> da errores de validación.

Licencia Creative Commons

Este artículo publicado en TicArte pertenece a Rafa Morales y está protegido bajo una Licencia Creative Commons.

Tags: 
Ir arriba