20480: Programacion en HTML5 con JavaScript y CSS3

Abierto

Días de aplicación: Lunes Martes Miércoles Jueves Viernes Sábado


Modalidad: Presencial y En linea


Cupo: Abierto


Este curso proporciona una introducción a HTML5, CSS3 y JavaScript. Este curso ayuda a los estudiantes a adquirir habilidades básicas de programación HTML5 / CSS3 / JavaScript. Este curso es un punto de entrada tanto en la aplicación web como en las rutas de capacitación de las aplicaciones de la Tienda Windows. El curso se enfoca en usar HTML5 / CSS3 / JavaScript para implementar la lógica de programación, definir y usar variables, realizar bucles y ramificaciones, desarrollar interfaces de usuario, capturar y validar la entrada del usuario, almacenar datos y crear aplicaciones bien estructuradas. Los cursos se seleccionan para respaldar y demostrar la estructura de varios escenarios de aplicación. Su objetivo es centrarse en los principios y componentes / estructuras de codificación que se utilizan para establecer una aplicación de software HTML5. Este curso utiliza Visual Studio 2017, que se ejecuta en Windows 10.

Perfil de audiencia

Este curso está dirigido a desarrolladores profesionales que tienen de 6 a 12 meses de experiencia en programación y que están interesados ​​en desarrollar aplicaciones usando HTML5 con JavaScript y CSS3 (aplicaciones de la Tienda Windows para Windows 10 o aplicaciones web).

Al término del curso

  • Explicar cómo usar Visual Studio 2017 para crear y ejecutar una aplicación web.
  • Describa las nuevas características de HTML5 y cree y diseñe páginas HTML5.
  • Agregue interactividad a una página HTML5 utilizando JavaScript.
  • Cree formularios HTML5 usando diferentes tipos de entrada y valide la entrada del usuario usando atributos HTML5 y código JavaScript.
  • Envíe y reciba datos hacia y desde una fuente de datos remota mediante el uso de objetos XMLHTTPRequest y Fetch API.
  • Diseñe páginas HTML5 con CSS3.
  • Cree un código JavaScript bien estructurado y fácil de mantener.
  • Escriba código JavaScript moderno y use babel para que sea compatible con todos los navegadores.
  • Use API HTML5 comunes en aplicaciones web interactivas.
  • Cree aplicaciones web que admitan operaciones fuera de línea.
  • Cree páginas web HTML5 que puedan adaptarse a diferentes dispositivos y factores de forma.
  • Agregue gráficos avanzados a una página HTML5 usando elementos Canvas y usando gráficos vectoriales escalables.
  • Mejore la experiencia del usuario agregando animaciones a una página HTML5.
  • Use Web Sockets para enviar y recibir datos entre una aplicación web y un servidor.
  • Mejore la capacidad de respuesta de una aplicación web que realiza operaciones de larga duración mediante el uso de procesos de Web Worker.
  • Use WebPack para empaquetar aplicaciones web para producción.


Módulo 1: Descripción general de HTML y CSS

La mayoría de las aplicaciones web modernas se basan en una base de páginas HTML que describen el contenido con el que los usuarios leen e interactúan, las hojas de estilo para que el contenido sea visualmente agradable y el código JavaScript para proporcionar un nivel de interactividad entre el usuario y la página, y la página y el servidor. El navegador web utiliza el marcado HTML y las hojas de estilo para representar este contenido, y ejecuta el código JavaScript para implementar el comportamiento de la aplicación. Este módulo revisa los conceptos básicos de HTML y CSS, y presenta las herramientas que este curso utiliza para crear páginas HTML y hojas de estilo.

 

Módulo 2: Crear y diseñar páginas HTML

Las tecnologías que forman la base de todas las aplicaciones web (HTML, CSS y JavaScript) han estado disponibles durante muchos años, pero el propósito y la sofisticación de las aplicaciones web han cambiado significativamente. HTML5 es la primera revisión importante de HTML en 10 años, y proporciona un medio muy adecuado para presentar contenido para aplicaciones web tradicionales, aplicaciones que se ejecutan en dispositivos móviles de mano y también en la plataforma Windows 10. Este módulo presenta HTML5, describe sus nuevas características, muestra cómo presentar contenido mediante el uso de las nuevas características en HTML5 y cómo diseñar este contenido mediante CSS.

 

Módulo 3: Introducción a JavaScript

HTML y CSS proporcionan información estructural, semántica y de presentación para una página web. Sin embargo, estas tecnologías no describen cómo el usuario interactúa con una página utilizando un navegador. Para implementar esta funcionalidad, todos los navegadores modernos incluyen un motor de JavaScript para admitir el uso de scripts en una página. También implementan Document Object Model (DOM), un estándar W3C que define cómo un navegador debe reflejar una página en la memoria para permitir que los motores de scripts accedan y alteren el contenido de esa página. Este módulo presenta programación de JavaScript y DOM.

 

Módulo 4: Crear formularios para recopilar y validar la entrada del usuario

Las aplicaciones web con frecuencia necesitan recopilar las aportaciones de los usuarios para realizar sus tareas. Una página web debe ser clara y concisa sobre la información que se espera de un usuario para minimizar los malentendidos frustrantes sobre la información que el usuario debe proporcionar. Además, todas las entradas deben validarse para garantizar que se ajustan a los requisitos de la aplicación. En este módulo, aprenderá a definir formularios de entrada utilizando los nuevos tipos de entrada disponibles en HTML5. También verá cómo validar los datos mediante el uso de atributos HTML5. Finalmente, aprenderá cómo realizar una validación de entrada extendida utilizando el código JavaScript y cómo proporcionar comentarios a los usuarios cuando su entrada no es válida o no coincide con las expectativas de la aplicación.

 

Módulo 5: Comunicación con un servidor remoto

Muchas aplicaciones web requieren el uso de datos almacenados en un sitio remoto. En algunos casos, puede acceder a estos datos simplemente descargándolos de una URL específica, pero en otros casos los datos se encapsulan en el sitio remoto y se hacen accesibles a través de un servicio web. En este módulo, aprenderá cómo acceder a un servicio web utilizando el código JavaScript e incorporar datos remotos en sus aplicaciones web. Observará dos tecnologías para lograr esto: el objeto XMLHttpRequest, que actúa como un contenedor programático alrededor de las solicitudes HTTP a sitios web remotos, y Fetch API, que simplifica muchas de las tareas involucradas en el envío de solicitudes y la recepción de datos. Debido a que la API Fetch y el objeto XMLHttpRequest son API asincrónicas Primero aprenderá cómo manejar tareas asincrónicas con el objeto Promise, las funciones de flecha y la nueva sintaxis asincrónica / en espera que le permite manejar solicitudes asincrónicas como si estuvieran sincronizadas.

 

Módulo 6: Estilo HTML5 usando CSS3

Diseñar el contenido que muestra una página web es un aspecto importante para hacer que una aplicación sea atractiva y fácil de usar. CSS es el mecanismo principal que utilizan las aplicaciones web para implementar el estilo, y las características agregadas a CSS3 admiten muchas de las nuevas capacidades que se encuentran en los navegadores modernos. Cuando CSS1 y CSS2.1 eran documentos únicos, el World Wide Web Consortium ha optado por escribir CSS3 como un conjunto de módulos, cada uno de los cuales se centra en un solo aspecto de la presentación, como el color, el texto, el modelo de cuadro y las animaciones. Esto permite que las especificaciones se desarrollen gradualmente, junto con sus implementaciones. Cada especificación define propiedades y valores que ya existen en CSS1 y CSS2, y también nuevas propiedades y valores. En este módulo, examinará las propiedades y los valores definidos en varios de estos módulos, los nuevos selectores definidos en CSS3 y el uso de pseudo-clases y pseudo-elementos para refinar esas selecciones.

 

Módulo 7: Crear objetos y métodos usando JavaScript

La reutilización del código y la facilidad de mantenimiento son objetivos clave para escribir aplicaciones bien estructuradas. Si puede cumplir con estos objetivos, reducirá los costos asociados con la escritura y el mantenimiento de su código. Este módulo describe cómo escribir código JavaScript bien estructurado mediante el uso de características del lenguaje, como espacios de nombres, objetos, encapsulación y herencia. Estos conceptos pueden parecerle familiares si tiene experiencia en un lenguaje como Java o C #, pero el enfoque de JavaScript es bastante diferente y hay muchas sutilezas que debe comprender si desea escribir código que se pueda mantener.

 

Módulo 8: Crear páginas interactivas utilizando API HTML5

La interactividad es un aspecto clave de las aplicaciones web modernas, lo que le permite crear sitios web atractivos que pueden responder rápidamente a las acciones del usuario, y también adaptarse a la ubicación del usuario. Este módulo describe cómo crear aplicaciones web HTML5 interactivas que pueden acceder al sistema de archivos local, permitir al usuario arrastrar y soltar datos en elementos de una página web, reproducir archivos multimedia y obtener información de geolocalización.

 

Módulo 9: Agregar soporte sin conexión a aplicaciones web

Las aplicaciones web dependen de poder conectarse a una red para obtener páginas web y datos. Sin embargo, en algunos entornos, una conexión de red puede ser intermitente. En estas situaciones, puede ser útil permitir que la aplicación continúe funcionando mediante el uso de datos almacenados en caché en el dispositivo del usuario. HTML5 ofrece una opción de nuevas opciones de almacenamiento del lado del cliente, incluido el almacenamiento de sesión y el almacenamiento local, y un mecanismo de almacenamiento en caché de recursos llamado Application Cache. En este módulo, aprenderá a usar estas tecnologías para crear aplicaciones web robustas que puedan continuar ejecutándose incluso cuando no haya una conexión de red disponible.

 

Módulo 10: Implementación de una interfaz de usuario adaptativa

Una de las características más duraderas de la web es su naturaleza temporal. Por primera vez, el monopolio del teclado y el mouse está bajo desafío, y eso significa cuestionar cómo se diseñan las interfaces de usuario. Puede desarrollar una aplicación web en una computadora con un monitor grande de alta resolución, un mouse y un teclado, pero otros usuarios pueden ver e interactuar con su aplicación en un teléfono inteligente o tableta sin un mouse, o tener un monitor con Una resolución diferente. Los usuarios también pueden querer imprimir páginas de su aplicación. En este módulo, aprenderá a crear un sitio web que adapte el diseño y la funcionalidad de sus páginas a las capacidades y al factor de forma del dispositivo en el que se está visualizando. Verá cómo detectar el tipo de dispositivo que se usa para ver una página y aprenderá estrategias para diseñar contenido que se dirija efectivamente a dispositivos particulares.

 

Módulo 11: Creación de gráficos avanzados

Los gráficos interactivos de alta resolución son una parte clave de la mayoría de las aplicaciones modernas. Los gráficos pueden ayudar a mejorar la experiencia del usuario al proporcionar un aspecto visual al contenido, haciendo que un sitio web sea más atractivo y fácil de usar. La interactividad permite que los elementos gráficos de un sitio web se adapten y respondan a las aportaciones del usuario o los cambios en el entorno, y es otro elemento importante para retener la atención del usuario y su interés en el contenido. Este módulo describe cómo crear gráficos avanzados en HTML5 mediante el uso de Gráficos vectoriales escalables (SVG) y la API de Microsoft Canvas. Aprenderá a usar elementos relacionados con SVG como, y para mostrar contenido gráfico en una página web. También aprenderá a permitir que el usuario interactúe con elementos SVG mediante el uso de eventos como eventos de teclado y eventos de mouse. La API de Canvas es algo.

 

Módulo 13: Implementación de comunicación en tiempo real mediante el uso de sockets web

Las páginas web solicitan datos a pedido de un servidor web mediante el envío de solicitudes HTTP. Este modelo es ideal para crear aplicaciones interactivas, donde la funcionalidad es impulsada por las acciones de un usuario. Sin embargo, en una aplicación que necesita mostrar información en constante cambio, este mecanismo es menos adecuado. Por ejemplo, una página de acciones financieras no tiene valor si muestra precios que tienen incluso unos pocos minutos de antigüedad, y no puede esperar que un usuario actualice constantemente la página que se muestra en el navegador. Aquí es donde los sockets web son útiles. La API de Web Sockets proporciona un mecanismo para implementar la comunicación bidireccional en tiempo real entre el servidor web y el navegador. Este módulo presenta los sockets web, describe cómo funcionan y explica cómo crear una conexión de sockets web que se pueda utilizar para transmitir datos en tiempo real entre una página web y un servidor web.

 

Módulo 14: Realización de procesamiento en segundo plano mediante el uso de trabajadores web

El código JavaScript es una herramienta poderosa para implementar la funcionalidad en una página web, pero debe recordar que este código se ejecuta cuando se carga una página web o en respuesta a las acciones del usuario mientras se muestra la página web. El navegador ejecuta el código, y si el código realiza operaciones que requieren un tiempo considerable para completarse, el navegador puede dejar de responder y degradar la experiencia del usuario. HTML5 presenta a los trabajadores web, que le permiten descargar el procesamiento para separar subprocesos en segundo plano y, por lo tanto, permiten que el navegador siga respondiendo. Este módulo describe cómo operan los trabajadores web y cómo puede usarlos en sus aplicaciones web.

 

Módulo 15: Empaquetado de JavaScript para el despliegue de producción

El uso de modelos le permite crear aplicaciones grandes y complejas. El progreso del lenguaje en la versión de ECMAScript6 permite que la aplicación de compilación simplifique el proceso de construcción de la aplicación. Sin embargo, el uso de módulos ECMAScript6 y otras características aún no es compatible con todos los navegadores. Herramientas como Node.js, Webpack y Babel permiten el uso de nuevas funciones de lenguaje junto con soporte para diferentes navegadores para evitar dañar la experiencia del usuario. En este módulo presentaremos la teoría detrás de estas herramientas, cuando necesitemos usarlas, y las diferentes opciones de uso. Al final del módulo, veremos cómo usar estas herramientas para escribir código ECMAScript6 compatible con todos los navegadores.

1 a 3 meses de experiencia creando aplicaciones web, incluida la escritura de código JavaScript simple

1 mes de experiencia creando aplicaciones cliente de Windows

1 mes de experiencia con Visual Studio 2017

 


¿Necesitas información? Contáctanos


Enviar