Noves funcionalitats d'HTML5 (y CSS3)
Profesor: Javier López
Cualquier duda: jab@jabmultimedia.com
Buscar un tema:
Certificació de Professionalitat

Tema 1: Estructura semántica de HTML5   (15'')
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).
Contenido
Actividad
Autoevaluación
Solucionador

Tema 2: Etiquetas básicas: párrafos, líneas y encabezados entre otros   (15'')
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>).
Contenido
Actividad
Autoevaluación
Solucionador

Tema 3: Imágenes, listas y enlaces   (45'')
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).
Imágenes
Actividad
Autoevaluación
Solucionador

Listas
Actividad
Autoevaluación
Solucionador

Enlaces
Actividad
Autoevaluación
Solucionador

Tema 4: Introducción a CSS   (10'')
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.
Contenido
Actividad
Autoevaluación
Solucionador

Tema 5: Las propiedades CSS más utilizadas   (35'')
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.
Contenido
Actividad 1
Autoevaluación
Solucionador 1
Actividad 2
Solucionador 2

Tema 6: Creación de un favicon   (8'')
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..).
Contenido
Actividad

Tema 7: Bordes redondeados(CSS3)   (14'')
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.
Bordes redondeados
Actividad
Autoevaluación
Solucionador

Tema 8: Sombras (CSS3)   (12'')
Con (box-shadow) podemos crear sombras en cajas (<div>) o sombras en textos (text-shadow), todo con una sola línea de código.
Sombras
Actividad
Autoevaluación
Solucionador

Tema 9: Fondos   (15'')
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).
Contenidos
Actividad
Autoevaluación
Solucionador

Tema 10: Tipografías   (20'')
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).
Contenidos
Actividad
Autoevaluación
Solucionador

Tema 11: Ventanas flotantes (float)   (15'')
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.
Contenidos
Actividad
Autoevaluación
Solucionador

Tema 12: Centrar el contenido   (20'')
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.
Contenidos
Actividad
Autoevaluación
Solucionador

Tema 13: Posicionamiento (position)   (35'')
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.
Contenidos
Actividad 1
Autoevaluación
Solucionador 1

Actividad 2
Solucionador 2

Actividad 3
Solucionador 3

Tema 14: Transformaciones (transform)   (35'')
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).
Contenidos
Actividad
Autoevaluación
Solucionador

Tema 15: 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.
Contenidos
Actividad 1
Autoevaluación
Solucionador 1

Actividad 2
Solucionador 2

Tema 16: 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.
Contenidos
Actividad
Solucionador

Tema 17: 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.
Contenidos
Actividad
Autoevaluación
Solucionador

Tema 18: 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).
Contenidos
Autoevaluación

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).
Contenidos
Actividad
Autoevaluación
Solucionador

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>.
Contenidos
Actividad
Autoevaluación
Solucionador

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.
Contenidos
Autoevaluación

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.
Contenidos
Actividad
Autoevaluación
Solucionador

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).
Contenidos
Actividad 1
Autoevaluación
Solucionador 1
Actividad 2
Solucionador 2

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.
Contenidos
Autoevaluación

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.
Contenidos
Actividad
Autoevaluación
Solucionador

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.
Contenidos
Autoevaluación