Aula Virtual

Curso para aprender a diseñar páginas webs desde cero, hasta convertirte en un profesional.

En Innova Training pretendemos conseguir que alcances una formación de calidad gracias a nuestro curso de diseño web con de HTML, CSS y Javascript.

 
 
VER CONTENIDOS DE LOS CURSOS
VER CONTENIDO DEL CURSO
SELECCIONAR Y COMPRAR CURSO

El Curso de HTML, CSS y Javascript Online más completo, permitiéndote aprender la profesión del presente y del futuro. Aprende a programar desde cero a avanzado.

Diseño Web

  • 22 horas lectivas
  • 18 horas prácticas
Contenido del curso

I. Introducción

Relata la situación actual de la Web, en la que tiene gran relevancia las páginas dinámicas e interactivas, convirtiéndose prácticamente en aplicaciones web. Para desarrollar ese tipo de páginas, los estándares HTML y CSS han tenido que evolucionar, convirtiéndose en HTML5 y CSS3. También explica el papel que juega el lenguaje de programación JavaScript, como medio o herramienta para utilizar estas nuevas tecnologías. Contenido:
1. La evolución de la Web.
2. Estándares web.
3. HTML5 y CSS3.
4. JavaScript.
5. Editor de código.

II. Introducción a JavaScript

Explica la forma de incluir código JavaScript en las páginas web, para lo que se utiliza la etiqueta script, así como preparar código alternativo para aquellos navegadores que no pueden ejecutarlo o que lo tienen desactivado. También se introducen conceptos fundamentales de programación, como variables, tipos de datos, operadores y cuadros de diálogo sencillos. Contenido:
1. La etiqueta script.
2. Contenido alternativo.
3. Variables.
4. Tipos de datos.
5. Operadores.
6. Cuadros de diálogo.

III. Fundamentos de programación

Estudia las estructuras de control y cómo definir funciones en JavaScript. También se explica el ámbito de las variables, aclarando la diferencia entre una variable global y una variable local; así como el uso de funciones anónimas. Contenido:
1. Estructuras de decisión.
2. Expresiones lógicas.
3. Estructuras de repetición.
4. Definir funciones.
5. Llamar funciones.
6. Ámbito de las variables.
7. Funciones en el interior de funciones y funciones anónimas.

IV. Objetos y Arrays en JavaScript

Estudia cómo utilizar los objetos en el lenguaje JavaScript, prestando especial atención a la jerarquía de objetos que proporciona el navegador. También se introduce el concepto de array, muy utilizado en programación. Contenido:
1. Introducción.
2. La jerarquía de objetos.
3. Propiedades y eventos.
4. Métodos.
5. Arrays.

V. Los objetos location e history

Estudia los objetos location e history de JavaScript. Introduce el concepto de URL. Contenido:
1. ¿Qué es una URL?
2. El objeto location.
3. Actualizando la dirección.
4. El objeto history.

VI. El objeto document

Estudia el objeto document de JavaScript, que representa el contenido de la página web: su título, conjunto de imágenes, conjunto de hipervínculos, etc. Contenido:
1. Introducción.
2. La propiedad title.
3. El método write.
4. El conjunto images.

VII. El objeto form

Estudia el objeto form de JavaScript, que permite el acceso a la información manejada en los formularios que aparecen en las páginas web. Explica cómo validar la información del formulario con JavaScript antes de enviarla al servidor web. Contenido:
1. Formularios HTML.
2. El conjunto forms.
3. La propiedad elements.
4. Validar la información.
5. ¿Cuándo realizar la validación?
6. Tipos de validación.

VIII. Modelo de Objetos del Documento (DOM)

Estudia el concepto de Modelo de Objetos del Documento o DOM, indicando que los navegadores representan los documentos HTML en forma de un árbol de nodos, en el que la raíz es el objeto document. Describe los métodos esenciales de la interfaz de programación del DOM, como son los métodos para seleccionar elementos (getElementById, getElementsByTagName, getElementsbyClassName) y los que permiten obtener o establecer el valor de los atributos (getAttribute y setAttribute). Contenido:
1. El árbol del documento.
2. Tipos de nodos y de relaciones.
3. Obtener elementos.
4. Obtener y establecer atributos.

IX. Manipulación del DOM

Describe las propiedades y métodos del DOM que permiten manipular el contenido de una página web una vez se ha cargado, sin necesidad de volver a solicitarla al servidor web. Se estudia cómo recorrer el árbol del documento, cómo modificar el valor de los nodos de texto o cómo crear nuevo contenido. Contenido:
1. Recorrer el árbol del documento.
2. Modificar el valor de los nodos.
3. Crear, eliminar y reemplazar nodos.
4. El método innerHTML.
5. Modificar el formato dinámicamente.

X. Buenas prácticas

Se describen buenas prácticas a la hora de escribir código JavaScript y trabajar con el DOM de un documento: separar el código JavaScript del código HTML; escribir los manejadores de evento en el mismo código JavaScript y no como atributos de las etiquetas HTML; detectar las características con las que es compatible el navegador del usuario en lugar de intentar detectar el propio modelo de navegador, etc. Para afianzar todas estas prácticas, la lección finaliza describiendo un ejemplo completo en el que se simula una galería de imágenes. Contenido:
1. Separar estructura y comportamiento.
2. Añadir los manejadores de evento.
3. Detectar características de los navegadores.
4. Ejemplo: Una galería fotográfica.
5. Ejemplo: La estructura de la página.
6. Ejemplo: El código JavaScript.

XI. Test Final Fundamentos de JavaScript

Test final del módulo.

I. Introducción

Proporciona ejemplos de páginas web reales, disponibles en Internet; se presenta el lenguaje HTML y las hojas de estilo en cascada (CSS), enfatizando la utilización correcta de cada uno de estos lenguajes. Finalmente, se indican las aplicaciones informáticas que requiere un diseñador de páginas web y cuáles se utilizarán a lo largo del curso. Contenido:

1. Un paseo por la Web.
2. ¿Qué es el HTML?
3. Hojas de estilo en cascada (CSS).
4. ¿Qué herramientas necesitamos?

II. Estructura del código HTML

Se describe la sintaxis de las etiquetas HTML y la posibilidad de que presenten atributos para establecer propiedades o características adicionales. Se introducen las etiquetas HTML fundamentales que describen una página web, como html, head y body y la etiqueta de párrafo de texto p. Además, se indica cómo guardar una página web y establecer el título de la misma. Contenido:

1. Las etiquetas HTML.
2. Guardar la página web.
3. Introducir párrafos de texto.
4. Las etiquetas tienen atributos.
5. El título de la página.

III. Texto

Se describen las características del texto de una página web utilizando el lenguaje HTML. Se estudia la distribución en párrafos y títulos de la página y se indica la posibilidad de escribir texto predefinido (aquel que se muestra en la página web tal como lo hemos escrito en el código). También se estudia la incorporación de líneas separadoras y los llamados elementos de frase, que sirven para describir el texto de una forma semántica (por ejemplo, para representar una cita, una abreviatura, aplicar énfasis, etc.). Contenido:

1. Títulos.
2. Texto predefinido.
3. Líneas separadoras.
4. Elementos de frase.

IV. Incorporar imágenes en la página web

Se estudia la etiqueta img del lenguaje HTML, utilizada para incorporar imágenes en el contenido de una página web, describiendo los formatos gráficos adecuados para este propósito. Se describe cómo optimizar una imagen para la Web (resolución, modo de color y compresión). Finalmente, se presenta la posibilidad de incluir imágenes como fondo de la página o de otros elementos, para lo que se utiliza las hojas de estilo en cascada (CSS). Contenido:

1. Introducción.
2. Resolución y modo de color.
3. Formatos gráficos.
4. La etiqueta img.
5. Especificar las dimensiones de la imagen.
6. Imágenes como fondo.

V. Hipervínculos o enlaces

Se introduce el concepto de hipervínculo, fundamental para poder navegar entre páginas web, y cómo podemos representarlo en el código HTML. Se estudian los distintos tipos de hipervínculos: vínculos a otras páginas del sitio web, vínculos a páginas externas al sitio web, vínculos a lugares concretos de una página web o vínculos que apuntan a direcciones de correo electrónico. Finalmente, se comprueba que las imágenes también pueden funcionar como hipervínculos. Contenido:

1. Introducción.
2. Vínculos a otras páginas web.
3. Vínculos a una parte de una página web.
4. Vínculos a lugares de Internet.
5. Vínculos a direcciones de correo electrónico.
6. Imágenes que actúan como vínculos.

VI. Introducción a CSS (Parte 1)

Se introduce el lenguaje de las hojas de estilo en cascada (CSS), resaltando que son la herramienta que un diseñador web debe utilizar para aplicar formato a las páginas web. Se describe la sintaxis de las reglas CSS, compuestas de un selector y de la declaración de la regla; cómo enlazar las hojas de estilo con el código HTML; cómo aplicarlas; y los conceptos de herencia y cascada, esenciales para entender esta tecnología. Contenido:

1. ¿Qué son las hojas de estilo en cascada (CSS)?
2. Las reglas de CSS.
3. Enlazar CSS con el código HTML.
4. Aplicar las reglas de estilo.
5. Herencia y cascada.

VII. Introducción a CSS (Parte 2)

Se introducen los dos elementos fundamentales en la composición o maquetación de una página web: las etiquetas HTML div y span. Seguidamente se estudia cómo crear selectores complejos en las reglas CSS, así como el uso de las pseudoclases y pseudoelementos CSS. Contenido:

1. Las etiquetas HTML div y span.
2. Selectores avanzados de CSS.
3. Pseudoclases y pseudoelementos CSS.

VIII. Dar formato al texto de las páginas web

Se describen las propiedades más utilizadas a la hora de dar formato al texto de las páginas web mediante las hojas de estilo en cascada (CSS): la elección de fuentes o tipos de letra, el tamaño del texto, realces, alineación, color, etc. Contenido:

1. Fuentes.
2. La propiedad abreviada font.
3. Propiedades de texto.
4. Decoración del texto y color.

Listas

Se introducen los distintos tipos de listas HTML que podemos incorporar en una página web: listas sin numerar, listas numeradas y listas de definición. También se estudian las propiedades CSS que afectan al aspecto de las listas. Contenido:

1. Listas sin numerar.
2. Listas numeradas.
3. Listas anidadas.
4. Imágenes como viñetas de una lista.
5. Listas de definiciones.

IX. Tablas

Introduce las tablas como elemento adecuado a la hora de presentar información tabular en una página web. Describe las etiquetas HTML relacionadas con las tablas y las propiedades CSS para aplicar el formato y aspecto deseado. Se presenta el concepto de modelo de caja, fundamental a la hora de diseñar páginas web mediante CSS. Se recuerda que las tablas no son la herramienta adecuada para maquetar una página web excepto si deseamos compatibilidad con navegadores antiguos. Contenido:

1. Introducción.
2. Estructura de una tabla HTML.
3. Bordes, espacio entre celdas y relleno.
4. Color o imagen de fondo.

X. Temas avanzados sobre tablas

Estudia conceptos avanzados en el trabajo con tablas en páginas web: se indica cómo establecer las dimensiones de la tabla, su número de columnas, etc. y cómo afecta estos detalles al cargar la tabla en la página web; la posibilidad de unir celdas en dos o más filas o columnas; crear tablas anidadas, es decir, una tabla en el interior de otra tabla, etc. Contenido:

1. Establecer las dimensiones de la tabla.
2. Título y pie de tabla.
3. Especificar el número de columnas.
4. Unir celdas.
5. Tablas anidadas.

XI. Frames

Describe cómo dividir la página web en frames o marcos a través del código HTML, de forma que sea posible mostrar en pantalla más de una página web al mismo tiempo. Aunque es una técnica que no se recomienda actualmente, un buen diseñador web tiene que conocer el código correspondiente a los frames. Además, se estudia el uso correcto de los iframes. Contenido:

1. El conjunto de frames.
2. Propiedades de los frames.
3. Bordes para los frames y contenido alternativo.
4. Iframes.

XII. Posicionamiento mediante CSS (Parte 1)

Describe la forma clásica de maquetar o distribuir los elementos de una página web mediante posicionamiento CSS. En este caso, se estudia el uso de los elementos flotantes (propiedad float) y del clearing o desplazamiento. Contenido:

1. Introducción.
2. Elementos flotantes.
3. El clearing.
4. El código CSS.

XIII. Posicionamiento mediante CSS (Parte 2)

Describe otros métodos de posicionamiento CSS, como el posicionamiento absoluto, relativo y fijo. A diferencia de los elementos flotantes, en este caso la posición de los elementos viene dada por coordenadas x e y. También es posible crear solapamiento de elementos a través del índice z. Contenido:

1. Posicionamiento estático.
2. Posicionamiento relativo.
3. Posicionamiento absoluto.
4. Posicionamiento fijo.

XIV. Test Final Fundamentos del HTML y CSS
Test final del módulo.

I. Introducción

Relata la situación actual de la Web, en la que tiene gran relevancia las páginas dinámicas e interactivas, convirtiéndose prácticamente en aplicaciones web. Para desarrollar ese tipo de páginas, los estándares HTML y CSS han tenido que evolucionar, convirtiéndose en HTML5 y CSS3. También explica el papel que juega el lenguaje de programación JavaScript, como medio o herramienta para utilizar estas nuevas tecnologías. Contenido:
1. La evolución de la Web.
2. Estándares web.
3. HTML5 y CSS3.
4. JavaScript.
5. Editor de código.

II. Introducción a JavaScript

Explica la forma de incluir código JavaScript en las páginas web, para lo que se utiliza la etiqueta script, así como preparar código alternativo para aquellos navegadores que no pueden ejecutarlo o que lo tienen desactivado. También se introducen conceptos fundamentales de programación, como variables, tipos de datos, operadores y cuadros de diálogo sencillos. Contenido:
1. La etiqueta script.
2. Contenido alternativo.
3. Variables.
4. Tipos de datos.
5. Operadores.
6. Cuadros de diálogo.

III. Fundamentos de programación

Estudia las estructuras de control y cómo definir funciones en JavaScript. También se explica el ámbito de las variables, aclarando la diferencia entre una variable global y una variable local; así como el uso de funciones anónimas. Contenido:
1. Estructuras de decisión.
2. Expresiones lógicas.
3. Estructuras de repetición.
4. Definir funciones.
5. Llamar funciones.
6. Ámbito de las variables.
7. Funciones en el interior de funciones y funciones anónimas.

IV. Objetos y Arrays en JavaScript

Estudia cómo utilizar los objetos en el lenguaje JavaScript, prestando especial atención a la jerarquía de objetos que proporciona el navegador. También se introduce el concepto de array, muy utilizado en programación. Contenido:
1. Introducción.
2. La jerarquía de objetos.
3. Propiedades y eventos.
4. Métodos.
5. Arrays.

V. Los objetos location e history

Estudia los objetos location e history de JavaScript. Introduce el concepto de URL. Contenido:
1. ¿Qué es una URL?
2. El objeto location.
3. Actualizando la dirección.
4. El objeto history.

VI. El objeto document

Estudia el objeto document de JavaScript, que representa el contenido de la página web: su título, conjunto de imágenes, conjunto de hipervínculos, etc. Contenido:
1. Introducción.
2. La propiedad title.
3. El método write.
4. El conjunto images.

VII. El objeto form

Estudia el objeto form de JavaScript, que permite el acceso a la información manejada en los formularios que aparecen en las páginas web. Explica cómo validar la información del formulario con JavaScript antes de enviarla al servidor web. Contenido:
1. Formularios HTML.
2. El conjunto forms.
3. La propiedad elements.
4. Validar la información.
5. ¿Cuándo realizar la validación?
6. Tipos de validación.

VIII. Modelo de Objetos del Documento (DOM)

Estudia el concepto de Modelo de Objetos del Documento o DOM, indicando que los navegadores representan los documentos HTML en forma de un árbol de nodos, en el que la raíz es el objeto document. Describe los métodos esenciales de la interfaz de programación del DOM, como son los métodos para seleccionar elementos (getElementById, getElementsByTagName, getElementsbyClassName) y los que permiten obtener o establecer el valor de los atributos (getAttribute y setAttribute). Contenido:
1. El árbol del documento.
2. Tipos de nodos y de relaciones.
3. Obtener elementos.
4. Obtener y establecer atributos.

IX. Manipulación del DOM

Describe las propiedades y métodos del DOM que permiten manipular el contenido de una página web una vez se ha cargado, sin necesidad de volver a solicitarla al servidor web. Se estudia cómo recorrer el árbol del documento, cómo modificar el valor de los nodos de texto o cómo crear nuevo contenido. Contenido:
1. Recorrer el árbol del documento.
2. Modificar el valor de los nodos.
3. Crear, eliminar y reemplazar nodos.
4. El método innerHTML.
5. Modificar el formato dinámicamente.

X. Buenas prácticas

Se describen buenas prácticas a la hora de escribir código JavaScript y trabajar con el DOM de un documento: separar el código JavaScript del código HTML; escribir los manejadores de evento en el mismo código JavaScript y no como atributos de las etiquetas HTML; detectar las características con las que es compatible el navegador del usuario en lugar de intentar detectar el propio modelo de navegador, etc. Para afianzar todas estas prácticas, la lección finaliza describiendo un ejemplo completo en el que se simula una galería de imágenes. Contenido:
1. Separar estructura y comportamiento.
2. Añadir los manejadores de evento.
3. Detectar características de los navegadores.
4. Ejemplo: Una galería fotográfica.
5. Ejemplo: La estructura de la página.
6. Ejemplo: El código JavaScript.

XI. Test Final Fundamentos de JavaScript

Test final del módulo.

XII. HTML5 y CSS3
Estudia las novedades que aportan HTML5 y CSS3 como evolución de los dos principales estándares web. De HTML5 se identifican los nuevos elementos semánticos, las características propias para reproducir elementos multimedia o las nuevas características de los formularios. En cuanto a CSS3 se ilustran las propiedades más interesantes (nuevos selectores, técnicas de diseño avanzadas, transiciones y transformaciones, etc.).

XIII. Elementos estructurales de HTML5

La lección empieza con el estudio del tipo de documento o doctype que indica que una página web sigue la especificación de HTML5. Después introduce uno a uno los elementos estructurales de HTML5 que permiten describir mucho mejor el contenido de una página web. Como ejemplo de ello, se vuelve a maquetar una página web en la que se habían utilizado elementos neutros div, sustituyéndolos por los nuevos elementos estructurales. Contenido:
1. Doctype de HTML5.
2. Evitando elementos div.
3. Descripción de los elementos estructurales HTML5.
4. Aplicar los elementos estructurales HTML5.
5. Modificar la hoja de estilo en cascada.

XIV. Trabajando con esquemas HTML5

Se indica cómo ajustar el código de una página web que utiliza los elementos estructurales HTML5 para que sea mostrada correctamente por los navegadores antiguos, en especial por Internet Explorer 8 y anteriores. Seguidamente se estudian otros elementos semánticos de HTML5, como mark, progress, etc. A continuación se describe el significado que tiene anidar elementos estructurales, por ejemplo, para representar un artículo o post en un blog y los comentarios que tiene relacionados. La lección finaliza con el concepto del esquema del documento. Contenido:
1. Aplicar estilo a los elementos estructurales HTML5.
2. Otros elementos semánticos de HTML5.
3. Elementos article anidados.
4. El esquema del documento.

XV. Formularios HTML5

Describe las nuevas características de los formularios en HTML5: nuevos controles, nuevos atributos y validación nativa. También se indica cómo simular estas características para el caso de que el usuario utilice un navegador antiguo (empleando código JavaScript) y las pseudoclases de CSS3 útiles al trabajar con formularios de este tipo. Contenido:
1. Introducción.
2. Nuevos controles de formulario.
3. Nuevos atributos.
4. Compatibilidad con navegadores antiguos.
5. Pseudoclases CSS3 relacionadas con los formularios HTML5.

XVI. Dibujar con el elemento canvas (Parte 1)

Presenta el elemento canvas de HTML5, que sirve para dibujar en la superficie de la página web sin necesidad de ningún complemento adicional, como Flash o Silverlight. Describe los métodos básicos de dibujo: líneas, rectángulos, arcos y trazados. Contenido:
1. Introducción.
2. Una interfaz de dibujo 2D.
3. Dibujar rectángulos.
4. Dibujar trazados.
5. Colores de trazo y de relleno.

XVII. Dibujar con el elemento canvas (Parte 2)

Continúa estudiando otras características del elemento canvas de HTML5: estilos de línea, utilizar gradientes de color, utilizar patrones y dibujar imágenes o texto en la superficie de la página. Contenido:
1. Estilos de línea.
2. Gradientes.
3. Patrones.
4. Dibujar imágenes.
5. Dibujar texto.

XVIII. Vídeo y audio en HTML5

Estudia cómo incorporar vídeo y audio mediante las nuevas etiquetas HTML5. Con esas etiquetas es el navegador el que reproduce de forma nativa el contenido multimedia, sin necesidad de utilizar ningún complemento o plugin externo. Se estudian los distintos formatos y códecs que están disponibles y se indica cuáles son los que utilizan los principales navegadores. También se proporcionan indicaciones para completar el código de forma que los navegadores antiguos puedan reproducir el contenido multimedia mediante vídeo Flash. Contenido:
1. Introducción.
2. La etiqueta video.
3. Formatos y códecs de vídeo.
4. Códecs de audio.
5. La etiqueta audio.
6. API multimedia.

XIX. Introducción a CSS3 (Parte 1)

Presenta varias características que aparecen en la versión Nivel 3 de las Hojas de estilo en cascada (CSS3): nuevos selectores, la posibilidad de redondear las esquinas de los elementos, aplicar sombras a los objetos y al texto, utilizar niveles de transparencia al especificar colores, especificar colores hsl o utilizar gradientes de color como imágenes de fondo. Contenido:
1. La evolución que representa CSS3.
2. Nuevos selectores CSS3.
3. Esquinas redondeadas y sombras.
4. Colores.
5. Gradienes de color.

XX. Introducción a CSS3 (Parte 2)

Sigue presentando otras características de CSS3, como la posibilidad de incrustar fuentes junto a la página web, aplicar múltiples imágenes de fondo a los elementos y aplicar transiciones y/o transformaciones (cambiar el tamaño, rotar, inclinar o desplazar un elemento) entre distintos estados. Contenido:
1. Incrustación de fuentes.
2. Dónde obtener fuentes.
3. Múltiples imágenes de fondo.
4. Transiciones.
5. Transformaciones.

XXI. Introducción a CSS3 (Parte 3)

En la primera parte de la lección se presentan otras propiedades CSS3 interesantes, como background-size, box-sizing, column-count y column-width. Después se introducen algunas herramientas que facilitan la labor del desarrollador: el reset o normalize y todo lo relacionado con PostCSS. Contenido:
1. Establecer el tamaño de la imagen de fondo con background-size.
2. La propiedad box-sizing.
3. Columnas.
4. Reset y Normalize.
5. PostCSS, Autoprefixer, cssnext y CodePen.

XXII. Especificación HTML5

Especificación oficial de HTML5. Extraída de:

https://www.w3.org/TR/html52/

XXIII. Test Final HTML5 y CSS3

Test final del módulo.

SELECCIONAR Y COMPRAR CURSO
Contenido del curso
SELECCIONAR Y COMPRAR CURSO

Trabajamos con los mejores

Colaboramos con el Ministerio de trabajo (Cámara de Comercio, SEPE) en ofrecerte los mejores cursos online de formacion.

Más de 14 años enseñando

Innova lleva más de una década desarrollando nuevas técnicas de aprendizaje con un objetivo: que mejores como profesional.

Cientos de alumnos mejoraron su CV

Por nuestras academias y cursos online han pasado cientos de alumnos que consiguieron mejorar sus competencias profesionales.

100% INTERACTIVO

Desarrollados bajo una herramienta de autor propia ofreciendo la mayor interactividad del mercado. Para un aprendizaje atractivo, rápido e intuitivo.

APRENDIZAJE PROGRESIVO

Desde 0 hasta el 100% de la materia sin lagunas, aplicando constantemente lo aprendido desde la primera lección y avanzando sin dificultades.

COMPLETOS Y EFECTIVOS

Muy visuales y estructurados que contienen todas las herramientas necesarias para conseguir el objetivo educativo deseado. Además en todo momento el alumno podrá ver el progreso de su aprendizaje.

MATERIAL DIDÁCTICO

Cursos que permiten aprender progresivamente, desde 0 hasta el 100% de la materia sin lagunas, aplicando constantemente lo aprendido desde la primera lección y avanzando sin dificultades.

PARA CONTACTAR NADA de códigos, solo

teléfono,
whatsapp
o mail

  • +34 881 887 508
  • +34 682 15 67 79
  • info@innovaconsultores.es
© 2021-[year] Innova Training. Todos los derechos reservados. Desarrollo web by Innova Consultores
Aviso Legal  |  Política de privacidad  |  Política de cookies