Programación desde cero, Desarrollo Front y Backend práctico

Aprenderás que es una interface gráfica de usuario, que tipos de interfaces existen, que significan los pixeles y porque son importantes asi como la gran importancia que tiene el html básico en las aplicaciones modernas.

Explicación detallada de las etiquestas, como enriquecerlas con atributos de color, enlaces a otras paginas y agregar imágenes.

Se explica como se estructura un programa que pueda ser portable para instalarse en un servidor o otro ordenador, se incluyen nuevas carpetas, imágenes y se enseña como trabajar con las referencias a archivos internos del programa.

Se ecplica como programar la interacción entre diferentes objetos de una aplicación, con enlaces entre paginas internas, usando rutas relativas y links.

Se deja como recurso descargable la priemra version de la aplicación.

Escribir el código base para crear un pequeño juego de encender y apagar un bombillo y comprender como podemos darle instrucciones a los ordenadores.

Vamos a escribir el codigo necesario para que los botones respondan a eventos y lleven acabo una tarea especifica, usando el lenguaje JavaScript

Se explica para que sirve esta herramienta, cómo realizar la instalación y su estructura y funcionalidad básica.

Explicación detallada de cual es la estrucutra recomendada  y mas usada para los proremas, que tipos de carpetas y ficheros existe, como el ordenador sabe de que manera debe procesar los diferentes ficheros.

Se explica el programa que se va a crear y se realiza una preuba para demostrar como funcionará al final la aplicación.

Vamos a escribir la pagina de nuestro progrmaa de geolocalización y definir todos los elementos que lo componen, campos de texto, botones , parrafos y titulo.

Se incluyen las etiquestas Script y se definen dos funciones de java script.

Se define todas las acciones que debe hacerl el programa para obtener la posicion del usuario cuando le dan click al boton y mostrarla en el parrafo del resultado.

Se explica porque es importante el CSS, en que consiste y como se usan para conseguir un estilo visual armonioso en las páginas de nuestras aplicaciones

Se ecplica porque es importante separar los diferentes ficheros que contienen codigo de diferentes leguages. Se crea una nueva carpeta y se independiza el codigo css en un fichero aparte, adicional se hacen las preubas y se enseña como referenciar el fichero .css

Se enseña como separar el codigo javaScript en un fichero .js y como referenciarlo desde la página html.

Se hace un breve repaso sobre o que hemos creado hasta el momento con el objetivo de que el estudiante comprenda en que punto estamos y poder cerrar la arte básica para pasar a ver temas mas avanzados de logica de programación.

Para cerrar el repaso se explica como aplicar el estilo global a todas la paginas de la aplicación, para que todas tengan la misma apariencia básica.

Se explica como acceder a la documentacion de una manera resumida y sencilla para que el estudiante pueda ser un poco mas autonomo a la hora de trabajar con diferetnes componentes y aprender a buscar la información correcta, segun las necesidades particulares de cada desafio.

Comprender los principales conceptos que usan los leguajes de programación, como variables, constantes, estructuras, algoritmos y en que consisten la lógica de programación en general.

Enseñar como se diseñan los algoritmos y porque son importantes en la lógica de programación y el diseño de aplicaciones en general.

Comprender los principales conceptos de programación, como variables, métodos, funciones, estructuras de control y los requsitos o requerimientos.

Definir como es el escenario real que se podria encontrar una persona en el mundo laboral cunado consigue su primer trabajo, definir como podria ser el proceso de contextualización y explicacion de los requerimientos del usuario respecto a la aplicación.

Explicar que son las historias de usuario, como comprenderlas que estructura tienen y como podrian entregarse estas historias en un escenario real.

Se explica el detalle de la aplicación, que es lo que espera el usuario, cuales son las reglas para calcular el credito y la hipoteca.

Con el objetivo de tener todo mas ordenado, se crea un directorio o carpeta par guardar todos los proyectos y se crea la aplicación app02

Para interacturar con el usuario es necesario crear una interface gráfica de usuario con un formulario que contenga campos de texto para ingresar los valores y mostrar el resultado de los calculos de la hipoteca.

Se explica en detalle como se compone una función y se escribe el fichero .js para escribir el programa de calculo de hipoteca.

Se explica en que consisten un variable, cuales son los posibles tipos de variables en java script y como los vamos a utilizar en la funcion de calculo de hipoteca.

Se explica brebemente que son los operacores matematicos y lógicos y como usar la documetnación de w3schol  respecto a este tema.

Enseñar como procesar el envio de los datos del formulario y como validar que se leen los datos correctamente.

Se concluye la lectura de los datos de entrada necesario para calcular la hipoteca y se dejan definidas las variables para proceder a aplicar las reglas de la historia de usuario.

Se crea un programa sencillo en javascript y html que calcule el valor de una hipoteca basado en la historia de usuario.

Se calcula la hipoteca mensual y se hacen las respectivas validaciones para ver que todo esta correcto.

Se escribe una nueva funcion javascript para presentar el resultado y se hace una breve recapitulación par comprender mejor el flujo, adicionalmente se dan algunos tips par trabajr mejor con el código.

El formulario resetea la pagina por defecto cuando se ejecuta y es necesario prevenir ese comportamiento para que no se pierdan los valores.

Dado que se ha modificado el comportamiento por defecto del formulario es necesario escribir una funcionalidad que limpie el formulario mediante un boton de reseteo.

Presetnar el objetivo de la sección y definir que es un framework y que tiene que ver boostrap para con los frameworks y el diseño.

Se explica para que sirven las etiquetas DIV cómo alternativa que nos ofrecen a las tablas y se explica como ha quedado el código final despues del ultimo reto para iniciar desde aquí.

Se estructura el documento de la vista de cálculo de hipoteca en 4 secciones diferentes para practicar con la etiqueta DVI.

Se explica que es el framework, como incluirlo en el proyecto, como seleccionar la ultima version, como analizar los ejemplos e identificar las clases.

Se enseña a modo de introducción como usar las clases de bootstrap para dar efecto a los elementos div, etiquetas y cajas de texto del formulario.

Se dibuja un diagrama básico para tener una idea más clara de la estructura deseada de las vistas.

Se instla de maenra local el framework de boostrap y se cambia la configuración y referenciacion en el proyecto.

Se enseña a modo general como identificar de manera correcta las clase boostrap en dependecia de las necesidades.

Se explica la nomenclatura básica para trabajar con márgenes y espacios.

Para conseguir un aspecto de cuadricula se usa el componente grid que es mas flexible que las tablas.

Se incluye un nuevo elemento llamado accordion que sirve para contener elementos y muestra el efecto de expandir y contraer, y se incluye el boton y la programación del boton para redirigir al formulario de contacto.

Se escribe una funcion JavaScript que permite formatear la salidad del calculo a dolar estadounidense y redondear a dos dígitos los decimales.

Es importante recapitular sobre las bases de las aplicaciones y no olvidar que al final, son algo sencillo, un conjunto de archivos identificados por un nombre un punto una extension y que se agrupan en una estructura de repositorios o carpetas y que le indican a un computador como llevar a  cabo una serie de tareas.

Cuando un programador da sus primeros pasos en el mundo laborar, se le suele conocer como un programador Junior y se espera que tenga la capacidad de ser autonomo y crear por sus propios medios unos minimos necesarios para inicar con una aplicación.

Para todos los proyectos se espera crear una aplicación mínima que sirve para mostrar la habilidad del programador y tambien como base para iniciar con el proyecto.

Las varaibles son la base fundamental de la programación y existen de diferentes tipos, numéricas, booleanas, arrays y de cadenada, de mnera similar las constantes tambien son de diferentes tipos, podriamos decir que son un tipo especial de variables, la principal diferencia es que toman un valor fijo y no cambia duarante la ejecucion del programa.

Las varaibles toman sentido cuando son usadas dentro de los programas, y en dependencia de donde se definen dependerá lo que hacen o como se muestran al usuario final.

Las variables toman sentido cuando el usuario puede interacturar con la aplicación mediante las funciones e ingresa valores que serán usados por la aplicación dentro de las funciones.

Los ordenadores ejecutan los programas basados en un punto de inicio, en el caso de las apliaciones web inician por el index.html, luego cargan los archivos con las diferentes extensiones y los ejecutan de izquierda a derecha, de arriba abajo, pero en los operadores matemáticos el orden es un poco especial.

Las estructuras de control IF, podriamos decir que son la base de la "inteligencia" que tiene un ordenador o computador, hacen uso de operadores aritmeticos y booleanos para evaluar expresiones y tomar desiciones en los programas y asi dirigir el flujo o "tomar desciciones"

Los operadores lógicos y los bloques if son la base de la "inteligencia" de las maquinas y es vital comprenderlos y ver como podemos escribir reglas de descición complejas.

En los requisitos nos pueden dar reglas de negocio complejas que debemos transcribir a leguaje de programación para que los ordenadores sepan como tomar las desciciones y ejecutar los bloques de código correctos y poder cumplir con su objetivo.

La negación es un operador lógico que sierve para evaluar condiciones estableciendo una relación de diferencia o negar el resultado de una evaluación lógica.

En esta clase se hace una demostración de como se ejecutan los programas, cual es el punto de inicio, como el ordenador ejecuta las instrucciones linea por linea y se recapitula sobre lo que es programar.

Los programas tiene un sentido lógico y un orden de ejecución no solo de los archivos y las lineas de código sino tambien del orden en que se ejecutan ciertas tareas, par conseguir esto se hace uso de las funciones, en esta clase se escriben funciones para ubicar las reglas que hemos escrito anteriormente sobre los operadores lógicos y las estructuras de control.

LAs aplicaciones toman sentido cuando las convertimos en algo interactivo, cuando ofrecemos al usuario la posibilidad de que pueda oprimir un boton, ingresar un valor, solicitar una inscripcion etc. En esta calse vamos a ver como convertimos los ejercisios previos en una aplicación que simula una encuesta de admisión para un club deportivo.

Los números que leemos de la interface del usuario vienen en formato texto y es necesario convertilos a números enteros o decimales para poderlos trabajar de manera correcta.

Los valores booleanos son de vital importancia en la programación y es necesario comprender como traducir el leguaje natural al leguaje que entienden los ordenadores, en esta clase se enseña como convertir una respuesta de si o no en un false o true.

La estatura de una persona es un valor fraccionado porque tiene un parte entera y una parte decimal si se da en metros, podriasmo decir que una persona mide 1.68 metros por ejemplo y para poderlo procesar en un programa tenemos que entender como convertilo antes.

Para conseguir que los programas sean simples debemos escribir funciones independientes que se encarguen de tareas individuales y concretas y para ello es necesario hacer uso de parametros y valores de retorno dentro de las funciones.

Para conseguir que el código sea mas limpo, se pueden escribir funciones genéricas que tomen deciciones en base a evaluaciones lógicas para llamar a las funciones correspondientes según la necesidad.

Para evitar errores inesperados por flujos no controlados es una buena practica establecer mecanismos de control haciendo uso de los bloques if y los operadores lógicos de manera combinada.

JavaScript permite manipular el DOM y cambiar propiedades de los elementos html, esto lo podemos hacer como aprte del flujo normal de un programa o basado en evaluaciones de reglas lógicas usando bloques IF.

Para comprender de una manera mas gráfica las estructuras de control se hace una breve recapitulación sobre algoritmos y se explican las estructuras de control en su forma y  los principales tipos de extructuras de control, como los bucles o ciclos while y for y los bloques try catch.

El cilo while es el mas sencillo de todos y se ejecuta mientras una condicion evaluada de un resultado verdadero.

Para detectar errores de una manera mas sencilla es necesario hacer un proceso de depuración del codigo que se conoce como debug y para ello es necesario instalar herramientas adicionales al ide y a nuestro equipo de desarrollo.

El debug o depuración del código nos permite ver de manera más grafica como se ejecutan linea por linea las aplicaciones, encontrar de manera sencilla posibles errores y evaluar que las varaibles tomen los varlores correctos.

Los ciclos for nos permiten simplificar el codigo dado que algo que normalmente tomaria muchas lineas de código para indicarselo al ordenador, lo podemos resumir a un par de lineas en un clico repetitivo for si conseguimos establecer la lógica correcta.

Todos los leguajes de programación ofrecen la posibilidad de proteger los programas de errores de manera similar mediante una estructura de control llamada try catch, que permiten proteger un bloque con un mecanismo que intente ejecutar las tareas y se en algun punto se presenta un error, lo puedan atrapar y darle un manejo adecuado.

La w3school, aparte de toda la documentación ofrece una cantidad de recursos interesantes entre ellos una herramietna para identificar de maenra sencilla los códigos de los colores para utilizarlos en nuestra aplicación, pero tambien noss propone una serie de ejercicios practicos para reforzar la lógica de programacion y una plataforma para probarlos de manera más sencilla.

Code.org es una plataforma pnesada para ayudar a desarrollar lógica de programación de una manera más visual, ofrece una plataforma en la que podemos ir creando código de manera asistida, arrastrando y soltando bloques que se traducen en código y ayudan a comprender y desarrollar mucho más sencillo la lógica de programación.

Se presenta una demostración del objetivo que se pretende conseguir en la clase y las historias de usuario que se van a trabajar.

Se enseña como aboradar el analisis de la historia de usuario.

Aprender como convertir un valor concreto a terminos porcetuales y como escribir una clase CSS para cambiar las porpiedades de un atributo.

Se realiza el un cambio de clase a un elemento html de manera dinamica teneinendo en cuenta la regla del negocio para pintar la alerta.

JSON significa Java script object notation y es muy importante para trasportar y manipular e intercambiar informacion en las aplicaciones.

Una de las grandes ventajas que nos ofrece javascript es poder manipular el DOM de manera dinamica en tiempo de ejecución y con ello podemos crear y modificar elementos del mismo, en este caso crearemos la tabla para listar los contactos.

Para almacenar la información y su posterior uso, en programacion existen los métodos Create, Read, Update and Delete pero estos metodos necesitan que se les inoforme con que registro en particular del conjunto de datos se esta trabajando, para ello se hace uso de un identificador unico para cada registro conocido como ID.

El localstorage y el sessionStorage, son mecanismos de almacenamiento temporal que ofrecen los navegadores, para almacenar información de maenra temporal, desde javascript podemos aprovecharlo para guardar de maenra temporal los registro e intercambiar informacion entre vistas.

El metodo Read pertenece a la R de los metodos CRUD y nos permite consultar los detalles de cada registro de cualquiera que sea la fuente de almacenamiento, en esta clase crearemos la vista para mostrar los detalles y el boton para ver los detalles.

Cuando se trabaja con vistas diferentes es necesario establecer un mecanismo apra enviar parámetros entre vistas, una tenica muy usada es enviar parametros como parte de la url.

El metodo Update representa la U en los metodos CRUD y nos permite modificar la información que tenemos guardada de los contactos.

El ultimo metodo de los CRUD es el Delete que representa la D y permite borrar por completo un registro de nuestra fuente de almacenamiento en nuestra aplicación.

Resetear el formuario al guardar los datos es una buena tencia para mejorar la experiencia de usuario.

Ene ste clase tambien se habla sobre la programación frontend y backend y se repsan algunos conceptos importantes generales del curso.