Tema 1: Estructura semántica de HTML5
Se tratan los nuevos <divs> o cajas de HTML5 que aportan un significado propio a su contenido:
(<main>, <header>, <nav>, <figure>, <section>, <article>, <aside> o <footer> entre otras).
Tema 2: Etiquetas básicas: párrafos, líneas y encabezados
Vamos a ver las etiquetas más básicas, pero fundamentales para separar párrafos (<p>), crear saltos de línea (<br>), crear negritas (<b>), cursivas (<i>), señalar encabezados (<h1>-<h6>), y colocar sangrías (<dd>).
Tema 3: Imágenes, listas y enlaces
En este apartado se tratan todos aquellos aspectos fundamentales para la creación de listas ordenadas (<ol>) y desordenadas (<ul>), personalización de las viñetas, vinculación de imágenes (<img>) y la utilización de enlaces (<a>), tanto en formato texto como con imágenes. Asimismo, vamos a ver un resumen de propiedades y selectores propios para poder dar formato CSS a los enlaces (quitar subrayado, configurar colores, cambiar el color al pasar el cursor por encima).
Tema 4: Introducción a CSS
Vamos a empezar a introducir código CSS para poder maquetar cualquier elemento que introduzcamos, tanto desde dentro del propio documento HTML, como -sobre todo- a través de ficheros CSS externos.
Tema 5: Las propiedades CSS más utilizadas
En este extenso tema vamos a tratar las sentencias, propiedades, valores y selectores CSS más habituales y utilizados para la maquetación de texto, disposición de cajas (<divs>) y personalización de enlaces.
Tema 6: Creación de un favicon
Para dejar un buen sabor de boca de este primer módulo de iniciación vamos a crear un favicon, es decir un icono que aparece al lado del nombre de nuestro dominio, tanto en la pestaña del navegador, como en el resumen de nuestra página en el resultado de búsqueda de los diferentes buscadores (google, bing, yahoo..).
Tema 7: Bordes redondeados(CSS3)
Entramos en las nuevas funcionalidades de CSS3 con una propiedad que sirve para configurar bordes redondeados (border-radius), ya sea en las 4 esquinas a la vez o concretando cada una de ellas por separado y todo con una sola línea de código.
Con (box-shadow) podemos crear sombras en cajas (<div>), o sombras en textos (text-shadow), todo con una sola línea de código.
En este apartado vamos a tratar varias de las mejoras sobre fondos (
background), centrados en la posibilidad de añadir diferentes imágenes superpuestas (como las capas de Photoshop) para formar un fondo de la página o de un <div>. Al mismo tiempo, vamos a utilizar varias propiedades para configurar la repetición (
background-repeat), tamaño (
background-size), fijación (
background-attachment) y/o posición de los mismos (
background-position).
Podemos utilizar cualquier tipografía (ttf, otf) en nuestros proyectos web sin que el usuario la tenga que tener instalada para que pueda visualizarla. En este caso vamos a utilizar varias fuentes de GoogleFonts y las vincularemos a nuestros selectores CSS (@font-face).
Tema 11: Cajas flotantes (float)
En este apartado vamos a ver cómo podemos colocar cajas (<divs>) en la misma línea, alineándolas a la derecha o a la izquierda utilizando la entrañable propiedad CSS float, así como su complemento "arreglador de desastres" clear.
Tema 12: Centrar el contenido
Por "centrar el contenido" entendemos tanto la sencillez de centrar el contenido de una caja <div> (
text-align), como el hecho de centrar cajas (<div>:) respecto a la anchura de la ventana del navegador, o bien cuando estas cajas han sido alineadas con
float o
flex.
La enorme importancia y la facilidad del uso de Flex deja atrás la utilización de float, inline-block u otros métodos, solventado sus problemáticas habituales para distribuir con efectividad el contenido en pantalla, así como aporta nuevas funcionalidades imposibles de afrontar hasta ahora. Al mismo tiempo aporta una flexibilidad básica para el diseño preparado para múltiples dispositivos (Responsive Design).
Tema 14: Posicionamiento (position)
Un tema básico es el posicionamiento de cajas (position) ya sea con un posicionamiento relativo, absoluto o fijo (relative, absolute o fixed) sin que todo el contenido se desmonte a la primera de cambio. Así como el imperativo de su utilización para el funcionamiento de propiedades como left, right, top o bottom.
Tema 15: Transformaciones (transform)
Vamos a ver todas las posibilidades que aporta esta propiedad de CSS3, como son el desplazamiento (translate), la rotación (rotation), el cambio de escala (scale) o la deformación (skew).
Los formularios de HTML5 (<form>) incorporan nuevos tipos de datos (<input<>) (fechas, colores, direcciones de correo electrónico, rangos, etc..) y la autovalidación de datos sin javaScript. Al mismo tiempo vamos a ver todas las propiedades y eventos CSS3 (como [required] o :invalid) que permiten configurar cualquier elemento o respuesta de autovalidación de un formulario.
Tema 17: Google Maps (<iframe>)
En este tema vamos a incorporar un mapa procedente de Google Maps, configurándolo al tamaño que necesitemos con el código que nos proporciona Google y la etiqueta <iframe>, también utilizada para -entre otros usos- la vinculación de vídeos de YouTube.
Tema 18: Transiciones (transition)
Ligado a las transformaciones (transform) de temas anteriores, en este vamos a diseccionar las transiciones (transition), que permiten la creación de "pequeñas animaciones" que se reproducen cuando el usuario coloca el cursor encima del mismo elemento.
Tema 19: Columnas de texto
Vamos a ver la enorme facilidad que representa dividir un texto en diferentes columnas (column-count), fijar la línea separadora (column-rule) o el espacio mínimo existente entre las columnas (column-gap).
En este tema incorporaremos vídeos (<video>) sin necesidad de plugins externos. Incluiremos vídeos que se encuentren en nuestro dominio con los formatos correctos, así como vinculaciones a vídeos de YouTube utilizando el código que Google nos proporciona y la ayuda de <iframe>.
En este tema incorporaremos audios (<audio>) sin necesidad de plugins externos. A modo de práctica incluiremos un fichero de audio con los formatos correctos.
Tema 22: Colores, transparencias y degradados
En este tema trataremos las últimas características relacionadas con los colores, como aquellos a los que se les puede llamar por su nombre (olive,chocolate, beige, orange). También veremos cómo definir la opacidad (opacity) (o transparencia) en la definición de colores, así como la utilización de colores a través de su RGB con la inclusión de la cantidad de alpha (rgba). Sin olvidarnos de los degradados a través de código CSS3.
Tema 23: Animaciones (animation)
Muy parecidas a las transiciones (transition) del módulo anterior, vamos a ver la funcionalidad y las diferencias que existen entre las transiciones y las animaciones (animation), entre las que se pueden resaltar una mayor posibilidad en la definición de movimientos, la visualización sin intervención del usuario (al entrar en la página), fijar un retardo en el inicio o la reproducción indefinida de la animación (loop).
Tema 24: Imágenes vectoriales SVG
CSS3 incorpora la posibilidad de que a través de código el navegador pueda dibujar (y mostrar) imágenes vectoriales en pantalla a tiempo real. En este tema vamos a ver cómo funciona y con qué etiquetas contamos para dibujar nuestras propias obras de arte.
Canvas es otra de las grandes incorporaciones de CSS3. Su enorme potencial, amplitud de funciones y su asociación con javaScript para lograr todo aquello que podría resultar imposible, lo aleja un poco de la trayectoria de este curso. No obstante, en este tema vamos a ver cómo funciona a nivel general.
Contenidos
(en proceso)
Autoevaluación
(en proceso)
Tema 26: Responsive Design (mediaqueries)
Aunque este tema de adaptación del contenido (no sólo a móviles, sino a cualquier dispositivo existente) merecería un curso aparte, en este tema realizamos una aproximación a los mediaqueries, para dejar un camino abierto para todos aquellos que quieran seguir este camino imprescindible en cualquier web actualmente.
Tema 27: Contenido editable
Aunque pueda parecer difícil de aplicar a un proyecto real, el contenido editable que vamos a ver en este tema sorprende por su simplicidad y enorme proyección real, sobre todo si lo combinamos con javaScript. El contenido editable permite que el usuario pueda escribir en un <div> o en zonas concretas de un texto guardando el formato que posee y sin necesidad de incorporar elementos de formulario.
Tema 28: Guardar datos locales (Storage)
En este tema vamos a ver cómo la función de Storage deja atrás con alevosía y nocturnidad asombrosa las lastrosas cookies. Esta función permite guardar hasta 5 Mb. de información en el navegador local del usuario con una vigencia dentro de la misma sesión (sessionStorage) o de manera permanente (localStorage).
