Diplomado en Desarrollo Web Front End

Que es un navegador

•Que es una página WEB

•Que es HTML

•Que es CSS

•Que es Internet

•Que es un hosting

•Que es un dominio

Herramientas de trabajo (Documento)

•Editor de texto plano Visual Studio Code

•Extensiones

La primer página web

Etiquetas y su estructura.

•Estructura general de una página web (head, body y footer)

•Titulo de una página web

•Títulos y subtítulos en el contenido de una página web

•Párrafos, y etiquetas para fuentes.

•Encabezado

•Menú de navegación

•Secciones

•Artículos

•Barras laterales

•Pie de páginas.

•Span

•Address

HTML5

•Listas ordenadas

•Listas desordenadas

•Listas descriptivas

•Listas multinivel

•Hipertexto

•Hipermedia

•Enlaces intradocumentales

•Enlaces extradocumentales

•Mapas de imágenes

CSS3

•Desacoplamiento con etiqueta link

•Selectores

•Color de fondo

•Color de fuente

•Tamaños

•Modelo de caja

•Bordes

•Tablas

•Animaciones y transiciones

•Pseudoclases

Formularios

•Inpus

•Buttons

•Radiobutton

•Checkbox

•Select

•Datalist

•Optgroup

•Option

•Textarea

•Label

•Fieldset

BOOTSTRAP

•Configuración web y configuración local

•Tipografía

•Containers

•Filas

•Sistema de columnas

•Imágenes

•Navbars

•Tablas

•Formularios

•Iconos – Librería Font Awesome

•Google Icons

•Alerts

•Spinners

•Cards Bootstrap

•Carousel Bootstrap

Modal

•Estructura de Modal

•Imágenes y botones en Modal

•Entidades botón cierre

•Jumbotron

SASSS

•Introducción Sass

•Como usar Sass

•Variables Sass

•Mixins

•Imports

•Estructura de programación



Módulo 2: JAVASCRIPT

Aspectos generales de Javascript.

•Variables

•Scope (var, let, const)

•Operadores: Aritméticos, asignación, comparación

Estructuras condicionales

•If

•Else

•Else if

•Switch

Arrays y sus métodos

•Concat

•IndexOf

•Join

•LastIndexOf

•Pop

•Reverse

•Shift

•Slice

•Sort

•Splice

•ToString

•Unshift

•Split

Bucles

•For

•Foreach

•For of

•For in

•While

•Do While

Funciones

•Funciones con parámetros

•Funciones con return

•Funciones tipo flecha

•Funciones anidadas

•Funciones como parámetros

Formularios y eventos (listener)

•onblur

•onchange

•onclick

•ondblclick

•onfocus

•onkeydown

•onkeypress

•onkeyup

•onload

•onmousedown

•onmousemove

•onmouseout

•onmouseover

•onmouseup

•onreset

•onresize

•onselect

•onsubmit

•onunload

Objetos Javascript

•Propiedades

•Métodos

•Función constructora

DOM - Document Object Model

•getElementById

•getElementByTagName

•getElementByClassName

•innerHTML

•buscar elementos

•agregar elementos

•cambiar elementos

Canvas

•Formas

•Texto

•Rellenos

•Efectos

Geolocalización

•Posición

•Coordenadas

Intercambio de datos: JSON

•Notación

•Propiedades

•Objetos

•Arrays

Comunicación asincrónica

•async await

•promesas

•callbacks

Conexión con back end

•Conexión con PHP

•Conexión con MySQL

Formulario con Auth0

Programación Reactiva

Módulo 3: ANGULAR JS

Instalación

•Configuración

•Preparación del entorno de desarrollo

•estructura general de un proyecto Angular

Creación de Componentes

•Angular CLI

•CSS con scope

•integración con Bootstrap

•Integración con Font-awesome

•componentes anidados

Interacción entre componentes

•Decoradores

•Ciclo de vida

Directivas

•ngIf

•ngFor

•ngModel

•ngSwitch

•ngClass

•ngGenerate

•ngLint

Routing

•RouterLink

•RouterActive

Services

•Manejo de data mediante servicios

•Uso del constructor para usarlo en componentes

Pipes

•Uppercase y lowercase

•Slice

•Decimal

•Percent

•Currency

•Json

•Async

•Date

Conexión remota HTTP

•Método POST

•Método GET

•Método PUT

•Método DELETE

•Manejo de errores http

Integración con Angular Material

•Instalación

•Sistema de grillas