3. Añadir estilo a un sitio web

En este curso añadirás hojas de estilos a un sitio web básico (Crear un sitio web (básico)). Aprenderás a:

1. Añadir estilo a tu sitio web

2. Separando Contenido y Diseño

3. Comprender los conceptos básicos de diseños más avanzados

Requisitos Previos

Se supone que tienes unos conocimientos básicos de CSS. Sino estúdiate este curso de Arkaitz Garro . Es muy bueno, necesitarías unas 30h de dedicación y hago continuas referencias aquí a ese curso.

Tiene otro más avanzado (con funcionalidades propias de CSS3) pero como requisitio previo para este curso te sirve un conocimiento básico de CSS

En este curso utilizo como referencia de las propiedades MDN CSS .

Esfuerzo Necesario

El curso está organizado en 8 sesiones de clase. Cada clase (sesión) implica una dedicación de entre 2 y 4 horas.

La dedicación depende del conocimiento previo, motivación y capacidad de aprendizaje del estudiante para esa sesión en concreto.

3.1. El Lenguaje CSS

Repasa el Lenguaje CSS

1. Contenido (HTML) vs Presentación (CSS). En recursos web separados (idealmente)

2. En archivos separados (salvo razones concretas)

3. Versiones CSS (CSS 2.2 -> CSS3 -> CSS a secas)

4. Entender sintaxis de las especificaciones

   • Declaración CSS:

   

   • En bloques (separados por ;):

   

   • Que es aplican a un selector (o varios) formando una regla CSS:

   

T03-A01. Preparar entorno de desarrollo

1. ¿Qué editor de programación vas a usar?

2. ¿Qué versión de CSS vas a utilizar?

3. ¿Tienes las especificaciones a mano?

4. Crea una hoja de estilos en tu entorno de desarrollo para probarlo

5. Añade un par de reglas básicas (por ejemplo para los elementos P y H1) a tu hoja de estilos

6. Vínculalo a una página web de ejemplo sencilla

7. Modifica tu hoja de estilos, recarga la página y comprueba que ya está todo listo

3.2. Conceptos Importantes

1. Sintaxis reglas CSS

2. Agrupación y Herencia

3. Selectores

4. Unidades de Medida (absolutas y relativas)

5. Colores

T03-A01. Repasar y conocer CSS

Entender ejemplos de código CSS y consultar especificaciones.

3.3. Texto y Enlaces

1. Tipografía ( más complejo de lo que parece)

   1. Color (color)

   2. Tipo de letra:

      1. Familia de fuentes: font-family

      2. Tamaño: font-size

      3. Tipo: font-weight

      4. Estilo: font-style

      5. y más (font)

2. Carga directa o importada

3. Texto

   1. Alineación Horizontal: text-align

   2. Altura de línea de caracteres: line-height

   3. Decoración: text-decoration

   4. Transformaciones: text-transform

   5. Alineación Vertical: vertical-align

   6. Indentación: text-indent

4. Enlaces :

   1. Elemento tipo a que hereda propiedades de texto

   2. Cuidado en modificar su comportamiento visual (las expectativas del usuario)

   3. Como mucho algún tipo de resaltado para facilitar su búsqueda

T03-A03. Añade tu hoja de estilos

Si no te sientes preparado con CSS, realiza primero los ejercicios del curso de Arkaitz : Ejercicios 1, 2 y 7

A partir de tu sitio web básico (Crear un sitio web (básico)), en HTML bien estructurado, añádele tu hoja de estilos:

1. Diseña el comportamiento general en body (y otras etiquetas generales si quieres)

2. Diseña los títulos H1, H2 y H3, para definir una jerarquía entre ellos (que se distingan uno del otro). Usa tamaño, indentación y espacios antes y después

3. Diseña el estilo de los párrafos definiendo tres tipos:

   1. normal. Como estilo de referencia.

   2. resaltar. Para definir un estilo de párrafo que resalte el contenido

   3. código. Con un tipo de letra especial y resaltando como si fuera código

4. Los enlaces (sin usar seudo clases). Para que se distingan un poco en el texto, sin modificar el comportamiento estándar

5. Busca fuentes externas y añadelas en tu hoja de estilos.

3.4. Listas y Tablas

1. Listas:

   1. Tanto para listas ordenadas (ol) como viñetas (ul)

   2. Muy útil en la creación (y gestión) de menús de navegación

   3. list-style-type

   4. list-style-position

   5. list-style-image

2. Tablas

   1. Útiles si son sencillas, mala idea para maquetar (mejor contenedores)

   2. border-collapse

   3. border-spacing

   4. empty-cells

   5. caption-side

T03-A04. Añadir estilos a listas y tablas

Si no te sientes preparado con CSS, realiza primero los ejercicios del curso de Arkaitz : Ejercicios 9 y 11

1. Diseña una lista que le llames especial, para que tenga un comportamiento diferente al estándar

2. Diseña una lista que le vas a llamar menu, que tenga un comportamiento especial

3. Diseña un modelo de tabla especial, modificando el comportamiento estándar

4. A medida que se hace compleja tu hoja de estilos, puedes añadir algún tipo de comentario

5. Usa las herramientas de desarrollo para modificar directamente tu diseño (y aprender del cambio)

3.5. Modelo de Caja

1. Tipos:

   1. En bloque: comportamiento div. Por ejemplo elemento p

   2. En línea: comportamiento span. Por ejemplo elemento a.

2. Propiedad display

3. Entender bien el comportamiento básico (Flujo CSS Normal: CSS_Flow_Layout )

4. Modelo de Cajas (aplica sobre todo a los tipo bloque):

   

   1. Tamaño: width x height

   2. Relleno interno: padding

   3. borde de la caja: border

   4. Relleno externo (margen): margin

   5. Cada uno con diferentes sub propiedades: top / right / bottom / left / color / style / …

   6. Usando las herramientas de desarrollo (Cliente Web (y herramientas)) se entiende mejor:

   

T03-A05. Añade estilos a listas y tablas

Si no te sientes preparado con CSS, realiza primero los ejercicios del curso de Arkaitz : Ejercicio 3, 4 y 5

Sigue avanzando en el diseño añadiendo estilos a listas y tablas:

1. Diseña una lista que le llames especial, para que tenga un comportamiento diferente al estándar

2. Diseña una lista que le vas a llamar menu, que tenga un comportamiento especial

3. Diseña un modelo de tabla especial, modificando el comportamiento estándar

4. A medida que se hace compleja tu hoja de estilos, puedes añadir algún tipo de comentario

5. Usa las herramientas de desarrollo para modificar directamente tu diseño (y aprender del cambio)

3.6. Posicionamiento Básico

1. Ancho y alto

2. Tipo de caja: display -> block | inline (y otras)

3. Posición de la caja. position -> static | relative | absolute | fixed | inherit

4. Relaciones entre elementos

5. Y alguna cosa más

T03-A06. Maquetación Web Sencilla

Si no te sientes preparado con CSS, realiza primero los ejercicios del curso de Arkaitz : Ejercicio 6 y 7

Trabaja sobre la maquetación de tu sitio web posicionando los diferentes elementos de tu diseño

3.7. Layout Básico (Presentación)

1. Diferentes estrategias, pero con algunos elementos habituales:

   1. Cabecera (header) y Pie de Página (footer)

   2. Menú

   3. Contenido

2. Puedes definir una estructura común (plantilla) para tu sitio web:

   1. Es una de las ideas detrás de los diferentes frameworks CSS

   2. Suele implicar una refactorización del sitio

   3. Mejor definir la presentación en el plan inicial

   4. Puede adaptarse a diferentes tipos de medios (ver tema CSS avanzado)

3. Se usan los conceptos de los modelos de caja, posicionamiento y flujo CSS.

4. Algunos ejemplos:

   1. Diseño a 2 columnas con cabecera y pie de página

   

   1. Diseño a 3 columnas

   

T03-A07. Prepara tu prototipo web

Preparar tu prototipo web para hacer las pruebas con tus usuarios (y seguirlo desarrollando). Ideal hacerlo en papel

3.8. Prueba tu diseño

1. Los diseños los validan los usuarios (no las modas tecnológicas)

2. Revisa las tareas de usuario para tu sitio web

3. Haz pruebas con al menos dos usuarios

T03-A08. Probar tu diseño

Haz pruebas con al menos dos usuarios, de tu diseño web. Lo ideal sería que realizaras al menos tres iteraciones para obtener un buen producto final

---