Lecciones impartidas en clase (curso 2022/23)

Introducción

Esta lección contiene un índice de las lecciones que estoy impartiendo en clase durante la primera mitad del curso 2022/23, así como los ejercicios que han 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.

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 2021/22.

Listados de etiquetas HTML y propiedades CSS

Quincena Q01: del 12/09/22 al 25/09/22

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.

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 (64 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 (64 bits)
  3. Leed la lección Instalación en Windows.

    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

  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 la interfaz 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.

  9. 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.

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 Git for windows 2.37.3 (31/08/22, 64 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.

Quincena Q02: del 26/09/22 al 09/10/22

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, las etiquetas o marcas.

  2. Leed la lección HTML Página básica.

    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.

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

    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.

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

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

  5. 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, 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.

  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 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)
  5. Leed los apartados de la lección CSS Propiedades de Texto: letter-spacing y word-spacing,