Lecciones impartidas en clase (curso 2016/17)

Introducción

Esta lección contiene un índice de las lecciones que he impartido en clase durante el curso 2016/17, así como los ejercicios que han realizado los alumnos.

Para elaborar este índice he utilizado 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 han seguido en clase mis alumnos de la modalidad presencial, aunque la distribución temporal no haya sido la misma.

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

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

Presentación

Leed la página siguiente:

  1. Presentación de los apuntes

Historia de la World Wide Web

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.

Leed las lecciones siguientes:

  1. 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. 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. Los navegadores

    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.

  4. Sistemas operativos y pantallas

    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.

  5. Cuadros cronológicos

    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.

Firefox

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. Estas lecciones no son para aprenderlas de memoria (no se preguntará sobre ellas en los exámenes).

Leed las lecciones y haced las tareas siguientes:

  1. Instalación de Firefox.
  2. Instalad Firefox.
  3. 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.

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

  5. Complementos de Firefox.

    Uno de los puntos fuertes de Firefox es la cantidad de complementos que amplian sus capacidades.

  6. Instalad las extensiones Web Developer y Colorzilla y comprobad su funcionamiento.
  7. Desarrollador web.

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

Brackets

Estas lecciones no son para aprenderlas de memoria (no se preguntará sobre ellas en los exámenes).

Leed las lecciones y haced las tareas siguientes:

  1. Instalación y uso de Brackets.

    En esta lección se explica cómo conseguir e instalar Brackets y el interfaz del programa.

  2. Instalad Brackets.
  3. Extensiones de Brackets.

    En esta lección os explico cómo se instalan y desinstalan las extensiones de Brackets y explico con más detalle cuatro extensiones que tenéis que instalar.

  4. Instalad las extensiones Brackets Surround, Indentator, Indent softwrapped lines y White Space Sanitizer.

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

Introducción al HTML 5 y CSS 2 / 3

Leed las lecciones siguientes:

  1. Qué es una página web.

    En esta lección se presentan los elementos básicos de una página web HTML 5. La explicación sobre la diferencia entre tipos MIME de HTML y XHTML que se enlaza en el apartado "Versión de HTML" es seguramente difícil para vuestro nivel de conocimientos, pero merecerá la pena reelerla más adelante.

  2. Diferencias entre HTML y XHTML.

    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 más compatible posible entre HTML y XHTML.

  3. 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 5.1
  2. Lista de propiedades CSS 2.1

En el apartado de esta quincena os he puesto las listas en PDF por si queréis imprimirlas. No se trata de aprenderselas de memoria, pero como estaremos utilizándolas continuamente, al final os sabréis la mayoría. En el examen podréis llevarlas en papel por si os falla la memoria, pero lógicamente si perdéis mucho tiempo buscando todo en los papeles, no os dará tiempo de terminar el examen.

Primeras etiquetas HTML

Leed los apartados de las lecciones siguientes, que describen las primeras etiquetas que debéis conocer y reconocer, y haced el test siguiente:

  1. HTML: Bloques: párrafo <p>, separador <hr />, preformateado <pre> y bloque de cita <blockquote>.
  2. HTML: Secciones: títulos <h1> a <h6> y dirección <address>.
  3. HTML: Divisiones: divisiones <div>
  4. Test: HTML Etiquetas de bloque (1)

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

Para indicar los valores de las propiedades, en muchos casos se utilizan unidades de tamaño y códigos de colores

Leed las lecciones siguientes:

  1. CSS: Unidades de distancias y tamaños.

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

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

  3. [optativo] 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

Las primeras propiedades CSS que debéis conocer y reconocer son las relacionadas con el aspecto visual del texto.

Leed las lecciones y haced los tests siguientes:

  1. CSS: Propiedades de Fuente.

    La propiedad compuesta font es un poco complicada de utilizar, por lo que se suelen utilizar las propiedades simples

  2. CSS: Propiedades de Texto.

    Las últimas propiedades comentadas en esta lección (white-space, direction y unicode-bidi) se utilizan raramente

  3. Test: CSS Fuente y texto (1)
  4. Test: CSS Fuente y texto (2)

Quincena Q03: del 10/10/16 al 23/10/16

Cómo realizar los ejercicios

Leed las lecciones siguientes:

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

Salto de línea y entidades de carácter

Leed las lecciones y haced el ejercicio siguiente:

  1. HTML: Texto en línea - Salto de línea <br />.

    En esta lección se comentan varias etiquetas de texto en línea, para el primer ejercicio sólo se necesita conocer la etiqueta <br />.

  2. HTML: Entidades de cáracter - Entidades de carácter.

    En esta lección se comentan las entidades de carácter, que permiten incluir en una página web carácteres especiales. En el ejercicio The Jargon File aparecen algunos de esos caracteres.

  3. Ejercicio The Jargon File (corto) de la sección Bloques.

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 <strong>, <em>, <span>, pero también aparecerán de vez en cuando las etiquetas <abbr>, <kbd>, <q>, <sub>, <sup> y <time>.

Leed las lecciones, haced los tests y los ejercicios siguientes:

  1. HTML: Etiquetas de texto en línea. Leed todas las etiquetas descritas en esta lección, especialmente las nombradas anteriormente.
  2. 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. CSS: Líneas horizontales
  4. 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. 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. Ejercicio Currículum Vitae (corto) de la sección Texto.
  7. Ejercicio Contra Comic Sans de la sección Texto.

Clases y selectores

Leed las lecciones y haced el ejercicio siguiente:

  1. HTML: Clases

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

  2. CSS: Selectores.

    De esta lección utilizaremos 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. Ejercicio Greguerías 1 de la sección Clases

Quincena Q04: del 24/10/16 al 06/11/16

HTML 5.1

El 1 de noviembre se publicó HTML 5.1. Iré actualizando los apuntes para hacer referencia a esta nueva versión, que no supone grandes cambios con respecto a HTML 5 pero introduce algunos elementos nuevos.

Modelo de caja

Leed las lecciones, haced los tests (repetid los tests hasta familiarizaros con las etiquetas y las propiedades) y haced los ejercicios siguientes:

  1. CSS: Modelo de caja
  2. CSS: Bordes
  3. CSS: Márgenes (margin, padding)
  4. 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. Test CSS Modelo de caja (2)

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

  6. 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 gasta mucho menos que la otra, pero os ayudará a acostumbraros al uso de varias valores en las propiedades.

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

Fuentes web

Leed la lección y haced los ejercicios siguientes:

  1. CSS: Fuentes web.
  2. Ejercicio Citas de Virgilio (Fuentes web en Google Fonts) de la sección Fuentes web.
  3. Ejercicio Citas de Virgilio (Fuentes web locales) de la sección Fuentes web.

Quincena Q05: del 07/11/16 al 20/11/16

Actualización de Brackets

La semana pasada se publicó Brackets 1.8. Podéis descargar e instalar la nueva versión. El programa os avisará cuando lo utilicéis, como se explica en la lección de instalación de Brackets.

Imágenes de mapa de bit

Leed las lecciones y haced los ejercicios siguientes:

  1. HTML: Imágenes.
  2. CSS: Posicionamiento flotante de imágenes.

    Nota: En 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. Cómo realizar los ejercicios (Texto, imágenes y bordes).

    Leed el apartado dedicado a las imágenes flotantes.

  4. Edición en Brackets

    Leed los apartados "Insertar rutas de archivos" e "Insertar tamaño de las imágenes".

  5. Ejercicio Florencia de la sección Imágenes de mapa de bits.
  6. [optativo] Ejercicio Perros de la sección Imágenes de mapa de bits.

Entidades de carácter

He ampliado y reescrito la lección sobre entidades de carácter. Ahora el tema está dividido en cuatro lecciones.

Leed las lecciones y haced el ejercicio siguiente:

  1. HTML: UTF-8 y Entidades

    Estas páginas son la teoría y debéis comprenderla y saber escribir entidades de carácter y numéricas en una página web.

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

  3. Ejercicio Emoticonos de la sección Imágenes vectoriales.

Secciones

Leed las lecciones y haced los ejercicios siguientes:

  1. HTML: Secciones y elemento <main> en Bloques
  2. [optativo] 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.

  3. CSS: Selectores de adyacentes (en un ejercicio propuesto esta semana se utiliza este selector).
  4. Ejercicio Necrológicas 2014 de la sección Secciones.
  5. Ejercicio Citas de Chesterton de la sección Secciones.
  6. Ejercicio Escritores españoles de la sección Secciones.

Quincena Q06: del 28/11/16 al 04/12/16

Fondos

Leed las lecciones y haced los ejercicios siguientes:

  1. CSS: Fondos.

    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.

  2. [optativo] 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. Ejercicio Sonetos de amor de Lope de Vega de la sección Fondos.

Enlaces

Leed las lecciones y haced los ejercicios siguientes:

  1. HTML: Enlaces - 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.

  2. Ejercicio Cuatro museos de Londres de la sección Enlaces.
  3. Ejercicio Citas de G. K. Chesterton" de la sección Enlaces.

Quincena Q07: del 05/12/16 al 18/12/16

Posicionamiento flotante

Leed las lecciones y haced los ejercicios siguientes:

  1. CSS: Tamaño,

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

  2. CSS: Posicionamiento
  3. 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. 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. Ejercicio Citas de Oscar Wilde de la sección Posicionamiento flotante.
  6. Ejercicio Efemérides del 14 de diciembre de la sección Posicionamiento flotante.

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

Leed las lecciones y haced los ejercicios siguientes:

  1. CSS: Posicionamiento absoluto

    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.

  2. Ejercicio Coordenadas para posicionamiento de la sección Posicionamiento absoluto.
  3. Ejercicio Las leyes de Murphy de la sección Posicionamiento absoluto.
  4. Ejercicio Software libre 1 de la sección Posicionamiento absoluto.
  5. Ejercicio Software libre 2 de la sección Posicionamiento fijo.
  6. Ejercicio Software libre 3 de la sección Posicionamiento fijo.