Presentación y licencia

Presentación

Me llamo Bartolomé Sintes Marco. Soy profesor de Informática en el Instituto de Educación Secundaria Abastos de Valencia (España).

Durante el curso 2016/17 dediqué casi la mitad del curso (aproximadamente 40 horas de clase) a enseñar a crear páginas web (HTML+CSS) a alumnos del módulo Lenguajes de Marcas y Sistemas de Gestión de Información de 1º curso del ciclo formativo de grado superior Administración de Sistemas Informáticos en Red.

El módulo de Lenguaje de Marcas está orientado a alumnos sin conocimientos previos de creación de páginas web y se abordará el lenguaje de marcas HTML 5.1 y las hojas de estilo CSS 2.1 y CSS 3.

Estos apuntes no son una obra terminada, ni lo serán nunca debido a la naturaleza cambiante de la web. Cada curso intento actualizar y mejorar los contenidos, pero siempre me queda trabajo por hacer. Por otro lado, en clase no abordo todos los temas que se tratan en estos apuntes. La información adicional que contienen estos apuntes se ofrece al público en general y a los alumnos que quieran aprender más de lo abordado en clase.

Novedades para el curso 2016/17

Hasta el curso 203/14, en este módulo impartía XHTML 1.0 y CSS 2 (y algo de CSS 3) utilizando el editor Amaya. Al cabo de varios años conseguí preparar un buen número de lecciones, ejercicios y exámenes, pero debido a la evolución permanente de la web, estos apuntes se estaban quedando obsoletos.

En el curso 2014/15 empecé a impartir HTML 5 (más concretamente XHTML 5). Para poder crear páginas HTML 5, tuve que empezar a utilizar un nuevo editor (Brackets) y por ello dediqué la mayor parte del tiempo a preparar explicaciones sobre Brackets y a preparar nuevos ejercicios en XHTML 5, pero sin entrar realmente a fondo en este nuevo lenguaje.

En el curso 2015/16 entré más a fondo en HTML 5 (concretamente, HTML 5 con sintaxis XHTML). Con respecto a las hojas de estilo, seguí impartiendo CSS 2.1, aunque incluyendo algunos aspectos de CSS 3 que ya incorporan los navegadores actuales. Incluí también lecciones dedicadas a gráficos SVG. Para aligerar el material de consulta, eliminé las referencias al XHTML 1.0, al editor Amaya y a las versiones de Internet Explorer anteriores a IE11, así como los ejercicios y exámenes anteriores anteriores al curso 2014/15 que estaban hechas en XHTML 1.0. El juego de caracteres utilizado en todos los archivos pasó a ser utf-8, en vez del iso-8859-1 utilizado anteriormente. También empecé a utilizar imágenes SVG en los propios apuntes (iconos, etc.)

Para el curso 2016/17, mi intención es, entre otros aspectos, modificar el orden en que se tratan los elementos HTML 5, completar y actualizar la información ofrecida, cubrir temas no tratados anteriormente (contenido incrustado, por ejemplo), dar mayor importancia al diseño de páginas para móviles, sustituir muchas imágenes por imágenes SVG, etc.

Licencia

Este curso se distribuye bajo la licencia Creative Commons Reconocimiento-CompartirIgual 4.0 Internacional (CC BY-SA 4.0). Esta licencia está disponible en Internet en versión resumida (en español) y en versión completa (en inglés).

Organización de estos apuntes

Todas las páginas de este curso son accesibles desde la página principal de los apuntes.

La página principal está dividida en cuatro columnas:

  1. lecciones teóricas sobre HTML 5.
  2. lecciones teóricas sobre CSS, ordenadas por lecciones que corresponden más o menos a las lecciones sobre HTML. En el futuro, a medida que se vayan aprobando las recomendaciones CSS 3, iré eliminando las lecciones de CSS 2.
  3. lecciones dedicadas a la instalación y configuración de aplicaciones (Firefox, Brackets, etc.) y otros temas generales.
  4. ejercicios agrupados por temas, que se corresponden más o menos con las lecciones HTML y CSS, y exámenes de cursos anteriores.

En todas las lecciones, en la parte superior izquierda se encuentran los siguientes iconos:

En las páginas de comentarios sobre ejercicios, aparece también el siguiente icono:

En las explicaciones sobre las etiquetas, atributos o propiedades se incluyen ejemplos en los que se indica cómo se muestran los navegadores (Firefox, IE, Chrome):

En las explicaciones de HTML y CSS también se incluyen enlaces a fuentes alternativas de información:

En las explicaciones de HTML y CSS se incluye algún ejemplo de código incorrecto, que se indica con el icono Incorrecto, y de código desaconsejado, que se indica con el icono Desaconsejado. En esos ejemplos a veces se incluye el mismo ejemplo pero con código correcto, que se indica con el icono Correcto

Programas empleados

En este curso se utilizarán programas libres multiplataforma, salvo en los casos que no sea posible hacerlo (por ejemplo, Internet Explorer sólo está disponible en Windows).

Sistema operativo

Los ordenadores que utilizarán los alumnos tienen instalado Windows 7, por lo que he utilizado las versiones para ese sistema operativo de los programas empleados, pero el curso puede seguirse perfectamente desde cualquier distribución GNU/Linux o desde Windows XP.

Navegador

El navegador recomendado a los alumnos es Firefox, aunque el curso hace referencia también a Internet Explorer y Chrome. A principios de curso (septiembre de 2016), las últimas versiones disponibles eran Firefox 48, Chrome 53 e Internet Explorer 11. En los ordenadores de los alumnos estarán disponibles las últimas versiones (que se irán actualizando automáticamente a versiones posteriores).

En cdlibre.org hay una sección dedicada a navegadores web libres, con información detallada sobre las últimas versiones publicadas para Windows.

Editor

El editor recomendado en este curso es el editor Brackets, un editor libre, multiplataforma y que se actualiza a menudo, pero se puede seguir con cualquier editor de texto plano.

En cdlibre.org hay una sección dedicada a editores web libres, con información detallada sobre las últimas versiones publicadas para Windows.