Programación MASTER: de la nada al mundo real

Conoce qué temas tratarás en el curso y cómo avanzaremos a lo largo de ellos.

Entiende cuáles son las bases de este curso y por qué está estructurado de un modo y características particulares.

Este curso otorga múltiples certificaciones confome el nivel de progreso que alcances. Conócelas todas y aprende cómo acceder a ellas.

Instalemos el primer IDE llamado Lazarus para programar en Pascal, junto al compilador FPC y creemos el primer programa.

Instalaremos, de forma opcional, el IDE VisualStudio para programar en C++.

Instalaremos herramientas neceasrias para programar en JavaScript utilizando el IDE Apache NetBeans.

Instalaremos aquí el IDE Apache NetBeans que nos servirá para trabajar con Java, JavaScript, HTML y CSS.

Ya lo hiciste en Pascal, luego en C++ y ahora lo harás en Java: ¡Hola mundo!

Comprende las diferencias estructurales de los distintos lenguajes de programación.

Ahora veremos cómo crear una página simple en HTML5.

Comenzaremos a aprender a mostrar información de salida por consola. Primero en Pascal, luego trasladaremos eso a otros lenguajes.

Mostraremos datos por consola en C++.

Mostremos información por consola en Java.

En HTML no existe la salida estándar de datos, todo se muestra en páginas Web. Veamos cómo mostrar salidas estáticas.

Hora de empezar a mejorar la impresión de datos por consola, primero en Pascal, y luego lo verás en otros lenguajes.

Veamos cómo imprimir múltiples líneas en la salida estándar de Java.

Solo mostrar texto no sirve de mucho, es hora empezar a interactuar con el usuario.

La forma de trabajo en C++ es un tanto particular. Veamos cómo lograr lo mismo que fácilmente logramos en Pascal.

Java es un lenguaje particular, proque todo es Orientación a Objetos, por lo que la entrada de datos es algo curiosa en este lenguaje.

HTML no es un lenguaje de programación, solo estructura información. El verdadero lenguaje de programación Web es JavaScript. Es hora de conocerlo y empezar a hacer cosas con él.

Hora de empezar a trabajar con números enteros.

Hagamos algunos cálcuos simples con la información que nos brinda el usuario.

Hagamos ahora lo mismo que en Pascal pero ahora con C++. Veamos que por más que la sintaxis de los lenguajes es diferente, el trasfondo es exactamente el mismo.

Leer números en Java es un tanto particular, veamos cómo replicar lo mismo que hemos hecho en Pascal y en C++.

Si Java es particular, pues JavaScript se lleva el premio gordo. Veamos cómo leer números en este lenguaje y cómo operar matemáticamente con ellos.

Las variables pueden acumular valores, o sea, tomar su valor anterior y modificarlo. Por ejemplo, cuando en un videojuego acumularos puntos, o cuando depositamos o extraemos dinero de una cuenta bancaria, se modifican los valores previos decreciéndolos o incrementándolos.

Veamos cómo aplicar la misma idea aprendida en Pascal ahora en C++.

No es lo mismo un número sin coma o punto flotante, llamado entero (que usamos para contar, como 1, 2, 3 y así) que uno con ella, llamado número real (1.5, 3.245, etc.). Veamos cómo Pascal gestiona estos tipos de datos.

Así como en Pascal, en todo lenguaje hay diferencias entre un número entero y uno de punto flotante. Veamos cómo C++ los gestiona.

Ahora toca ver cómo Java gestiona los enteros y los reales.

Hay variables que no varían, o sea, que mantienen su valor constante. Veamos para qué sirven y cómo usarlas en Pascal.

Obviamente C++ tiene también constantes, veamos cómo usarlas.

En Java las constantes se conocen como variables finales. Veamos cómo aplicarlas.

JavaScript también tiene constantes, veamos cómo usarlas. En conjunto, también veamos cómo este lenguaje gestiona los tipos numéricos.

Si no aplicas todo lo visto, no aprenderás nada. Hora de poner manos a la obra con los primeros ejercicios.

Leer variables una a una no siempre es útil. A veces debemos facilitar la vida del usuario para que ingrese los datos del modo más simple posible. Veamos cómo leer más de una variable a la vez en Pascal.

Entendamos un poco más a fondo como Pascal lee datos desde la entrada estándar para profundizar en la mecánica que hay detrás.

El código fuente se vuelve cada vez más y más complejo. Escribir notas en lenguaje coloquial es clave, sobre todo si se trabaja en equipo, para facilitar la vida de quién ha de leer un código. Veamos cómo escribir comentarios y qué tipos de ellos tenemos disponibles.

Dividir un número entre otro no es una tarea tan simple como puede parecer. Veamos qué es la división entera, la real y el módulo entre dos números.

Veamos ahora como C++ gestiona las divisiones numéricas y cómo usar comentarios en el código fuente.

Java, al igual que Pascal y C++, también tiene diversos tipos de divisiones matemáticas. Veamos cómo usarlas.

JavaScript no se queda atrás, por lo que también gestiona las divisiones matemátcias de diversos modos, y también contiene comentarios.

Leer caracteres (letras, números, símbolos) es importante. Veamos cómo lo hace Pascal para entrenarte en ello y luego aplicarlo en diversos lenguajes.

C++ maneja los caracteres de un modo un tanto distinto a Pascal, pero las bases son las mismas. Asimismo introduce la herramietna de secuencias de escape que resulta muy útil.

Java, al venir de C++, también tiene secuencias de escape.

A veces no es necesario especificar manualmente el tipo de una variable, sino que podemos dejar que C++ lo infiera. Veamos cómo lograrlo y para qué sirve.

Java también es capaz de inferir tipos de variables sin tener que explicitarlos.

Veamos cómo JavaScript gestiona los caracteres o secuencias de escape.

Es hora de que nuestros programas puedan elegir caminos distintos de acción en función de ciertas condiciones preestablecidas. Veamos cómo Pascal usa la sentencia IF.

Diagramar, o sea, planificar, es clave. Veamos cómo dibujar el flujo de nuestro programa.

Veamos ahora como C++ usa la sentencia IF.

Veamos como Java utiliza IF. Spoiler: es igual que en C++.

JavaScript también tiene IF, y es igual que en C++ y Java.

Dibujemos ahora un diagrama de flujo más complejo.

Concatenar un IF a otro no es difícil, pero requiere práctica y atención.

Pongamos en práctica lo visto hasta el momento.

Concatenemos IF ahora en C++.

Java también concatena IF. Veamos cómo aplicarlo.

Concatenemos IF en JavaScript y veamos cómo funciona.

Existe una sentencia que permite escribir los IF concatenados de otro modo, la cual en Pascal se llama CASE. Veamos cómo funciona.

En C++ la sentencia CASE pasa a llamarse SWITCH. Veamos su sintaxis y algunas diferencias en lo visto con Pascal.

En Java, al igual que en C++, tenemos el SWITCH. Veamos cómo aplica.

JavaScript también tiene SWITCH.

Veamos cómo mejorar las condiciones de selección usando tipos booleanos, y operadores lógicos de Pascal.

En C++ también tenemos booleanos y operadores lógicos. Cambian de sintaxis respecto de Pascal, pero en esencia son lo mismo.

Veamos cómo Java aplica los operadores lógicos y el tipo booleano.

JavaScript también opera lógicamente con booleanos y operadores lógicos. Asimismo, tiene algunas particularidades interesantes a diferencia de Pascal, C++ y Java.

Veamos cómo Java compara valores.

Veamos cómo incorporar un IF dentro de otro.

Hasta ahora nuestros programas no pueden hacer nada complejo porque carecen de la capacidad de iterar o repetir código ya ejecutado. A partir de ahora aprenderemos cómo iterar, comenzando con Pascal y luego avanzando a otros lenguajes.

Crearemos un pequeño juego de adivinar un número en una serie de intentos posibles, utilizando lo aprendido hasta el momento.

Un FOR puede estar contenido dentro de otro, lo cual abre un gran abanico de posibilidades, pero a su vez, complejiza las cosas.

Evidentemente C++ también tiene su sentencia FOR que, aunque en esencia funciona igual que en Pascal, su sintaxis cambia bastante.

El FOR de Java, como no podía ser de otro modo, es igual que el de C++.

Aunque JavaScript, al nacer de C++, comparte muchas cosas con dicho lenguaje y también con Java (al menos en su sintaxis), algunas cuestiones hay que tener en cuenta. Veamos el FOR en JS.

Veamos cómo crear números al azar en Pascal usando RANDOM.

Veamos cómo generar números al azar en C++.

Veamos cómo generar números al azar en Java.

Veamos cómo generar números aleatorios en JavaScript.

Hora de trabajar duro. Proponemos aquí un primer proyecto para aplicar todo lo visto hasta el momento.

Si bien la sentencia FOR resulta útil, no es suficiente. Algunas veces se requiere repetir un código indefinidamente hasta que cierta condición se cumpla, y a priori, no se puede saber cuándo ocurrirá eso. Veamos cómo lograrlo a través de la sentencia WHILE.

Veamos cómo C++ utiliza el WHILE.

Apliquemos ahora el WHILE en Java.

Apliquemos WHILE ahora en JavaScript.

El bucle WHILE repite la ejecución de un bloque de código mientras una condición se cumpla. Ahora Pascal nos propone un bucle similar que repite un bloque de código hasta que una condición se cumpla, el cual se llama REPEAT-UNTIL.

Pascal nos proponía el bucle REPEAT-UNTIL como alternativa a WHILE. C++ no tiene un bucle repeat, sino que su análogo es DO-WHILE, que sigue siendo un WHILE pero con una estrucutra inversa: la condición se evalúa al final del bloque y no al principio, similar a REPEAT.

Java utiliza la misma sintaxis que C++ para las estructuras básicas, por lo que su bloque DO-WHILE es el mismo.

JavaScript también funciona similar a C++.

El segundo proyecto de aplicación. Mejoraremos el programa anterior añadiendo características más avanzadas.

Ampliemos la cantidad de tipos de datos que nos provee Pascal, comenzando por los subrangos.

Hora de conocer los tipos de datos estructurados, empezando por los arreglos.

En JavaScript las cosas son muy distintas a Pascal. Veamos sus arreglos.

Veamos cómo recorrer un arreglo para encontrar un elemento, del modo más básico y simple posible.

Recorrer arreglos en JavaScript es muy similar a Pascal.

Veamos algunas cuestiones con ejemplos prácticos de arreglos.

Veamos algunos ejemplos prácticos con arreglos en JS.

Pascal tiene un tipo de arreglos que se pueden crear en tiempo de ejecución. Veamos cómo funcionan.

Ahora complejicemos los arreglos para trabajar con tablas, grillas o matrices.

Los arreglos de más de una dimensión en JS se trabajan como arreglos de arreglos. Veamos los pormenores.

Veamos un algoritmo para rellenar un arreglo con números al azar sin que ninguno se repita dentro de él.

Apliquemos el mismo algoritmo ahora en JS.

Veamos cómo depurar un programa usando Lazarus debugger.

Depurar un sitio Web requiere del uso conjunto de NetBeans y Chrome y, aunque se puede depurar directo en el navegador, hacerlo con el IDE es más robusto y beneficioso.

Veamos un ejemplo práctico de lectura de datos paso a paso.

Las letras no son números, pero podemos generarlas aleatoriamente de todos modos. Veamos cómo.

Veamos cómo usar una variable string para acumular texto e ir generando una salida dinámica.

Te proponemos aquí un proyecto bastante interesante y retador. Crearás el Truco de las 21 cartas, de modo que tu programa siempre adivinará una letra que elegirás en la pantalla.

He aquí un siguiente proyecto más retador que el anterior. Crearás el juego MasterMind en su versión de Pensador. Veamos los detalles.

Ahora mejorarás el proyecto MasterMind, admitiendo letras repetidas en los códigos. Esto añade más dificultad al jugador, y es un tanto más complejo de programar.

Existe una versión de FOR especialmente pensada para recorrer arreglos automáticamente. Veamos cómo la aplica Pascal.

JavaScript también tiene un FOR especial para recorrer arreglos.

Hora de modularizar los programas. Empecemos entendiendo qué es un subprograma, cómo crearlo y cómo invocarlo.

Un procedimiento puede recibir información al ser invocado, la cual se inserta mediante parámetros. Veamos cómo utilizarlos.

Las funciones son similares a los procedimientos, con la salvedad de que generan un resultado al final de su ejecución. Veamos su enorme utilidad.

Ahora que puedes tener variables, constantes y tipos de datos dentro y fuera de los subprogramas se añaden los conceptos de alcance y sombreado. Veamos qué significa todo esto.

Veamos la utilidad de una función booleana, también conocida como predicado.

Los parámetros pueden funcionar también como variables de salida para un procedimiento o una función. Veamos esto, ya que amplía las posibilidades y con ello la complejidad.

Existen casos en los que debemos utilizar un identificador antes de poder declararlo, lo cual no es posible en Pascal. Para solucionar esto existe la declaración adelantada con FORWARD.

Los ejemplos prácticos siempre son bienvenidos.

Más de un subprograma puede tener el mismo nombre siempre que varíe algo en su firma. Veamos cómo usar esto y por qué es útil.

En JavaScript todo son funciones, no hay procedimientos per se, pero sí hay funciones que trabajan como procedimientos. Veámoslo.

En JavaScript todo subprograma es una función, solo que las funciones que no arrojan un reultado (undefined) las interpretamos como procedimientos. El resto, operan igual que las funciones de Pascal, con una salvedad: la sentencia return. 

Todo lenguaje tiene el asunto del alcance de identificadores. Veamos cómo lo gestiona JavaScript.

Las cosas cambian bastante con JavaScript en lo que a parámetros refiere.

Mejoraremos aún más los MasterMind. Veamos ahora cómo reestructurar el código para hacer uso de los subprogramas en él.

Un nuevo tipo de datos se añade, veamos como declarar enumerados.

Apliquemos de modo practico las enumeraciones.

Un nuevo tipo de datos estructurado surge, el cual te dotará de mayor versatilidad a la hora de programar. La orientación a objetos empeiza a asomar muy sutilmente.

Apliquemos de modo práctico los registros.

JavaScript no tiene enumeraciones como Pascal, ni tampoco registros, pero hay modos de emular dicho comportamiento utilizando la versatilidad de este lenguaje.

El arreglo con tope es un tipo de datos que se logra implementar combinando el uso de arreglos y registros a la vez. 

Usemos el ingenio para lograr tener arreglos con tope en JavaScript del mismo modo que en Pascal. En esencia esto no sería necesario por en JS todos los arreglos son dinámicos, pero eso es algo para ver en el futuro.

Hay particularidades de los arreglos de JS que resultan interesantes y útiles.

Ahora crearemos la versión Adivinador de este juego, en la cual nuestro programa deberá adivinar un código que nosotros inventamos en función de las notas que le brindamos como pistas.

Hora de construir proyectos más grandes, y para eso necesitamos separar las partes de éstos en archivos distintos en vez de tener un código espagueti en un solo lugar.

JavaScript, al trabajar en conjunto con HTML, maneja ciertas complejidades en tanto a la modularización. Veamos cómo iniciar con esto.

Profundicemos un poco más en la modularización de HTML.

Finalmente, unificaremos el MasterMind en modo Adivinador y en modo Pensador para que, ahora desde un solo juego, se pueda seleccionar cómo se quiere jugar.

El Juego de la vida es un autómata celular diseñado por el matemático británico John Horton Conway en 1970. Resulta muy interesante de programar con lo aprendido hasta el momento.

Continuaremos desarrollando el funcionamiento del juego.

Aún queda trabajo por hacer.

Ahora sí, terminamos el proyecto.

Veamos ahora la versión Web de este proyecto.

Programarás dos versiones del juego Buscaminas, una en Pascal y otra Web. Ambas son muy similares pero con variaciones en su estructura.

JavaScript no manipula archivos, por lo que este aprendizaje será exclusivo de Pascal. Veamos cómo funciona la persistencia de datos.

Comencemos trabajando con los archivos más simples: el texto plano.

Profundicemos ahora en los archivos de texto plano.

Crearemos un Bloc de notas en Pascal.

Pasemos ahora a archivos con tipos personalizados.

Aprendamos más a fondo el tipado de archivos.

Crearemos una base de datos manualmente usando lo aprendido con archivos.

Veamos como borrar contenido de un archivo.

Crearemos un Sistema de Gestión de Bases de Datos (SGDB), o en inglés un DBMS.

Por cuestiones de seguridad, JavaScript no maneja archivos, pero sí puede guardar datos en el navegador. Comencemos a ver cómo funciona esto.

Trabajemos con registros en el navegador.

Hora de comenzar a interactuar de un mejor modo con el usuario. HTML empieza a asomarse.

Estructurar la información a almacenar es clave.

Tenemos que generar tablas para mostrar datos al usuario. Veamos cómo lograrlo en HTML.

Crearemos un procesador de textos básico en HTML.

Emularás el sistema realizado en Pascal pero ahora versionándolo a JavaScript con HTML.

Hora de acercarnos aún más a la orientación a objetos. Aunque todavía falta, ya es momento de comenzar a trabajar con estruturas dinámicas. Amados por muchos, odiados por muchos más, presentamos aquí a los punteros.

Nuestros primeros y primitivos objetos. La memoria dinámica con registros amplía muchísimo el abanico de opciones.

Una estructura lineal dinámica en la que es posible añadir y quitar objetos.

Veamos los distintos casos de anexamiento de nodos.

Eliminar nodos también tiene sus compejidades. 

Reestructuremos el código de nuestro Bloc de notas y apliquemos memoria dinámica.

Manipular la memoria dinámicamente tiene varios riesgos, y es factible de muchos errores, de esos que uno no sabe dónde está la falla. Veamos cómo realizar testeos para verificar la gestción correcta de la memoria RAM.

En JavaScript siempre has estado usando punteros sin darte cuenta. Ahora veámoslo claramente.

Veamos cómo construir listas en JS.

Repacemos y profundicemos el uso de undiades en Pascal.

Nos acercamos más y más a los objetos. Los Tipos Abstractos de Datos son la base para avanzar. Comencemos a comprenderlos a fondo.

JavaScript incorpora una herramienta avanzada de modularización. Veámosla en detalle.

Existe un modo sencilllo de concatenar strings con valores de variables y otros elementos.

Analizar la estructura de un string es muy útil. Para ello existen las expresiones regulares. Veamos qué herramientas nos provee cada lenguaje.

Trabajaremos un proyecto completo desde cero. Te lo presentamos al detalle aquí.

Introduciremos en esta clase un concepto totalmente nuevo: DISEÑO de Software. Si bien lo haremos de manera simple y sin ir demasiado a fondo, esta será una clase con mucho contenido, y que te irá preparando como programador/a a un nivel mucho mayor que el simple hecho de conocer un lenguaje concreto.

Definiremos así las entidades que deberán existir en nuestros sistema, su base de datos o estructura de persistencia, y cómo dichos datos se relacionarán entre sí.

Habiendo diseñado  el sistema y comenzado con la estructura de módulos independientes, en esta clase le daremos código a esos módulos a fin de queden funcionales y listos para pasar a la siguiente etapa.

El concepto de colecciones ha sido tocado ya en el curso en diversas oportunidades pero de forma implícita, ahora es momento de verlo explícitamente y comprender a fondo cómo funciona el asunto de tener grupos o estructuras de ciertos tipos de datos.

Teniendo el diseño listo y la estructura de las colecciones que implementaremos en nuestro sistema, es momento de darles funcionalidad, para poder avanzar en la siguiente etapa del desarrollo de este software.

Habiendo cumplido con las dependencias previas, es momento de diseñar y programar los gestores de mensajes (salida del sistema) y formato. Si bien esto no es complejo, es de suma importancia comprender cómo se diseña de manera tal que sea simple y a la vez potente.

Desde el diseño conocemos hace tiempo las estructuras que existirán en la base de datos y cómo se relacionarán a través, justamente, de un diseño relacional. Es momento de escribir el código fuente que le dará funcionalidad a esta estructura y permitirá que el programa guarde los datos y los lea, manteniendo las relaciones en todo momento.

El módulo que se encarga de gestionar todo, de unir a los módulos anteriores en un trabajo que permita ejecutar todo lo que el programa debe hacer y además interactuar con el usuario. Sin duda, todo un reto por programar. Finalmente, para que el sistema funcione, es necesario implementar el programa principal, es decir, el archivo con el bloque BEGIN|END que es donde la ejecución inicia, la puerta de entrada.

Implementaremos el mismo sistema ahora en JavaScript y HTML.

Construiremos un TAD que represente a un docente.

Trabajaremos las listas encadenadas ahora como TADs.

Veremos las bases de las pilas y las colas, que son estructuras lineales muy útiles.

Hora de conocer una estructura muy importante, no lineal: el ABB.

Eliminar nodos de un árbol binario no es cuestión sencilla, más aún si es de búsqueda, porque ha de mantener su estructura ascendente.

En este proyecto trabajarás sobre el anterior para mejorar su implementación interna usando ABBs.

Crearás algunos TADs simples en JavaScript para incorporar esta visión a dicho lenguaje.

¿Qué pasa si dentro de una función o procedimiento lo invocas a sí mismo?

Para entender la recursividad hay que entender la pila de llamadas.

Usemos esta nueva herramienta en JavaScript.

Hay cuestiones que JavaScript hace muy a su modo, por lo que es importante aprender Programación Orientada a Objetos muy bien antes de aplicarla en dicho lenguaje.

Empecemos a comprender qué son los objetos.

Conozcamos ahora una nueva herramienta: las clases.

¿Cómo restringimos el acceso a miembros de una clase?

Usemos ahora las clases para crear una lista encadenada.

Aprenderás a usar claes internas aplicándolas a listas encadenadas.

Veamos como automatizar el recorrido de nuestras estructuras.

Pascal tiene una herramienta muy útil a la hora de estructurar clases. Veámos qué son las propiedades y cómo nos facilitan el trabajo.

Reestructuremos un antiguo programa para adaptarlo a nuestra nueva tecnología de orientación a objetos.

Continuamos trabajando sobre un sistema ya existente mejorando su tecnología.

No todos los miembros de una clase dependen o existen en objetos. Veamos qué es esto.

Un patrón de diseño interesante que permite hacer que, dada una clase, solo pueda existir un objeto de ella y no otro.

Un arduo proyecto para crear el juego de la Batalla Naval. Veamos los detalles.

JS es muy particular en su tratamiento con objetos.

Modernicemos el Adivinador ahora con objetos.

JS tiene un modelo de objetos basado en prototipos. Veamos qué es esto.

¿Cómo crear un SINGLETON en JS?

La POO requiere aún más profundidad.

Los tipos dinámicos son uno de los mejores beneficios de la POO.

Las interfaces añaden una capa más a la versatilidad de la POO.

Veamos más en detalle cómo se aplica en la práctica el uso de interfaces.

Veamos como los objetos se pueden visualizar de modos generales.

El polimorfismo es otra de las cualidades principales de la POO.

Otro tipo de clases, de las cuales no se pueden crear objetos, son las clases abstractas. ¿Para qué sirve algo así?

Los genéricos son una herramienta importante en lenguajes modernos.

Traslademos el concepto de genéricos a las colecciones de objetos.

Los bloques try-catch son moneda corriente en todos los lenguajes. Veamos cómo aplicarlos ahora en Pascal.

Veamos como lanzar excepciones y crear las propias.

JavaScript tiene un modelo de objetos un poco distinto a lo que tienes en Pascal, Java, C# o C++. Es bueno conocerlo y tener el contraste.

Veamos cómo JS utiliza bloques try-catch.

El formato JSON es importantísimo en el internet actual.

Crearás tu primer programa con interfaz gráfica de usuario.

Utilicemos capmos de texto en nuestras primeras ventanas.

Crearemos un formulario con varios campos.

Controlemos un poco el funcionamiento de los componentes gráficos.

Los campos de texto son insuficientes, necesitamos más.

Componentes comunes para elegir o marcar opciones.

Las listas desplegables son muy útiles, por lo que es importante conocerlas.

Mostrar varias opciones de las cuales se pueda elegir uno o más elementos también es importante.

Hay ciertos cuadros de diálogo de uso común que ya están predefinidos en LCL.

Los cuadros de diálogo para abrir y guardar archivos ya están predefinidos.

Los diálogos predefinidos son muy útiles, pero insuficientes. Es necesario poder crear nuestros propios diálogos.

Los paneles son contenedores de componentes.

Brindar diversas opciones al usuario a través de menús es imprescindible.

Las tablas permiten mostrar muchos datos organizados. 

El uso de imágenes ayuda mucho a crear interfaces gráficas vistosas e intuitivas.

A veces no es suficiente tener componentes colocados en tiempo de diseño y se requiere generarlos en tiempo de ejecución. Veamos cómo lograr esto.

Las acciones son una alternativa interesante al modelo de eventos.

Crear filtros a la hora de mostrar mucha información es necesario para no abrumar al usuario o facilitar su trabajo.

Deberás crear una calculadora simple, pero con una funcionalidad eficiente.

Hora de empezar a entender HTML.

Entendamos a fondo cómo se vinculas unas páginas con otras.

Una página no solo se vincula o enlaza con otras páginas, sino que se enlaza dentro de sí misma con distintas secciones.

Veamos cómo insertar barras de progreso.

Las tablas son importantes en toda interfaz gráfica.

El ingreso de información por parte del usuario es tarea cotidiana.

Los eventos de formulario son importantes para enviar información a la aplicación Web.

Hay elementos no visibles en las páginas Web pero que contienen información importante.

Cómo se ubican elementos y estructura una página es clave de comprender.

El texto enriquecido es imprescindible, ya que solo texto plano no resulta visualmente atractivo, o incluso no resulta útil para ciertos casos.

Colocar imágenes en un sitio Web es algo básico. Entendamos cómo gestionarlo.

Definir áreas clicables dentro de una imágen es interesante, y puede resultar útil en ciertos casos.

Abordar las imágenes tiene más de un modo.

Definir el ícono del sitio Web es importante, porque da identidad de marca.

Aprender a leer la documentación oficial para buscar soluciones y saber, por cuenta propia, cómo resolver un problema concreto es imprescindible en el mundo actual.

Hacer más de una tarea a la vez puede ser imprescindible en el mercado actual.

Veamos cómo crear cuadros de diálogo en HTML.

Los cuadros de diálogo no son suficientes a la hora de crear ventanas internas en HTML.

Veamos cómo insertar videos en una página HTML.

Veamos cómo insertar audios en HTML.

Veamos cómo arrastrar elementos y soltarlos en otro lado de HTML.

Canvas es un elemento de HTML5 que es importante dominar si quieres ir más allá en el desempeño de HTML.

Manipulemos dibujos en un canvas.

Usemos eventos de teclado dentro de un canvas.

Tomar una imagen y dibujarla en un canvas puede ser muy útil, sobre todo en ámbitos de juegos.

Hagamos una práctica utilizando HTML canvas.

Movamos imágenes dentro de una Web con distintos métodos.

HTML da estructura, JavaScript da funcionalidad, y CSS da visibilidad y mejoras estructurales. Es hora de aprender esta tercera pata de la tríada Web.

Vamos con las bases de CSS, para elegir qué elemntos HTML se quieren estilizar.

Definir identificadores de elemntos HTML así como clases de estilos es imprescindible.

Modificar la fuente del sitio es importante.

Aprendamos a fijar y posicionar los elementos dentro de la página.

Z-Index permite indicar qué elemento va sobre otro.

Establecer fondos a los contenedores HTML es importante para colorear el sitio.

Entendamos cómo CSS entiende los elementos HTML.

Cómo se disponen los componentes dentro de los contenedores es importante.

Creemos menús HTML usando CSS, ya que HTML no dispone de un componente menú propiamente dicho.

Veamos cómo crear barras de navegación.

Hagamos algunas prácticas utilizando lo visto hasta ahora.

Usemos varios colores para crear degradados.

Usemos imágenes para crear bordes con diseños elaborados.

Cómo un elemento cambia de estado y estilo, o sea, como transiciona de uno a otro, aporta dinamismo.

Las transformaciones permiten crear animaciones en los elementos.

HTML no tiene ningún elemento menú, pero podemos crearlo con CSS.

HTML no tiene tooltips propiamente dichos, hay que crearlos manualmente.

Crear un panel con pestañas resulta muy vistoso y útil.

Los iconos aportan valor en ciertos contextos.

Mostrar columnas de texto puede resultar útil.

Cómo CSS mide el tamaño de los componentes es importante.

Veamos como CSS utiliza flexbox.

CSS permite definir algo similar a las variables.

CSS permite seleccionar elementos HTML por sus atributos.

CSS tiene algunas herramientas interesantes que haz de conocer.

Los elementos CSS también tienen algunas cuestiones más profundas interesantes de verificar.

Obtén una certificación valiosa para el mercado laboral.