Esta lección contiene un índice de las lecciones que impartí en clase durante el curso 2017/18, 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 2017/18, 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, 2016/17, y las lecciones impartidas en el curso siguiente, 2018/19.
No es necesario aprenderse de memoria estas lecciones (no se preguntará sobre ellas en los exámenes), 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, 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. Lo más importante en esta lección son las gráficas sobre usos de navegadores, aunque en este curso no vamos a entrar 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. Lo más importante en esta lección son las gráficas, que nos indican la creciente importancia de los dispositivos móviles y las características de las pantallas, que deberemos 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 imprescindible consultar las normas originales.
Aunque se puede seguir este curso con Google Chrome e Internet Explorer (y en algunos casos será necesario utilizarlos), el navegador que recomiendo es Firefox. En los exámenes no se preguntará sobre estas lecciones.
En la versión Firefox 57 (que se publicará en noviembre de 2017), Firefox va a sufrir importantes cambios. Por un lado, el aspecto visual de Firefox va a cambiar y por otro dejarán de funcionar las extensiones que no utilicen el mecanismo de WebExtensions. Como sólo faltan dos meses, he decidido dejar para entonces la actualización completa de estas lecciones (texto y capturas de pantalla).
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.
Este curso vamos a utilizar Visual Studio Code (VSC) como editor para HTML/CSS y espero que también para Python y XML y el curso que viene también para PHP 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 esta lección os explico cómo están organizadas las posibilidades de personalización de VSC.
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.
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.
En esta lección se presentan los elementos básicos de una página web HTML 5. El apartado "Página web básica HTML 5" 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.
En esta lección se describen las diferencias principales entre la sintaxis HTML y la sintaxis XHTML. Como se indica en la lección, nosotros seguiremos la sintaxis compatible con HTML y XHTML (en los ejemplos de esa lección, la primera opción de cada ejemplo suele ser la sintaxis aconsejada en estos apuntes). Como el HTML 5 permite mezclar ambas sintaxis, por lo que tendréis que prestar atención para seguir la sintaxis sin 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 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 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.
Este test es opcional porque no es necesario conocerse de memoria los códigos RGB, pero podéis practicar vuestra agudeza visual.
La propiedad compuesta font es un poco complicada de utilizar, por lo que se suelen utilizar las propiedades simples
Las últimas propiedades comentadas en esta lección (white-space, direction y unicode-bidi) se utilizan raramente
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.
Para saber los códigos de los colores, os recomiendo que utilicéis la extensión Colorzilla, disponible para Firefox y Chrome.
En esta lección se comentan algunas extensiones útiles para los que uséis Firefox, entre ellas Colorzilla. El problema es que Firefox 57, que se publicará en noviembre, va a cambiar de forma radical el uso de extensiones y va a renovar también el interfaz de Firefox. Por ese motivo no he actualizado las capturas ya que se quedarán obsoletas en un mes. Por suerte, Colorzilla ya está adaptada a WebExtensions, así que podéis instalarla tranquilamente, pero no quiero que instaléis todavía el resto de extensiones que se comentan en esta página.
En esta lección se comentan algunas extensiones útiles para los que uséis Chrome, entre ellas Colorzilla.
Leed el apartado Actualizar Visual Studio Code y actualizad Visual Studio Code.
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>.
Leed la lección simplemente por conocer la existencia de esas etiquetas, pero en principio no las utilizaremos en los ejercicios.
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 os 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.
El 3 de octubre se publicó HTML 5.1 2ª edición, que corrige detalles de HTML 5.1. Los apuntes hacen referencia ahora a esta versión.
HTML 5.1 introdujo las etiquetas <details> y <summary>, que permiten crear fácilmente un elemento desplegable.
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.
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.
Para ver la mayor cantidad de caracteres, lo mejor sería ver estas páginas con Firefox en Windows 7.
En esta lección, lo más importante es la imagen del modelo de caja del primer apartado. La propiedad display que se comenta en el segundo apartado no la vamos a usar prácticamente nada.
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 varias valores en las propiedades.
El 9 de noviembre se publicó Visual Studio Code 1.18. Esta versión incluye una novedad importante, los multi-root workspaces, es decir, la posibilidad de trabajar simultáneamente con distintos directorios, que en principio no vamos a utilizar.
El 14 de noviembre se publicó Firefox 57. Esta versión incluye novedades muy importantes:
Ambas aplicaciones se actualizan automáticamente, pero podéis forzar la actualización de VSC con el menú "Ayuda > Buscar actualizaciones" o de Firefox con el menú "Ayuda > Acerca de Firefox".
No importa si primero hacéis este ejercicio o el anterior, pero 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.
Las dos extensiones nos serán de ayuda para incluir imágenes en las páginas web en Visual Studio Code.
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.
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.
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.
He incluido en la lección 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.
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.
Con esta quincena ponemos final a la parte de HTML / CSS del módulo LMSGI. Sólo hemos podido cubrir una pequeña parte de este campo tan amplio y en permanente expansión, pero espero que os haya servido para introduciros en él y que lo aprendido os permita aprender más por vuestra cuenta.
Aunque este curso hubiera querido incluir los temas de CSS 3 Flexbox y Grid, finalmente estos temas no entrarán en el examen. Debido a la coincidencia de días de clase con festivos, en presencial he acumulado bastante retraso con respecto a vosotros y no he podido probar en el aula las explicaciones y ejercicios de esos temas. Cuando lo haga en enero añadiré esos temas en esta quincena como material optativo.
El 14 de diciembre se publicó la recomendación HTML 5.2. No incluye ninguna novedad importante que vayamos a utilizar, pero he actualizado las referencias en los apuntes, de HTML 5.1 a HTML 5.2.
El 15 de diciembre se publicó Visual Studio Code 1.19. No incluye ninguna novedad importante que vayamos a utilizar, pero cada mes los programadores mejoran y corrigen muchos aspectos del programa.
Leed las lecciones y haced los ejercicios siguientes:
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.
Leed las lecciones y haced los ejercicios siguientes:
Los ejercicios propuestos utilizan solamente posicionamiento flotante y fijo. 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.
He empezado 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.
Leed la lección: