Esta lección contiene un índice de las lecciones que impartí en clase durante el curso 2016/17, 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 (y está) 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 2016/17, 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 siguiente, 2017/18.
Leed la página siguiente:
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:
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. 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:
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.
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.
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:
En esta lección se explica cómo conseguir e instalar Brackets y el interfaz del programa.
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.
Leed las lecciones siguientes:
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.
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.
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:
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.
Leed los apartados de las lecciones siguientes, que describen las primeras etiquetas que debéis conocer y reconocer, y haced el test siguiente:
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:
Las unidades que más 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.
Este test es opcional porque no es necesario conocerse de memoria los códigos RGB, pero podéis practicar vuestra agudeza visual.
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:
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
Leed las lecciones siguientes:
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.
Leed las lecciones y haced el ejercicio siguiente:
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>.
En esta lección se comentan las entidades de carácter, que permiten incluir en una página web caracteres especiales. En el ejercicio The Jargon File aparecen algunos de esos caracteres.
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:
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.
Leed las lecciones y haced el ejercicio siguiente:
El mecanismo de las clases es fundamental, porque permite que una misma etiqueta pueda tener diferentes estilos.
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.
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.
Leed las lecciones, haced los tests (repetid los tests hasta familiarizaros con las etiquetas y las propiedades) y haced los ejercicios siguientes:
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.
Leed la lección y haced los ejercicios siguientes:
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.
Leed las lecciones y haced los ejercicios siguientes:
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.
Leed el apartado dedicado a las imágenes flotantes.
Leed los apartados "Insertar rutas de archivos" e "Insertar tamaño de las imágenes".
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:
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.
Estas páginas simplemente muestran la gran cantidad de caracteres gráficos que hay en Unicode. No hace falta aprenderse ninguno.
Leed las lecciones y haced los ejercicios siguientes:
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.
Leed las lecciones y haced los ejercicios siguientes:
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.
Leed las lecciones y haced los ejercicios siguientes:
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.
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.