Curso superior de diseño de páginas web. HTML5, CSS3 y Javascript

Volver al listado

Inicio: 02/02/2017 - Fin: 02/06/2017

Aprende a diseñar tu propia web.

Objetivos

Crear y publicar páginas web que integren textos, imágenes y otros elementos, utilizando lenguajes de marcas, lenguaje de script en cliente y editores apropiados, según especificaciones y condiciones de usabilidad dadas y realizar los procedimientos de instalación y verificación de las mismas en el servidor correspondiente.

Dirigido a

El curso va dirigido a quienes desarrollan su actividad profesional tanto por cuenta propia, como por cuenta ajena en empresas o entidades públicas o privadas de cualquier tamaño, que dispongan de infraestructura de redes intranet, Internet o extranet, en el área de desarrollo del departamento de informática, así como a todos aquellos que tengan la inquietud de aprender cómo operan internamente los documentos webs bajo el lenguaje estándar de marcado HTML5, como poder estilizarlos y animarlos con CSS3 y JavaScript, cómo conseguir que dichos documentos sean accesibles y usables con una herramienta de edición web, y por último, cómo publicarlos en un servidor de hospedaje bajo un dominio concreto de tal manera que sean localizables por los usuarios a través de los motores de búsqueda.

Programa

1. Los lenguajes de marcas.
Características de los lenguajes de marcas.
– Utilización de etiquetas.
– Compatibilidad.
– Editores de texto.
Estructura de un documento creado con lenguaje de marcas.
– Comienzo del archivo. Validación de un documento HTML5.
– Encabezados.
– Titulo.
– Estilos.
– Cuerpo.
– Scripts.
Navegadores web.
– Navegadores modo texto.
– Los navegadores más utilizados.
– Chrome, Explorer, Mozilla, Opera, etc.
– Diferencias de visualización.
Marcas para dar formato al documento.
– Marcas de inicio y final.
– Marcas de aspecto.
– Marcas de párrafo.
– Marcas de fuentes y colores.
– Listas ordenadas y no ordenadas.
Enlaces y direccionamientos.
– Creación de un enlace.
– Tipos de enlace.
– Anclas.
– Vínculos.
– Los enlaces y la navegación.
Marcos, capas y tablas.
– Marcos.
– Creación de marcos.
– Tipos de marcos.
– Situación de los marcos.
– Configuración de los marcos.
– Capas.
– Definición de capas.
– Creación de capas.
– Utilización de las capas.
2. Imágenes y elementos multimedia
Inserción de imágenes: formatos y atributos.
– Incluir imágenes en las páginas.
– Atributos de las imágenes.
– Propiedades de ubicación de las imágenes.
Mapas de imágenes.
– Definición de mapa.
– Creación de un mapa con una imagen.
– Establecer diferentes partes en la imagen.
– Vincular las diferentes partes de la imagen.
Inserción de elementos multimedia: audio, vídeo y programas.
– Características y propiedades de los elementos multimedia.
– Formatos de audio y vídeo.
– Descripción de los formatos de audio.
– Descripción de los formatos de vídeo.
– Configuración de los recursos.
– Configuración de los recursos para audio.
– Configuración de los recursos para vídeo.
– Recursos necesarios para el funcionamiento de los elementos multimedia.
– Etiquetas y propiedades para la inserción de audio.
– Etiquetas y propiedades para la inserción de vídeo.
– Etiquetas y propiedades para la inserción de programas.
Marquesinas.
– Los textos con movimiento.
– Utilización de las etiquetas para incluir marquesinas.
– Las marquesinas y los distintos navegadores.
3. Técnicas de accesibilidad y usabilidad
Accesibilidad web, ventajas de la accesibilidad.
– Definición de Accesibilidad.
– Aplicabilidad de la Accesibilidad.
– Descripción de las ventajas de la Accesibilidad.
– Facilidad de acceso.
– Mejoras en la navegación.
– Independencia de los navegadores.
Usabilidad web, importancia de la usabilidad.
– Definición de usabilidad.
– Interacción web-individuo.
– Aplicabilidad de la usabilidad.
– Recursos sobre usabilidad
Aplicaciones para verificar la accesibilidad de sitios web (estándares).
– Recursos web de estándares.
– Utilización de los recursos en las páginas web.
– Comprobar la accesibilidad en las páginas web.
Adaptación de sitios web usables
– Estudio de la estructura y diseño de los sitios web usables.
– Descripción de sitios web usables.
– Diseño de sitios web usables.
– Utilización de los sitios web usables
4. Herramientas de edición web
Instalación y configuración de herramientas de edición web.
– Instalación de la herramienta web.
– Configuración de la herramienta web.
Funciones y características.
– Descripción de los elementos de las herramientas web.
– Ubicación de los elementos de las herramientas web.
– Propiedades de los elementos de las herramientas web.
– Tareas a realizar con una herramienta de edición web.
– El lenguaje de marcas y las herramientas de edición web.
5. Formularios en la construcción de páginas web
Características.
– La interactividad de las páginas web.
– La variabilidad de los datos de la página web.
– El envío de información a servidores.
Elementos y atributos de formulario.
– Descripción y definición de los elementos de un formulario.
– Utilización de campos y textos.
– Etiquetas de los formularios.
– Controles de formulario.
– Descripción de los controles de los formularios.
– Utilización de botones de acción.
– Utilización de lista desplegables.
– Utilización de casillas de verificación.
Formularios y eventos. Criterios de accesibilidad y usabilidad en el diseño de formularios.
– Agrupación de datos.
– Adecuación del tamaño del formulario (división en distintas páginas).
– Identificación de los campos obligatorios.
– Ordenación lógica de la petición de datos.
– Información correcta al usuario.
– Utilización de páginas de error y de confirmación.

6. Plantillas en la construcción de páginas web
Funciones y características.
– Descripción de una plantilla web.
– Elementos de una plantilla web.
– Estructura y organización de los elementos de las plantillas.
– Especificar las zonas modificables de una plantilla y las partes fijas.
– Utilización de plantillas.
Campos editables y no editables.
– Definir y crear los campos susceptibles de cambios en una plantilla.
– Definir y crear los campos no modificables en una plantilla.
Aplicar plantillas a páginas web.
– Las plantillas en la web.
– Búsqueda de plantillas en la red.
Adaptación de plantillas a páginas web.
7. Formularios en la construcción de páginas web
Características.
– La interactividad de las páginas web.
– La variabilidad de los datos de la página web.
– El envío de información a servidores.
Elementos y atributos de formulario.
– Descripción y definición de los elementos de un formulario.
– Utilización de campos y textos.
– Etiquetas de los formularios.
– Controles de formulario.
– Descripción de los controles de los formularios.
– Utilización de botones de acción.
– Utilización de lista desplegables.
– Utilización de casillas de verificación.
Formularios y eventos. Criterios de accesibilidad y usabilidad en el diseño de formularios.
– Agrupación de datos.
– Adecuación del tamaño del formulario (división en distintas páginas).
– Identificación de los campos obligatorios.
– Ordenación lógica de la petición de datos.
– Información correcta al usuario.
– Utilización de páginas de error y de confirmación.
8. Plantillas en la construcción de páginas web
Funciones y características.
– Descripción de una plantilla web.
– Elementos de una plantilla web.
– Estructura y organización de los elementos de las plantillas.
– Especificar las zonas modificables de una plantilla y las partes fijas.
– Utilización de plantillas.
Campos editables y no editables.
– Definir y crear los campos susceptibles de cambios en una plantilla.
– Definir y crear los campos no modificables en una plantilla.
Aplicar plantillas a páginas web.
– Las plantillas en la web.
– Búsqueda de plantillas en la red.
Adaptación de plantillas a páginas web.
MODULO 2
1. Metodología de la programación
Lógica de programación.
– Descripción y utilización de operaciones lógicas.
– Secuencias y partes de un programa.
Ordinogramas.
– Descripción de un ordinograma.
– Elementos de un ordinograma.
– Operaciones en un programa.
– Implementación de elementos y operaciones en un ordinograma.
Pseudocódigos.
– Descripción de pseudocódigo.
– Creación del pseudocódigo.
Objetos.
– Descripción de objetos.
– Funciones de los objetos.
– Comportamientos de los objetos.
– Atributos de los objetos.
– Creación de objetos.
Ejemplos de códigos en diferentes lenguajes.
– Códigos en lenguajes estructurales.
– Códigos en lenguajes scripts.
– Códigos en lenguajes orientados a objetos.

2. Lenguaje de guion
Características del lenguaje.
– Descripción del lenguaje orientado a eventos.
– Descripción del lenguaje interpretado.
– La interactividad del lenguaje de guion.
Relación del lenguaje de guion y el lenguaje de marcas.
– Extensión de las capacidades del lenguaje de marcas.
– Adicción de propiedades interactivas.
Sintaxis del lenguaje de guion.
– Etiquetas identificativas dentro del lenguaje de marcas.
– Especificaciones y características de las instrucciones.
– Elementos del lenguaje de guion.
– Variables.
– Operaciones.
– Comparaciones.
– Asignaciones.
Objetos del lenguaje de guion.
– Métodos.
– Eventos.
– Atributos.
– Funciones.
Tipos de scripts: inmediatos, diferidos e híbridos.
– Script dentro del cuerpo del lenguaje de marcas.
– Ejecutables al abrir la página.
– Ejecutables por un evento.
– Script dentro del encabezado del lenguaje de marcas.
– Script dentro del cuerpo del lenguaje de marcas.
Ejecución de un script.
– Ejecución al cargar la página.
– Ejecución después de producirse un evento.
– Ejecución del procedimiento dentro de la página.
– Tiempos de ejecución.
– Errores de ejecución.

3. Elementos básicos del lenguaje de guion
Variables e identificadores.
– Declaración de variables.
– Operaciones con variables.
Tipos de datos.
– Datos booleanos.
– Datos numéricos.
– Datos de texto.
– Valores nulos.
Operadores y expresiones.
– Operadores de asignación.
– Operadores de comparación.
– Operadores aritméticos.
– Operadores sobre bits.
– Operadores lógicos.
– Operadores de cadenas de caracteres.
– Operadores especiales.
– Expresiones de cadena.
– Expresiones aritméticas.
– Expresiones lógicas.
– Expresiones de objeto.
Estructuras de control.
– Sentencia IF.
– Sentencia WHILE.
– Sentencia FOR.
– Sentencia BREAK.
– Sentencia CONTINUE.
– Sentencia SWITCH.
Funciones.
– Definición de funciones.
– Sentencia RETURN.
– Propiedades de las funciones.
– Funciones predefinidas del lenguaje de guion.
– Creación de funciones.
– Particularidades de las funciones en el lenguaje de guion.
Instrucciones de entrada / salida.
– Descripción y funcionamiento de las instrucciones de entrada y salida.
– Lectura de teclado de datos.
– Almacenamiento en variables.
– Impresión en pantalla del resultado.
– Sentencia PROMPT.
– Sentencia DOCUMENT.WRITE.
4. Desarrollo de scripts
Herramientas de desarrollo, utilización.
– Crear scripts con herramientas de texto.
– Crear scripts con aplicaciones web.
– Recursos en web para la creación de scripts.
Depuración de errores: errores de sintaxis y de ejecución.
– Definición de los tipos de errores.
– Escritura del programa fuente.
– Compilación del programa fuente.
– Corrección de errores de sintaxis.
– Corrección de errores de ejecución.
Mensajes de error.
– Funciones para controlar los errores.

Gestión de objetos del lenguaje de guion
Jerarquía de objetos.
– Descripción de objetos de la jerarquía.
– Propiedades compartidas de los objetos.
– Navegar por la jerarquía de los objetos.
Propiedades y métodos de los objetos del navegador.
– El objeto superior Windows#.
– El objeto navigator.
– URL actual (location).
– URL visitada por el usuario.
– Contenido del documento actual (document).
– Título, color del fondo, y formularios.
Propiedades y métodos de los objetos del documento.
– Propiedades del objeto document.
– Ejemplos de propiedades de document.
– Métodos de document.
– Flujo de escritura del documento.
– Métodos open () y close () de document.
Propiedades y métodos de los objetos del formulario.
– Propiedades principales del objeto form (Name, action,method, target).
– Métodos del objeto form (submit, reset, get, post).
Propiedades y métodos de los objetos del lenguaje.
– Document (escribir texto, color fuente, color fondo, obtener elementos del documento actual HTML, título de la página).
– Windows (open).
– History (go).
– Location (servidor).
– Navigator (nombre, versión y detalles del navegador).

5. Los eventos del lenguaje de guion
Utilización de eventos.
– Definición de eventos.
– Acciones asociadas a los eventos.
– Jerarquía de los eventos desde el objeto Windows.
Eventos en elementos de formulario.
– Onselect (al seleccionar un elemento de un formulario).
– Onchange (al cambiar el estado de un elemento del formulario).
Eventos de ratón. Eventos de teclado.
– Eventos de ratón.
– Onmousedown (al pulsar sobre un elemento de la página).
– Onmousemove (al mover el ratón por la página).
– Onmouseout (al salir del área ocupada por un elemento de la página).
– Onmouseover (al entrar el puntero del ratón en el área ocupada por un elemento de la página).
– Eventos de teclado:
– Onkeydown (al pulsar una tecla el usuario).
– Onkeypress (al dejar pulsada una tecla un tiempo determinado).
– Onkeyup (al liberar la tecla apretada).
Eventos de enfoque.
– onblur (cuando un elemento pierde el foco de la aplicación).
– onfocus (cuando un elemento de la página o la ventana ganan el foco de la aplicación).
Eventos de formulario.
– Onreset (al hacer clic en el botón de reset de un formulario).
– Onsubmit (al pulsar el botón de enviar el formulario).
Eventos de ventana.
– Onmove (al mover la ventana del navegador).
– Onresize (al redimensionar la ventana del navegador).
Otros eventos.
– Onunload (al abandonar una página).
– Onload (al terminar de cargarse la página o imágenes).
– Onclick (al hacer clic en al botón del ratón sobre un elemento de la página).
– Ondragdrop (al soltar algo que se ha arrastrado sobre la página).
– Onerror (al no poderse cargar un documento o una imagen).
– Onabort (al detenerse la carga de una imagen, de la página o irse de la página).

6. Búsqueda y análisis de scripts
Búsqueda en sitios especializados.
– Páginas oficiales.
– Tutoriales.
– Foros.
– Bibliotecas.
Operadores booleanos.
– Funcionamiento de los operadores booleanos.
– Utilización en distintos buscadores.
Técnicas de búsqueda.
– Expresiones.
– Definiciones de búsquedas.
– Especificaciones.
Técnicas de refinamiento de búsquedas.
– Utilización de separadores.
– Utilización de elementos de unión.
Reutilización de scripts.
– Scripts gratuitos.
– Generalización de códigos.

7. Validaciones de datos en páginas web
Funciones de validación.
– Descripción de las funciones.
– Utilidad de las funciones.
– Implementación de las funciones.
– Validaciones alfabéticas, numéricas y de fecha.
– Definición de validaciones.
– Código de validación.
– Ejecución del código de validación.
Verificar formularios.
– Identificación de datos.
– Implementación del código de verificación.
– Comprobación de los datos introducidos por el usuario.
8. Efectos especiales en páginas web
Trabajar con imágenes: imágenes de sustitución e imágenes múltiples.
– Selección de imágenes.
– Optimización de imágenes.
– Implementación de código con varias imágenes.
Trabajar con textos: efectos estéticos y de movimiento.
– Creación de textos mejorados y con movimiento.
– Implementación de efectos.
– Adecuación de los efectos a la página web.
Trabajar con ventanas.
– Creación de varias ventanas.
– Interactividad entre varias ventanas.
Otros efectos.
– Efectos con HTML.
– Efectos con CSS.
– Efectos con capas.

9. Pruebas y verificación en páginas web
Técnicas de verificación.
– Fundamentales.
Herramientas de depuración para distintos navegadores.
– Utilidades para JavaScript.
– Utilidades para DOM.
Verificación de la compatibilidad de scripts.
– Parámetros para distintos navegadores.
– Creación de código alternativo para diversos navegadores.

10. La librería jQuery
Introducción a jQuery
Agregando jQuery a nuestro proyecto
Cargando el DOM con jQuery.
Selectores.
Selectores básicos.
Selectores de atributos.
Selectores de widgets.
Selectores de jerarquía.
Otros selectores.
Gestionando una colección.
Manipulación del DOM.
Eventos.
Animaciones.
Validando formularios con funciones.
Utilizar Plug-ins.
Uso de AJAX con jQuery.
MODULO 3
1. Hojas de estilo y tipos de estilo
Funciones y características.
– Descripción de estilos
– Utilización de estilos.
– Los estilos en el lenguaje de marcas.
– Los estilos con herramientas de edición web.
Hojas de estilo y accesibilidad.
– Adecuación de las hojas de estilos.
Tipos de estilo: incrustados, enlazados, importados, en línea.
– Descripción de los tipos de estilo.
– Incrustar un estilo dentro de un documento HTML.
– Enlazar una hoja de estilo externa a un documento HTML.
– Importar una hoja de estilo desde un documento HTML.
– Importar una hoja de estilo, a través de un archivo con estilos.
– Utilización y optimización de los tipos de estilos.
Jerarquía de las reglas CSS.
Selectores y reglas de estilo.
– Estructura de los estilos.
– Sintaxis básica de estilos.
– Utilización de selectores y pseudo-selectores.
– Utilización de clases y pseudo-clases.
– Utilización de elementos y pseudo-elementos.
Atributos de estilo para fuentes, color y fondo, texto y bloques (párrafos).
– Descripción de los atributos de estilo.
– Utilización de los atributos de estilo.
Atributos de estilo para contenedores, imágenes, listas, tablas y formularios.
Efectos especiales con CSS3.
Transformaciones.
Transiciones.
Animaciones.

2. Creación de ficheros de estilo.
Definición de los ficheros de estilo.
Creación de ficheros de estilo genéricos.
Adaptación de los ficheros de estilo para distintas páginas web.
– Consulta de medios.
– Criterios de búsqueda de Media Queries.
– Operadores lógicos.
– El tamaño de pantallas.
– Introducción a Responsive Web Desing (Diseño Web Adaptativo).

3. Diseño, ubicación y optimización de los contenidos de una página web.
Creación de un documento funcional.
– Descripción de los objetivos de la página web.
– Definición de los elementos funcionales de la página web.
– Descripción de cada elemento.
Diseño de los contenidos.
Identificación de la información a ubicar en la página web.
Selección de contenidos para cada elemento de la página.
Utilización del documento funcional para las especificaciones del diseño.
Tipos de página para la ubicación de contenidos.
Definición de los tipos de página en base a los contenidos y funcionalidades.
Selección de los tipos de página para la página web.
Utilización del documento funcional para las especificaciones del tipo de página.
Especificaciones de navegación.
Creación de un mapa de navegación de páginas.
– Utilización del documento funcional para integrar el mapa de navegación.
Elementos utilizados para la navegación.
– Definición de los elementos utilizados para navegar.
– Utilización del documento funcional para especificar los elementos de navegación.
Elaboración de una guía de usuario.
MODULO 4
1. Entorno de trabajo
Paneles e interfaz
Modos de color
Guardar / Exportar
2. Herramientas
Heramientas de selección
Herramientas de transformación
Herramientas de pintura
3. Texto
El panel de texto
El texto como elemento de diseño
4. Retoque de imágenes
5. Trabajo con capas
Capas
Máscaras
6. Animación básica
7. Evaluación final

Metodología

El curso será gestionado a través de una comunidad privada de Google+ en la cual los alumnos estarán en contacto con los profesores y resto de alumnos.
El alumno deberá tener una cuenta de gmail para el seguimiento de los cursos y podrá acceder tanto des de su ordenado como desde su dispositivo móvil.
El modo de evaluación será un caso práctico que el alumno irá desarrollando a medida que va avanzando en los contenidos del curso.
La documentación del curso esta desarrollada a través de video tutoriales y documentación escrita. Junto a estos el tutor del curso irá incorporando información adicional que considere de interés y novedosa en el momento de la realización del curso con el objetivo de que el alumno este al tanto de las posibles novedades dentro del lenguaje de marcado HTML5, CSS3, JavaScript con jQuery, posicionamiento en buscadores, así como en la configuración y uso de una herramienta de edición de páginas web.
Una vez cumplimentados los ejercicios, estos se deben enviar para su corrección por el tutor, al cual se le pueden preguntar todas las dudas que se vayan teniendo, ya que tiene el compromiso de contestarlas en un plazo máximo de 24 horas (dado que uno se puede conectar a su curso tanto en horario laboral como fuera de él).
Aquellos alumnos que resulten APTOS, se les hará llegar un CERTIFICADO DE APTITUD, el cual será enviado a la dirección indicada en la solicitud.
La comunicación con el tutor se realizará siempre a través de la Comunidad privada creada para el seguimiento del curso.

Observaciones

Posibilidad de pago fraccionado sin intereses.
  • 255 horas lectivas


  • Los días L M X J V S

  • Precio Total del Curso
    1.275,00 €

DESCARGAR FICHA CURSO Inscripción

Más Información

Te ayudamos a buscar tu curso: