Paper encuentro 1
Introducción 1
Overview del programa 1
Objetivo principal 1
Objetivos específicos 1
Qué aprenderá el alumno 1
Enfoque 1
Esquema de estudios 2
Contenidos del programa 2
Internet 2
¿Qué es Internet? 2
¿Qué es una dirección IP? 2
Web 3
Páginas estáticas y dinámicas 4
Estáticas 4
Dinámicas 4
Front end y Back end 5
Front end (cliente) 5
Back end (servidor) 5
Full Stack 8
Entorno de trabajo local 9
Cuestionario 9
Introducción
Overview del programa
Objetivo principal
Este programa se conforma en base a la demanda actual de profesionales que puedan
comprender y llevar a cabo, de inicio a fin, el desarrollo de una aplicación web con
tecnologías de gran popularidad y vanguardia.
Objetivos específicos
● Desarrollo integral
○ Vas a aprender a planificar, desarrollar y publicar una aplicación web de
inicio a fin.
● Innovación
○ Iniciarás un proceso de trabajo sobre uno de los frameworks más populares y
de gran performance de la actualidad, que te permitirá separar tu desarrollo
en componentes y cargarlos de forma progresiva. React JS.
● Control de cambios
○ Podrás tener control sobre cada uno de los cambios realizados en el código
de tu aplicación mediante el manejo de repositorios.
● Bases de datos
○ Conocerás cómo insertar, actualizar, eliminar y consultar datos a una base
de datos relacional mediante el motor MySQL.
● APIs Rest
○ Vas a realizar el traspaso de datos entre tu entorno Back y Front mediante
APIs Rest, de esta forma podemos separar ambos entornos y trabajarlos de
manera separada.
● Despliegue automático
○ Aprenderás a configurar el despliegue automático de tu aplicación para que
cada cambio en tu repositorio de archivos se publique automáticamente.
Qué aprenderá el alumno
El alumno aprenderá a crear un sitio web desde su programación y maquetado, control de
cambio mediante manejo de repositorio y su posterior puesta en producción en un servidor
web.
Enfoque
El curso tiene un enfoque teórico-práctico para que en cada clase el alumno pueda obtener
los conocimientos y ponerlos en práctica para su rápida salida laboral.
1
Esquema de estudios
La formación está dividida en 24 encuentros teórico-prácticos conectados y alineados en
torno a un proyecto que se desarrolla durante toda la extensión del cursado.
Contenidos del programa
1. MÓDULO 1: Introducción, HTML y Estilos (encuentros 1 a 7)
a. Introducción
b. HTML
c. Hojas de estilos en cascada
2. MÓDULO 2: Programación WEB y base de datos (encuentros 8 a 14)
a. Programación WEB
b. PHP
c. Laravel
d. MySQL
e. APIs
3. MÓDULO 3: ReactJs, CI/CD (encuentros 15 a 24)
a. JavaScript
b. ReactJS
c. Servidores
Internet
¿Qué es Internet?
Internet se define como una gran “red de redes”, es decir, una red conectada a otra de
manera continua y simultánea.
https://nic.ar/es/enterate/novedades/que-es-internet
¿Qué es una dirección IP?
IP es la sigla correspondiente a Internet Protocol o, en español, Protocolo de Internet. Se
trata del protocolo de comunicación estándar de Internet, que establece que cada
dispositivo que se conecta a la gran red de redes debe tener un identificador numérico único
denominado dirección IP. De esta manera, los dispositivos se conectan entre sí e
intercambian información mediante sus respectivas direcciones IP.
https://nic.ar/es/enterate/novedades/que-es-direccion-ip
IPv4
Estas direcciones ocupan 32 bits dentro de cada paquete de datos, y tienen el siguiente
formato “111.111.111.111”. Es decir, se trata de 4 grupos de 8 bits cada uno, expresados en
decimal y separados por un “.”. Con este formato de 32 bits, es posible lograr un poco más
de 4000 millones de direcciones.
IPV6
Esta versión de IP tiene un espacio de direcciones de 128 bits, lo que equivale a 340
sextillones de direcciones. Esta nueva versión del Protocolo utiliza el formato de direcciones
2
2001:0db8:A:B:C:D:E:53, el cual se diferencia bastante del formato de las IP versión 4, ya
que las nuevas son 8 grupos de 16 bits cada uno, separados por “:” y expresados en
hexadecimal.
Consulta de IP en: cual-es-mi-ip.net
DNS
El sistema de nombres de dominio (The Domain Name System) es la guía telefónica de
Internet. Cuando solicitamos un dominio en el navegador como mundose.org los
navegadores web interactúan a través de direcciones de IP, y el servidor DNS traduce los
nombres de dominio a direcciones IP para que los navegadores puedan cargar recursos de
Internet.
Web
World Wide Web (también conocido como “la Web”), es un sistema de distribución de
documentos de hipertexto o hipermedia interconectados y accesibles a través de Internet.
Con un navegador web, un usuario visualiza sitios web compuestos de páginas web que
pueden contener textos, imágenes, vídeos u otros contenidos multimedia, y navega a través
de esas páginas usando hiperenlaces.
La World Wide Web (la Web) nació en el CERN, el Centro Europeo de Física Nuclear, en
Ginebra (Suiza), de la mano del ingeniero y físico británico Tim Berners-Lee como un
sistema de intercambio de datos entre los 10.000 científicos que trabajaban en la institución.
No tenía colores, ni fotos, ni videos. Tampoco había gráficos ni animaciones. Solo textos,
hipertextos y un conjunto algo confuso de menús. Una experiencia decepcionante.
3
Páginas estáticas y dinámicas
Estáticas
Las páginas web estáticas son básicamente informativas y están enfocadas principalmente
a mostrar una información permanente, donde el navegante se limita a obtener dicha
información sin poder interactuar con la página visitada. En las páginas web estáticas no se
utilizan bases de datos ni se requiere programación.
Dinámicas
Una web dinámica es aquella que contiene aplicaciones dentro de la propia web, otorgando
mayor interactividad con el navegante. Ejemplos de aplicaciones dinámicas son encuestas y
votaciones, foros de soporte, libros de visita, envío de e-mails inteligentes, reserva de
productos, pedidos on-line, atención al cliente personalizada ...
En las páginas dinámicas, el contenido suele generarse al momento de visualizarse,
pudiendo variar, mientras que en las estáticas el contenido suele estar predeterminado.
Lo importante de esta clasificación entre dinámicas y estáticas, es que una página web
estática la vamos a poder almacenar fácilmente, mientras que una dinámica requiere de un
lenguaje de programación y servidor que envíe código estándar que comprende el
navegador (HTML, CSS, JavaScript).
Lenguajes de programación del lado del servidor
● PHP
Es el lenguaje base que utilizan la mayoría de CMS o gestores de contenidos más
extendidos como WordPress, PrestaShop, Drupal o Joomla!
Lenguajes de programación del lado del cliente
● JavaScript
Actualmente y gracias a tecnologías como AJAX es utilizado para enviar y recibir
información del servidor.
4
** Pedir ejemplos de páginas estáticas y dinámicas **
Front end y Back end
Front end (cliente)
Es el desarrollador que va a manejar el desarrollo del lado del cliente (navegador).
El navegador entiende tres estándares:
● HTML (HyperText Markup Language)
● CSS
● JavaScript
A su vez, existen frameworks que facilitan y aceleran la tarea de desarrollo:
● Frameworks de CSS
○ Bootstrap
● Frameworks y librerías JS
○ ReactJS
○ VueJS
● Preprocesadores de CSS
○ Sass
○ Less
● Compiladores de JS
○ Webpack
○ Babel
5
Back end (servidor)
El back end es el desarrollador que va a trabajar del lado del servidor desarrollando toda la
lógica desde el momento en que el navegador hace una petición al servidor, este procesa y
retorna la información para ser mostrada en pantalla del usuario.
En este entorno no existen estándares sino que se trabaja mediante lenguajes de
programación sobre el cual también existen frameworks que facilitan y aceleran el trabajo, y
a su vez un back end también debe tener conocimientos básicos de infraestructura que
corresponde al lugar donde se va a publicar o desplegar (deploy) nuestra aplicación.
Lenguajes de programación comunes:
● PHP
● NodeJs
● Python
● .NET
Frameworks:
● Laravel
● Express
● Django
Base de datos:
● MySQL
● MongoDB
● PostgreSQL
Infraestructura:
● AWS
● Google Cloud
● Digital Ocean
● Heroku
6
7
** Preguntar que se imaginan entonces que es un desarrollador Full Stack **
Full Stack
El desarrollador full-stack no es una persona que maneja todas las herramientas, lenguajes
y frameworks al 100%, sino que combina conocimientos de back y de front y puede iniciar y
finalizar un proyecto combinando herramientas ambos lados.
8
** Encuesta **
Cuestionario
1. ¿Un desarrollador Full Stack es experto en servidores?
a. Si
b. No, tiene conocimientos básicos pero no se especializa en ese ámbito
2. ¿Un desarrollador Back end es quién va a trabajar únicamente con lenguajes de
programación del lado del servidor?
a. Si
b. No
3. ¿Cuáles de los siguientes son estándares entendidos por el navegador?
a. HTML
b. Java
c. JavaScript
d. PHP
e. CSS
4. Cuando una máquina se conecta a internet puede tener más de un IP.
a. Verdadero
b. Falso: solo puede tener una dirección IP ya que es un identificador único.
9
5. Una página con animaciones de apariciones de texto es una página dinámica.
a. Verdadero
b. Falso: se consideran páginas dinámicas a aquellas en las cuales su
contenido, por ejemplo un períodico.
6. DNS significa Sistema de Nombres de Dominio.
a. Verdadero
b. False
Entorno de trabajo local
El entorno de trabajo local, popularmente conocido como localhost, es una alternativa para
replicar servidores en tu máquina de manera offline. Esto le permite a los desarrolladores
una mayor autonomía, además de ofrecerles más funciones para administrar y probar sin
necesidad de contar con un servidor cloud.
Instalación de herramientas de trabajo local:
● Visual Studio Code
● Emmet
○ Mostrar funcionamiento rápido de la herramienta
● Node.js
○ Solicitar que todos corran el comando node -v / npm -v
● Github
○ Mostrar funcionamiento y comentar sobre la utilización de Github Pages
● Git
○ Comentar que es la herramienta mediante la cual vamos a poder enviar
nuestros cambios a Github
10
