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 centra en el uso de HTML5/CSS3/JavaScript para implementar la lógica de programación, definir y usar variables, realizar bucles o bifurcaciones, desarrollar interfaces de usuario, capturar y validar la entrada de usuarios, almacenar datos y crear aplicaciones bien estructuradas. Los escenarios de laboratorio en este curso se seleccionan para admitir 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. En este curso se utiliza Visual Studio 2017 ejecutado 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).
Temario (35 hrs. Presenciales)
La mayoría de las aplicaciones web modernas se basan en 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.
Después de completar este módulo, los estudiantes podrán:
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.
Después de completar este módulo, los estudiantes podrán:
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.
Después de completar este módulo, los estudiantes podrán:
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 frustrantes malentendidos 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 las aplicaciones.
Después de completar este módulo, los estudiantes podrán:
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/de espera que le permite manejar solicitudes asincrónicas como si fueran síncronas.
Después de completar este módulo, los estudiantes podrán:
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.
Después de completar este módulo, los estudiantes podrán:
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.
Después de este módulo, los estudiantes podrán:
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.
Después de completar este módulo, los estudiantes podrán:
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.
Después de completar este módulo, los estudiantes podrán:
Una de las características más duraderas de la web es su naturaleza temporal. Por primera vez, el monopolio del teclado y el ratón 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 ratón y un teclado, pero otros usuarios pueden ver e interactuar con su aplicación en un teléfono inteligente o tableta sin ratón, 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.
Después de completar este módulo, los estudiantes podrán:
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, por ejemplo, y a 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 ratón.
La API de Canvas es algo diferente a SVG. La API Canvas proporciona un elemento y un conjunto de funciones de JavaScript que puede invocar para dibujar gráficos en la superficie del lienzo. Aprenderá cómo usar la API de Canvas y también descubrirá cuándo es más apropiado usar Canvas o SVG.
Después de completar este módulo, los estudiantes podrán:
Las animaciones son un elemento clave para mantener el interés de un usuario en un sitio web. Implementadas cuidadosamente, las animaciones mejoran la usabilidad de una página web y proporcionan comentarios visuales útiles sobre las acciones del usuario.
Este módulo describe cómo mejorar las páginas web mediante animaciones CSS. Aprenderá cómo aplicar transiciones a valores de propiedad. Las transiciones le permiten especificar el momento de los cambios de propiedad. Por ejemplo, puede especificar que un elemento cambie su ancho y alto durante un período de cinco segundos cuando el puntero del ratón se desplace sobre él. A continuación, aprenderá cómo aplicar transformaciones 2D y 3D a los elementos. Las transformaciones le permiten escalar, traducir, rotar y sesgar elementos. También puede aplicar transiciones a las transformaciones, de modo que la transformación se aplique gradualmente durante un período de animación especificado.
Al final de este módulo, aprenderá cómo aplicar animaciones de fotogramas clave a los elementos. Las animaciones de fotogramas clave le permiten definir un conjunto de valores de propiedad en momentos específicos durante una animación. Por ejemplo, puede especificar el color y la posición de un elemento en 0 por ciento, 33 por ciento, 66 por ciento y 100 por ciento del período de animación.
Después de completar este módulo, los estudiantes podrán:
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.
Después de completar este módulo, los estudiantes podrán:
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 código es ejecutado por el navegador, y si el código realiza operaciones que toman un tiempo significativo en 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.
Después de completar este módulo, los estudiantes podrá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.
(614) 235-83-51