Buscar un tema:

HTML5 y CSS3

Profesores: JAB    Ester Torres

Tema 1: Estructura semántica de HTML5

Se tratan los nuevos <divs> o cajas de HTML5 que aportan un significado propio a su contenido: (<header>, <nav>, <figure>, <section>, <article>, <aside> o <footer> entre otras).

Tema 2: Etiquetas básicas: párrafos, líneas y encabezados entre otros

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 tema 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

Empezamos 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 propiedades, valores y selectores CSS más habituales y utilizados para la maquetación de texto, disposición de <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.

Tema 8: Sombras (CSS3)

Con (box-shadow) podemos crear sombras en cajas (<div>) o sombras en textos (text-shadow), todo con una sola línea de código.

Tema 9: Fondos

En este tema vamos a ver 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).

Tema 10: Tipografías

Por fin 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 décimo tema 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 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 texto de un <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.

Tema 13: Flex, sin dolor

 
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)

Como su nombre ya deja entrever, en este tema vamos a ver todas las posibilidades que aporta esta propiedad de CSS3, como son el movimiento (translate), la rotación (rotation), el cambio de escala (scale) o la deformación (skew).

Tema 16: Formularios

En este tema vamos a tratar otra de las mejoras más esperadas de HTML5. Los formularios (<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 15 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) del tema 13, en este tema vamos a diseccionar las transiciones (transition), que permiten la creación de "pequeñas animaciones" que se reproducen -por ejemplo- 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).

Tema 20: Vídeo

Como su título ya indica, 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>.

Tema 21: Audio

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, en este caso 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.

Tema 25: Canvas

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: Adaptación a móviles (mediaqueries)

Aunque este tema de adaptación del contenido (no sólo a móviles, sino a cualquier resolución posible), 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 con un futuro (y presente) prometedor.

Tema 27: Contenido editable

Aunque pueda parecer difícil de aplicar a un proyecto real, el contenido editable que vamnos a ver en este tema sorprende por su simplicidad y enorme proyección real, sobre todo si lo combinamos con jQuery o 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).