Lecciones impartidas en clase (curso 2019/20)

Introducción

Esta lección contiene un índice de las lecciones que estoy impartiendo en clase durante el curso 2019/20, así como los ejercicios que están realizado los alumnos.

Para elaborar este índice utilizo como base las guías de estudio que ofrezco a mis alumnos de la modalidad semipresencial en la plataforma Moodle de la Conselleria de Educación. El trabajo propuesto a estos alumnos es el mismo que siguen en clase mis alumnos de la modalidad presencial, aunque la distribución temporal no sea la misma.

La información se ofrece distribuida en quincenas, ya que es así como está organizada la modalidad semipresencial.

También se pueden consultar las lecciones impartidas en el pasado curso 2018/19.

Listados de etiquetas HTML y propiedades CSS

Quincena Q01: del 09/09/19 al 22/09/19

Presentación

  1. Leed la página Información general del curso, en la que se comentan los aspectos generales del curso: contenidos, materiales, evaluación, etc. Las dudas que os surjan al leerla las podéis plantear en el Foro General.
  2. Leed la página Presentación de los módulos LMSGI e IAW, en la que se comenta cómo está estructurado el ciclo ASIR y cómo se cubre en el ciclo la parte de desarrollo web en los módulos LMSGI (1º curso) e IAW (2º curso).
  3. Leed la página Apuntes del módulo LMSGI, en la que se comenta cómo están organizados los apuntes que se van a utilizar en el módulo LMSGI.

La primera parte del curso estará dedicada a la creación de páginas web (HTML 5 y CSS 2/3). Los apuntes y ejercicios están disponibles en la web http://www.mclibre.org/consultar/htmlcss.

La página principal de los apuntes da acceso a todas las lecciones. En los apuntes hay mucho más material del que se puede abordar en este curso, pero ese material lo podéis utilizar en el futuro como material de referencia. A lo largo del curso iré modificando los apuntes, actualizando, corrigiendo o ampliando diferentes secciones.

Para conocer la función y sintaxis de las etiquetas y propiedades, podréis leer lecciones explicativas.

Para poner en práctica las etiquetas y propiedades, iréis haciendo ejercicios que consisten básicamente en reproducir páginas web desde cero.

Para practicar el reconocimiento de etiquetas y propiedades, he preparado unos ejercicios tipo test. Estos tests se generan de forma aleatoria y podéis repetirlos tantas veces como veáis necesario.

Cada quincena os pondré aquí enlaces a las lecciones que tenéis que leer y a las actividades que tenéis que realizar.

Intento incluir en los apuntes numerosas capturas de pantalla del uso de las diferentes aplicaciones, pero debido al ritmo acelerado de publicación de nuevas versiones, me resulta imposible mantener toda la información al día. Espero que las capturas que se muestran os permitan seguir las explicaciones.

Las lecciones de esta quincena son lecciones de introducción. En los exámenes no se preguntará sobre estas lecciones.

Esta quincena os pido instalar varios programas. Si vuestro Windows es de 64 bits, instalad las versiones de 64 bits. Si vuestro Windows es de 32 bits, instalad las versiones de 32 bits.

Firefox

Aunque se puede seguir este curso con Google Chrome o Edge (y en algunos casos será necesario utilizarlos), el navegador que recomiendo es Firefox.

  1. Leed la lección Instalación de Firefox.
  2. Descargad Firefox (preferentemente, la versión de 64 bits): Firefox (versión 64 bits, recomendada) - Firefox (versión 32 bits)
  3. Instalad Firefox.
  4. Leed la lección Configuración básica de Firefox.

    Esta lección es para que conozcáis las opciones básicas de configuración. En principio no es necesario cambiar nada, pero yo aconsejo cambiar un par de opciones en la sección Avanzado. También se explica el funcionamiento del zoom en Firefox.

  5. Leed la lección Configuración avanzada de Firefox.

    Esta lección es para que conozcáis cómo acceder a las opciones avanzadas de configuración. Sería interesante que probárais a cambiar el zoom máximo. Más adelante incluiré otros apartados a medida que los necesitemos.

  6. Leed la lección Complementos de Firefox.

    Uno de los puntos fuertes de Firefox es la cantidad de complementos que amplian sus capacidades. En esta lección se explica cómo se instalan las extensiones y se comenta alguna extensión con un poco más de detalle.

  7. Instalad la extensión Colorzilla y comprobad su funcionamiento.
  8. Leed la lección Desarrollador web.

    Este curso voy a intentar utilizar las herramientas de desarrollador web. Empezaremos utilizando el selector de color. Más adelante incluiré otros apartados a medida que los necesitemos.

Chrome

Aunque el navegador que recomiendo es Firefox, si utilizáis Chrome es conveniente que tengáis instalada la extensión Colorzilla.

  1. Leed la lección Extensiones de Chrome.

    Chrome dispone de miles de extensiones que amplian sus capacidades. En esta lección se explica cómo se instalan las extensiones y se comenta alguna extensión con un poco más de detalle.

  2. Instalad la extensión Colorzilla y comprobad su funcionamiento.

Visual Studio Code y Git

Durante la instalación de Git, el instalador espera que esté instalado Visual Studio Code y cuando se ejecuta Visual Studio Code espera que esté Git instalado. Para resolver esta situación, os aconsejo:

  1. instalad primero Visual Studio Code sin iniciarlo (como se explica más adelante), pero sin iniciarlo.
  2. instalad después Git (como se explica más adelante)
  3. iniciad después Visual Studio Code y configuradlo (como se explica más adelante)

Visual Studio Code

Este curso vamos a utilizar Visual Studio Code (VSC) como editor para HTML/CSS y para Python en la segunda parte del curso (y para PHP el curso que viene en el módulo IAW). A lo largo del curso iré completando y ampliando estas lecciones dedicadas a Visual Studio Code

  1. Leed la lección Introducción.
  2. Descargad Visual Studio code (preferentemente, la versión de 64 bits): Visual Studio Code (64 bits, recomendado) - Visual Studio Code (32 bits)
  3. Leed la lección Instalación.

    En esta lección se explica cómo conseguir e instalar VSC.

  4. Instalad Visual Studio Code.
  5. Leed la lección Personalización.

    En esta lección os explico cómo están organizadas las posibilidades de personalización de VSC. Comprobad que el interface funciona como se explica en ella, pero no modifiquéis nada todavía.

  6. Leed la lección Configuración recomendada para HTML/CSS.

    En esta lección os detallo la configuración de VSC que quiero que utilicéis.

  7. Configurad Visual Studio Code de acuerdo con la lección Configuración recomendada para HTML/CSS.
  8. Leed la lección Uso.

    En esta lección iré añadiendo explicaciones del manejo de Visual Studio Code a medida que avancemos en su uso.

Git

Git es una herramienta de control de versiones que utilizaremos durante el curso (aunque no entrará en el examen) mediante el editor Visual Studio Code.

  1. Leed la lección Introducción.
  2. Descargad (preferentemente, la versión de 64 bits): Git for windows 2.23 (64 bits, recomendado) - Git for windows 2.23 (32 bits)
  3. Instalad Git for windows.
  4. Leed la lección Instalación.

    En esta lección se explica cómo conseguir e instalar Git for windows.

Historia de la World Wide Web

Estas lecciones son una larga introducción a la web. Tened en cuenta que no será necesario aprenderlas de cara el examen, pero son importantes porque ayudan a entender cómo y por qué la web es como es desde un punto de vista técnico. A lo largo del curso, a medida que vayáis aprendiendo a hacer páginas web y estéis más familiarizados con el HTML y el CSS, será interesante releer estos mismos temas para entenderlos mejor.

  1. Leed la lección Resumen

    Esta lección es una breve historia de la web, desde 1991 hasta la actualidad, para que tengáis una idea de conjunto.

  2. Leed la lección Normas y recomendaciones

    Esta lección es también una historia de la web, pero mucho más detallada y organizada por temas, con enlaces a las normas y recomendaciones.

  3. Leed la lección Los navegadores

    Esta lección habla sobre los navegadores más importantes y sobre el uso que tienen, aunque en este curso no vamos a entrar apenas en las diferencias entre navegadores, que por otra parte son cada vez menos importantes.

  4. Leed la lección Sistemas operativos y pantallas

    Esta lección habla sobre los sistemas operativos y los tipos de pantallas más utilizadas. Las gráficas nos indican la creciente importancia de los dispositivos móviles y las características de las pantallas, que deberíamos tener en cuenta al diseñar las páginas web.

  5. Leed la lección Cuadros cronológicos

    Esta lección contiene enlaces a muchas normas y recomendaciones, organizadas cronológicamente y por temas. En este curso no es necesario consultar las normas originales.

Quincena Q02: del 23/09/19 al 06/10/19

Esta quincena os voy a pedir que leáis bastantes lecciones, para conocer las primeras etiquetas HTML y propiedades CSS. Aunque todavía no os pido hacer ninguna página web, os propongo unos tests que podéis repetir hasta familiarizaros con estas etiquetas y propiedades.

Aunque en cada lección de los apuntes se describan todas las etiquetas HTML o propiedades CSS relacionadas con el tema objeto de cada lección, en los ejercicios y exámenes aparecerán solamente una parte de ellas. Cada quincena os enlazaré una lista con las "nuevas" etiquetas y propiedades de esa quincena y otra lista con las acumuladas hasta entonces, para que sepáis cuáles debéis conocer. De todas formas, os recomiendo e invito a que leáis toda la información contenida en cada lección.

Listados de etiquetas HTML y propiedades CSS

Introducción al HTML y CSS 2 / 3

  1. Leed la lección HTML Qué es una página web.

    En esta lección se presentan los elementos básicos de una página web HTML. El apartado "Página web básica HTML" incluye una plantilla de página web que deberéis utilizar al empezar una página desde cero. En el apartado "Versión de HTML" se enlaza a una explicación sobre la diferencia entre tipos MIME de HTML y XHTML que probablemente os resulte difícil para vuestros conocimientos actuales, pero merecerá la pena reelerla más adelante.

  2. Leed la lección HTML Sintaxis del HTML.

    En esta lección se describen las características principales de la sintaxis HTML. El HTML tiene cierta flexibilidad en la sintaxis. En los ejemplos de esa lección, la primera opción de cada ejemplo suele ser la sintaxis aconsejada en estos apuntes. Tendréis que prestar atención para seguir la sintaxis sin errores, aunque Visual Studio Code os indicará bastante errores. En los exámenes no penalizaré los errores de sintaxis que no afecten al resultado visual final, pero os aconsejo que intentéis cometer el menor número de errores.

  3. Leed la lección HTML Categorías de etiquetas HTML.

    En esta lección se comentan las categorías de etiquetas HTML.

  4. Leed la lección CSS Qué es una hoja de estilo.

    En esta lección se presentan los elementos básicos de una hoja de estilo CSS 2 / 3.

Etiquetas HTML y propiedades CSS

Para poder hacer páginas web con hojas de estilo es necesario conocer las etiquetas HTML y las propiedades CSS: cómo se llaman, para qué sirven, qué valores pueden tomar, etc. A lo largo del curso iremos viendo grupos de etiquetas y propiedades relacionados. Las listas completas se encuentran en las lecciones:

  1. Lista de etiquetas HTML
  2. Lista de propiedades CSS estables (se incluyen casi todas las propiedades de CSS 2.1 y algunas de CSS 3)

No es imprescindible aprenderse las etiquetas y propiedades de memoria, pero como estaremos utilizándolas continuamente, al final os sabréis la mayoría. En el examen tendréis las listas a vuestra disposición y podréis llevarlas en papel por si os falla la memoria, pero lógicamente si perdéis mucho tiempo buscando, no os dará tiempo de terminar el examen.

Primeras etiquetas HTML

  1. Leed los apartados de la lección HTML Raíz y Metadatos, que describen brevemente las etiquetas generales que se repiten en casi todas las páginas web preámbulo !DOCTYPE, elemento raíz <html>, cabecera <head>, título <title>, enlace <link>, meta <meta> y estilo <style>
  2. Leed el apartado de la lección HTML Secciones (aunque sea brevísimo): cuerpo <body>
  3. Leed los apartados de la lección HTML Bloques: párrafo <p>, separador <hr>, preformateado <pre> y bloque de cita <blockquote>.
  4. Leed los apartados de la lección HTML Secciones: títulos <h1> a <h6> y dirección <address>.
  5. Leed la lección Divisiones <div>
  6. Haced el test HTML Etiquetas de bloque (1)

Unidades de tamaño y códigos de colores CSS

  1. Leed la lección CSS Unidades de distancias y tamaños.

    Las unidades que utilizaremos durante el curso son los porcentajes (%), rem y píxeles (px).

  2. Leed la lección CSS Colores.

    En este curso no es necesario ser capaz de escribir el código de color RGB o HSL de cabeza, pero sí es conveniente que sepáis cómo se interpretan esos códigos. Tradicionalmente se ha utilizado más el código RGB, pero seguramente el uso de HSL aumentará en el futuro. En los ejercicios usaremos el formato HSL.

  3. [opcional] Haced el test Colores RGB

    Este test es opcional porque no es necesario conocerse de memoria los códigos RGB, pero podéis practicar vuestra agudeza visual.

Fuente y texto

  1. Leed los apartado de la lección CSS Propiedades de Fuente: font-family, font-size, font-weight y line-height.
  2. Leed los apartados de la la lección CSS Propiedades de Texto: color, text-align, text-decoration, text-indent, text-transform y text-shadow.
  3. Haced el test CSS Fuente y texto (1)
  4. Haced el test CSS Fuente y texto (2)

LMSGI Quincena Q03: del 07/10/19 al 20/10/19

Esta quincena empezamos a hacer páginas web. Al hacer los primeros ejercicios, es normal que tengáis que mirar la ayuda proporcionada (la página de comentarios) o incluso la solución (es decir, el código fuente de la página web y la hoja de estilo), pero se trata que que a medida que vayáis haciendo ejercicios, cada vez sea menos necesario.

Listados de etiquetas HTML y propiedades CSS

Navegadores

Para saber los códigos de los colores que se utilizan en una página, os recomiendo que utilicéis la extensión Colorzilla, disponible para Firefox y Chrome.

  1. Leed la lección Complementos de Firefox

    En esta lección se comentan algunas extensiones útiles para los que uséis Firefox, entre ellas Colorzilla. No hace falta que instaléis todavía el resto de extensiones que se comentan en esta página.

    Colorzilla tiene la ventaja de que permite obtener el código de los colores en formato HSL, pero tiene el inconveniente de que no permite obtener colores de imágenes.

  2. Leed el apartado Selector de color de la lección Herramientas para Desarrollador Web de Firefox.

    El selector de color es una alternativa a ColorZilla en Firefox que funciona también en imágenes, aunque tiene el inconveniente de que obtiene el color únicamente en formato RGB.

  3. Leed la lección Extensiones de Chrome

    En esta lección se comentan algunas extensiones útiles para los que uséis Chrome, entre ellas Colorzilla.

Cómo realizar los ejercicios

  1. Leed la lección Cómo realizar los ejercicios (General).

    En esta lección se comenta cómo realizar los ejercicios: material proporcionado, descarga del material, programas utilizados, escritura de la página y de la hoja de estilo, etc.

  2. Leed la lección Cómo realizar los ejercicios (Texto, imágenes y bordes).

    En esta lección se comentan estrategias para identificar elementos y propiedades. No es necesario leer los apartados dedicados a imágenes.

Visual Studio Code

  1. He tenido que modificar la configuración recomendada de Visual Studio Code, por lo que os pido que reviséis la lección Configuración recomendada de Visual Studio Code.
  2. Leed la lección Validación de HTML y CSS en VSCode., que explica con un poco más de profundidad el funcionamiento de la extensión HTMLHint y de la validación de hojas de estilo nativa de Visual Studio Code.
  3. Haced los ejercicios Visual Studio Code de la sección Puesta en marcha.

    Son ejercicios para comprobar que habéis configurado correctamente Visual Studio Code.

Etiquetas de bloques

  1. Haced el ejercicio The Jargon File (corto) de la sección Bloques.

    En este ejercicio aparecen los caracteres especiales &amp; (&), &lt; (<) y &gt; (>) que se explican en el apartado Caracteres especiales de la lección Entidades de carácter. En la quincena próxima veremos con más detalle qué son las entidades de carácter y las entidades numéricas, pero esta quincena creo que es suficiente que leáis el apartado de Caracteres especiales.

Etiquetas de texto en línea / Líneas horizontales

Las etiquetas de texto en línea que más vamos a utilizar son las etiquetas <br>, <strong>, <em>, <span>, pero ocasionalmente en algún ejercicio (no en los exámenes) aparecerán las etiquetas <abbr>, <kbd>, <q>, <sub>, <sup> y <time>.

  1. Leed la lección HTML Etiquetas de texto en línea.
  2. Leed la lección HTML Otras etiquetas de texto en línea. Leed la lección simplemente por conocer la existencia de esas etiquetas, pero en principio no las utilizaremos en los ejercicios.
  3. Leed la lección CSS Líneas horizontales.
  4. [opcional] Podéis hacer el test HTML Etiquetas en línea (1).

    Test elemental para repasar las etiquetas en línea <abbr>, <bdo>, <em>, <kbd>, <q>, <small>, <span>, <strong>, <sub> y <sup>. En cada pregunta sólo aparece una etiqueta.

  5. [opcional] Podéis hacer el test HTML Etiquetas en línea (2).

    Test elemental para repasar las etiquetas en línea <abbr>, <b>, <bdo>, <cite>, <code>, <data>, <del>, <dfn>, <em>, <i>, <ins>, <kbd>, <mark>, <q>, <s>, <samp>, <small>, <span>, <strong>, <sub>, <sup>, <time>, <u> y <var>. En cada pregunta sólo aparece una etiqueta.

  6. Haced el ejercicio Currículum Vitae (corto) de la sección Texto.
  7. Haced el ejercicio Contra Comic Sans de la sección Texto.

    En este ejercicio aparece la etiqueta <time>.

Clases y selectores

  1. Leed la lección HTML Clases.

    El mecanismo de las clases es fundamental, porque permite que una misma etiqueta pueda tener diferentes estilos.

  2. Leed la lección CSS Selectores.

    En los ejercicios iremos utilizando los tres primeros apartados (selectores de tipo, selectores universales y selectores de descendientes). Los selectores de hijos, adyacentes o de atributo no irán para examen.

  3. Haced el ejercicio Greguerías 1 de la sección Clases.

Quincena Q04: del 21/10/19 al 03/11/19

Listados de etiquetas HTML y propiedades CSS

Elementos interactivos

  1. Leed la lección HTML: Elementos interactivos

    HTML 5.1 introdujo las etiquetas <details> y <summary>, que permiten crear fácilmente un elemento desplegable y que utilizaremos en los ejercicios.

    En esta lección también se comenta la etiqueta <dialog>, introducida en HTML 5.2 y que no utilizaremos en los ejercicios.

Entidades de carácter

  1. Leed la lección HTML: UTF-8.

    Esta lección es una brevísima introducción a Unicode, el juego de caracteres universal. Recordad que el formato recomendado y que estamos utilizando para los ficheros .html y .css es UTF-8, uno de los formatos de Unicode.

  2. Leed la lección HTML: Entidades de carácter y entidades numéricas.

    En esta lección se comentan las entidades de carácter, la forma en la que se pueden incluir en una página web caracteres especiales, y las entidades numéricas, una generalización de las entidades de carácter que permiten incluir en una página web cualquier carácter Unicode.

    Al final de esta lección se encuentra la lista de entidades de carácter de HTML 4. En una página aparte se encuentra la lista de entidades de carácter de HTML 5. Por supuesto no es necesario aprenderse la lista completa ;-) las únicas entidades de carácter que sí que deben conocerse son las de los caracteres especiales < (&lt;) > (&gt;) y & (&amp;).

  3. Hojead las lecciones HTML: Símbolos y Dibujos.

    Estas páginas simplemente muestran la gran cantidad de caracteres gráficos que hay en Unicode. No hace falta aprenderse ninguno, pero pueden resultaros útiles si buscáis un dibujo en concreto.

    Tened en cuenta que si véis estas páginas en Windows 7 es mejor verlas en Firefox porque utiliza Twemoji. En windows 10 da lo mismo porque todos los navegadores usan la fuente de Windows, Segoe.

  4. Leed la lección HTML: Secuencias Unicode.

    Esta lección trata sobre las secuencias Unicode, es decir, cómo escribir varios caracteres Unicode consecutivos para conseguir nuevos emojis o variaciones de otros emojis.

  5. Hojead las lecciones HTML: Banderas, Géneros, Colores de piel, Otros y Problemáticas

    Estas páginas simplemente muestran las secuencias Unicode organizadas más o menos por temas.

    Tened en cuenta que si véis estas páginas en Windows 7 es mejor verlas en Firefox porque utiliza Twemoji. En windows 10 da lo mismo porque todos los navegadores usan la fuente de Windows, Segoe.

  6. Haced el ejercicio Películas en emojis de la sección Clases.

Modelo de caja

  1. Leed la lección CSS: Modelo de caja.

    En esta lección, lo más importante es la imagen del modelo de caja del primer apartado.

    En esta lección se comenta la propiedad box-sizing, que permite utilizar un modelo de caja alternativo más cómodo en diseños que cubran toda la página y que utilizaremos más adelante en algún ejercicio.

    La propiedad display que se comenta en el último apartado no la vamos a usar prácticamente nada. Me gustaría ampliar la explicación de ese apartado, pero no sé cuándo podré hacerlo.

  2. Leed la lección CSS: Bordes.
  3. Leed la lección CSS: Márgenes (margin, padding)
  4. Haced el test CSS Modelo de caja (1).

    Test elemental para repasar las propiedades margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left.

  5. Haced el test CSS Modelo de caja (2).

    Test elemental para repasar las propiedades margin y padding (con varios valores).

  6. Haced el test CSS Modelo de caja (3).

    Test elemental para repasar las propiedades border-color, border-width y border-style (con varios valores). Esta forma de definir los bordes es más complicada que mediante las propiedades individuales border-top, etc., y se utiliza mucho menos que la otra, pero os ayudará a acostumbraros al uso de varios valores en las propiedades.

  7. Haced el ejercicio Refranes sobre educación de la sección Bordes y márgenes.
  8. Haced el ejercicio Citas de Edsger Dijkstra de la sección Bordes y márgenes.

LMSGI Quincena Q05: del 04/11/19 al 17/11/19

Nueva versión de Visual Studio Code

El 7 de noviembre se ha publicado Visual Studio Code 1.40. Como siempre, la actualización es automática. El cambio más importante en esta versión es interno, pues ha pasado de estar basado en Electron 4.0 a estar basado en Electron 6.0. La próxima versión se publicará alrededor del 18 de diciembre.

Fuentes web

  1. Leed la lección CSS: Fuentes web.
  2. Haced el ejercicio Citas de Virgilio (Fuentes web en Google Fonts) de la sección Fuentes web.
  3. Haced el ejercicio Citas de Virgilio (Fuentes web locales) de la sección Fuentes web.

    No importa si primero hacéis este ejercicio o el anterior, pero si hacéis primero el de fuentes locales podéis ver el nombre de las fuentes en los ficheros de fuentes incluidos en la plantilla. Cuando hagáis el segundo ejercicio, no hace falta repetirlo todo. Haced el segundo a partir del primero, cambiando únicamente la manera de enlazar las fuentes (de locales a externas o viceversa).

Imágenes de mapa de bit

  1. Leed la lección HTML: Imágenes.
  2. Leed el apartado "Posicionamiento flotante de imágenes" de la lección CSS: Posicionamiento flotante.

    En esta lección se trata el posicionamiento flotante en general, pero esta quincena sólo hace falta leer el apartado "Posicionamiento flotante de imágenes" para conseguir imágenes flotantes a izquierda y derecha (se explican también las imágenes centradas, aunque no lleven posicionamiento flotante). Más adelante veremos el posicionamiento flotante en general y os deberéis leer la lección completa.

  3. [Visual Studio Code]
  4. Leed los apartados dedicados a las imágenes de la lección Cómo realizar los ejercicios (Texto, imágenes y bordes).
  5. Haced el ejercicio Florencia de la sección Imágenes de mapa de bits.
  6. [opcional] Haced el ejercicio Perros de la sección Imágenes de mapa de bits.

    Si miráis el código fuente del ejercicio veréis que se utilizan las etiquetas en línea <i> y <time>, pero lo podéis hacer con las etiquetas <em> y <span>.

  7. Haced el ejercicio Emoticonos de la sección Imágenes vectoriales.

    Este ejercicio contiene tanto entidades numéricas como imágenes, vectorial y de mapa de bits.

LMSGI Quincena Q06: del 18/11/19 al 01/12/19

Simulacro de examen

Podéis entregar la tarea voluntaria Simulacro de examen hasta el domingo 5 de enero de 2020 a las 23:55.

Secciones

  1. Leed la lección HTML: Secciones
  2. Leed el apartado dedicado al elemento <main> en la lección HTML: Bloques
  3. [opcional] Leed la lección HTML: Esquema (outline)

    La idea de esquema se incluyó en HTML 5 y significaba un cambio total en el uso de los títulos <h1> ... <h6>, pero como los navegadores no lo han implementado, no vamos a utilizarlo. De todas formas, podéis leer la lección para conocer el tema.

  4. Haced el ejercicio Necrológicas 2014 de la sección Secciones.
  5. Haced el ejercicio Citas de Chesterton de la sección Secciones.
  6. [opcional] Haced el ejercicio Escritores españoles de la sección Secciones.

Enlaces

  1. Leed la lección HTML: Enlaces
  2. Leed la lección CSS: Pseudo-clases de enlace :link y :visited

    En la lección de pseudo-clases y pseudo-elementos, solamente debéis leer el apartado :link y :visited, que se utilizan en un ejercicio.

  3. Haced el ejercicio Cuatro museos de Londres de la sección Enlaces.
  4. Haced el ejercicio Citas de G. K. Chesterton" de la sección Enlaces.

Fondos

  1. Leed la lección CSS: Fondos.

    En esta lección están incluidas las propiedades CSS 3 que, aunque no estén formalmente aprobadas, funcionan en los navegadores. Las dos últimas propiedades explicadas en la lección (background-clip y background-origin) no las utilizaremos.

  2. [opcional] Aplicaciones: Generadores de fondos

    Para generar fondos se puede cualquier editor gráfico (de dibujo o de tratamiento de imágenes). En esta página os he puesto enlaces a varios sitios web por si queréis probarlos. Los fondos del ejercicio Sonetos de amor están creados con PatternCooler, uno de los sitios enlazados.

  3. Haced el ejercicio Sonetos de amor de Lope de Vega de la sección Fondos.

LMSGI Quincena Q07: del 02/12/19 al 15/12/19

[opcional] Accesibilidad (contraste de colores)

  1. Leed la lección CSS: Accesibilidad

Consultas de medios (media queries)

  1. Leed la lección CSS: Consultas de medios (media queries)
  2. Leed la lección Firefox Herramientas para Desarrollador Web (esta lección está en los apuntes de Informática general)
  3. Haced el ejercicio Don Quijote Capítulo primero de la sección Media queries.

    Tened en cuenta que la página muestra cuatro combinaciones distintas de colores y otras propiedades, en función del ancho de la ventana. Leed la página de comentarios al ejercicio para ver los valores exactos.

    Podéis elegir otras combinaciones de colores distintas a las del ejercicio de muestra, pero comprobad antes mediante el selector de colores de la lección Accesibilidad que el contraste de colores que elegís es por lo menos de 4.5.

  4. [opcional] Haced el ejercicio Efemérides del 14 de diciembre de la sección Media queries.

Posicionamiento flotante

  1. Leed la lección CSS: Tamaño,

    Las propiedades min-width, min-height, max-width y max-height no las vamos a utilizar.

  2. Leed la lección CSS: Posicionamiento
  3. Leed la lección CSS: Posicionamiento flotante

    Ya leísteis la mayor parte de esta lección cuando vimos las imágenes flotantes. Esta semana la completamos con los dos últimos apartados.

  4. Leed la lección CSS: Pseudo-elementos :first-letter y :first-line.

    De esta lección también hemos visto las pseudo-clases relacionadas con los enlaces. Esta semana vemos los dos pseudo-elementos :first-letter y :first-line.

  5. Haced el ejercicio Citas de Oscar Wilde de la sección Posicionamiento flotante.
  6. [opcional] Haced el ejercicio Efemérides del 14 de diciembre de la sección Posicionamiento flotante.

Posicionamiento absoluto (esquema de posicionamiento absoluto y esquema de posicionamiento fijo)

  1. Leed la lección CSS: Posicionamiento absoluto

    Los ejercicios propuestos utilizan solamente posicionamiento flotante y fijo (para este, los ejercicios son opcionales). Los posicionamientos estático y relativo, aunque están contados en la teoría, no los vamos a utilizar en la práctica.

  2. Haced el ejercicio Coordenadas para posicionamiento de la sección Posicionamiento absoluto.
  3. Haced el ejercicio Las leyes de Murphy de la sección Posicionamiento absoluto.
  4. Haced el ejercicio Software libre 1 de la sección Posicionamiento absoluto.
  5. [opcional] Haced el ejercicio Software libre 2 de la sección Posicionamiento fijo.
  6. [opcional] Haced el ejercicio Software libre 3 de la sección Posicionamiento fijo.

    Aunque sean bastantes ejercicios, los tres últimos comparten gran parte de la hoja de estilo que podéis copiar de un ejercicio a otro.

[opcional] Esquemas de colores

Empecé a preparar una lección de introducción a la generación de esquemas de colores, es decir, combinaciones de colores para emplear en las páginas web. No he preparado ejercicios sobre este tema y a la lección le faltan muchos aspectos a tratar, pero creo que puede resultaros interesante. No os costará mucho leerla, porque es bastante corta.

  1. Leed la lección CSS: Esquemas de colores