Esta lección contiene un índice de las lecciones que impartí en clase durante la primera mitad del curso 2022/23, así como los ejercicios que realizaron los alumnos.
Este índice se basa en las guías de estudio que ofrecí a mis alumnos de la modalidad semipresencial en la plataforma Moodle de la Conselleria de Educación. El trabajo propuesto a estos alumnos fue el mismo que siguieron en clase mis alumnos de la modalidad presencial, aunque la distribución temporal no fuera exactamente la misma.
La información se ofrece distribuida en quincenas, ya que es así como estaba organizada la modalidad semipresencial.
Es importante tener en cuenta que este índice enlaza a las lecciones actuales, no a las lecciones tal y como se encontraban en el curso 2022/23, y en algunos casos estas lecciones y ejercicios pueden haberse reducido o ampliado de forma significativa. Si algunos apartados no enlazan a ninguna lección, es porque por alguna razón he eliminado esa lección de los apuntes actuales.
También se pueden consultar las lecciones impartidas en el curso anterior, 2021/22 y las lecciones impartidas en el curso siguiente, 2023/24.
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.
Esta lección es una breve historia de la web, desde 1991 hasta la actualidad, para que tengáis una idea de conjunto.
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.
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.
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.
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.
Aunque se puede seguir este curso con Google Chrome o Edge (y en algunos casos será necesario utilizarlos), el navegador que recomiendo es 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.
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.
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.
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.
Aunque el navegador que recomiendo es Firefox, si utilizáis Chrome es conveniente que tengáis instalada la extensión Colorzilla.
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.
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:
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
En esta lección se explica cómo conseguir e instalar VSC en Windows. Para la instalación en sistemas operativos derivados de Debian, podéis leer la lección Instalación en LliureX
En esta lección os explico cómo están organizadas las posibilidades de personalización de VSC. Comprobad que la interfaz funciona como se explica en ella, pero no modifiquéis nada todavía.
En esta lección os detallo la configuración de VSC que quiero que utilicéis.
En esta lección iré añadiendo explicaciones del manejo de Visual Studio Code a medida que avancemos en su uso.
Son ejercicios para comprobar que habéis configurado correctamente Visual Studio Code.
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.
En esta lección se explica cómo conseguir e instalar Git for windows.
En esta lección se presentan los elementos básicos de una página web HTML, las etiquetas o marcas.
Esta lección comenta una plantilla de página web, con los elementos presentes en todas las páginas y que deberéis utilizar al empezar una página desde cero.
En esta lección se describen las características principales de la sintaxis del 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.
En esta lección se comentan las categorías de etiquetas HTML.
En esta lección se presentan los elementos básicos de una hoja de estilo CSS 2 / 3.
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:
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.
Las unidades que utilizaremos durante el curso son los porcentajes (%), rem y píxeles (px).
En este curso no es necesario ser capaz de escribir el código de color RGB, HSL o HWB 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 HWB aumentará en el futuro. En las soluciones de los ejercicios podréis ver que he utilizado el formato HWB, aunque si copíais los códigos de colores con la herramienta RecogeColor de Firefox o con Colorzilla, os puede ser más cómodo utilizar los códigos RGB o HSL que os dan esas herramientas.
Este test es opcional porque no es necesario conocerse de memoria los códigos RGB, pero podéis practicar vuestra agudeza visual.
Para saber los códigos de los colores que se utilizan en una página, podéis utilizar la extensión Colorzilla, disponible para Firefox y Chrome, o el selector de color de Firefox, a vuestro gusto. Por desgracia, estas dos herramientas no proporcionan los colores en formato HWB, para lo que habría que utilizar el convertidor de los apuntes.
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.
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.
En esta lección se comentan algunas extensiones útiles para los que uséis Chrome, entre ellas Colorzilla.
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.
En esta lección se comentan estrategias para identificar elementos y propiedades. No es necesario leer los apartados dedicados a imágenes.
En este ejercicio aparecen los caracteres especiales & (&), < (<) y > (>) 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.
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>.
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.
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.
En este ejercicio aparece la etiqueta <time>.
El mecanismo de las clases es fundamental, porque permite que una misma etiqueta pueda tener diferentes estilos.
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.
Las etiquetas <details> y <summary> permiten crear fácilmente un elemento desplegable.
En esta lección también se comenta la etiqueta <dialog>, que no utilizaremos.
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.
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 < (<) > (>) y & (&).
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. Tampoco hace falta aprenderse ninguna secuencia, pero pueden resultaros útiles si buscáis un dibujo en concreto.
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 la visualización de estos caracteres gráficos depende tanto del sistema operativo como de los navegadores. Los caracteres incluidos en las últimas versiones de Unicode tardarán en poderse utilizar y los navegadores muestran algunos caracteres de forma incorrecta.
Estas páginas simplemente muestran las secuencias Unicode organizadas más o menos por temas. Tampoco hace falta aprenderse ninguna, pero pueden resultaros útiles si buscáis un dibujo en concreto
Tened en cuenta que la visualización de estas secuencias depende tanto del sistema operativo como de los navegadores. las secuencias incluidas en las últimas versiones de Unicode tardarán en poderse utilizar y los navegadores muestran algunas secuencias de forma incorrecta.
Ambos proyectos alojan en GitHub las imágenes en formato SVG, lo que permite su descarga y reutilización. En esta lección se muestran esas imágenes y cada imagen enlaza a la imagen SVG alojada en GitHub.
Tened en cuenta que las imágenes se deben cargar antes de mostrarse y el proceso puede demorarse unos segundos. Además, la fuente Noto Emoji está en un formato que Firefox no admitirá hasta la versión 107 que se publicará el 14 de noviembre de 2022, por lo que esa página se debe ver en Chrome
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.
Esta lección comenta propiedades de bordes avanzadas que no veremos en clase.
Test elemental para repasar las propiedades margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left.
Test elemental para repasar las propiedades margin y padding (con varios valores).
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.
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).
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.
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>.
Este ejercicio contiene tanto entidades numéricas como imágenes, vectorial y de mapa de bits.
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.
Las dos últimas propiedades explicadas en la lección (background-clip y background-origin) no las utilizaremos.
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.
Las propiedades min-width, min-height, max-width y max-height no las vamos a utilizar.
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.
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.
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.
Aunque sean bastantes ejercicios, los tres últimos comparten gran parte de la hoja de estilo que podéis copiar de un ejercicio a otro.
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.
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.