Introducción al Desarrollo Web - Argentina Programa

Clase 0: Introducción al desarrollo web

Presentación general del curso
Temas que veremos durante la cursada:
● Prototipado de ideas web
● Editores de código - Lenguajes de marcado y de estilos
● HTML5 y formularios web
● Frameworks CSS y Fuentes Web
● Manejo de elementos multimedia en webs
● Sistema de repositorio de código
● El lenguaje JavaScript
● Evolución del lenguaje JS con EcmaScript
● Interacción de frontend con sistemas de backend

Dentro del contexto de desarrollo web,
esta arquitectura hace referencia a un
modelo de comunicación que
vincula a varios dispositivos con un
servidor a través de Internet.
Arquitectura cliente servidor

¿A qué llamamos cliente?
Son los dispositivos que hacen peticiones de servicios o recursos
a un servidor.
Pueden ser: una computadora, un teléfono
celular, una tablet, una consola
de videojuegos o cualquier implemento
que pueda conectarse a una red.
Dentro de Internet, el cliente suele
acceder a estos servicios
y recursos a través de un navegador web. Dispositivos

¿A qué llamamos servidor?
Es el equipo que brinda los servicios y recursos a los que acceden los
clientes. En otras palabras, es quien responde los pedidos del cliente.
Es importante tener en cuenta que la misma computadora
puede ser el cliente y el servidor al mismo tiempo.
De hecho, es lo más normal en el entorno de
desarrollo de un sitio o aplicación web.

Los pedidos (requests)
Son las solicitudes que hacemos a través del navegador (el cliente) a un
servidor. Por ejemplo, la página de Facebook que está almacenada en
sus servidores.
PEDIDO /
REQUEST
www.facebook.com
CLIENTE
SERVIDOR
www.facebook.com
INTERNET

Las respuestas (responses)
El servidor recibe nuestra solicitud, la procesa y envía como resultado
una respuesta al cliente (navegador). En este ejemplo, devolverá la
página principal del sitio.
www.facebook.com
CLIENTE
SERVIDO
R
RESPUESTA /
RESPONSE
www.facebook.com
INTERNET

El front-end
Es todo lo que pasa del lado del cliente (en el navegador).
Aquí se incluyen todos los elementos gráﬁcos que conforman la interfaz
del sitio y también parte de su funcionalidad.
Los lenguajes que se manejan son HTML para la estructura, CSS para
los estilos visuales y JavaScript para la interacción dentro del sitio.
CLIENTE
FRONT-END

El back-end
Es todo lo que pasa del lado del servidor.
Aquí se incluye todo el funcionamiento interno y lógica del sitio. Es lo
que permite que se carguen todas las peticiones solicitadas por el cliente.
Podemos encontrar: bases de datos —como MySQL y MongoDB—, lenguajes,
—como PHP y JavaScript para sitios webs dinámicos— y frameworks o marcos
de trabajo —como Express y Laravel—.
SERVIDOR
BACKEND

Fundamentos del desarrollo web
Entendemos como desarrollo web al concepto de diseñar y crear sitios y aplicaciones web para internet (uso
general) como también para una intranet (uso corporativo). Para lograr esto, debemos conocer alguna de las
herramientas de software que nos permiten realizar esta tarea.
Actualmente existen muchas alternativas para realizar desarrollo web en el mercado; las mismas se conocen como
STACK.
A su vez, un Stack puede estar conformado por una única herramienta, o lenguaje de programación, o por un
conjunto de ellos.
Web oficial de Wikipedia: Concepto de desarrollo web - | - Imagen ilustrativa: Desarrollo web @ Wikipedia

Ejemplos de Stack de programación clásico, orientado al Desarrollo Frontend y/o Backend.
La plataforma .NET y SQL
Server conforman, desde
siempre, un Stack para
desarrollo de aplicaciones de
todo tipo: (front, back, móvil, desktop).
PHP y MySQL también
conforman un Stack clásico.
Ambos se complementan muy
bien y son el Core de
herramientas como Wordpress,
Drupal, y Woocommerce, entre
otros.
Otro Stack clásico es la
combinación de Java con
Oracle Database. Son el Core
de grandes productos y se
complementan a la perfección.

Ejemplo de Stack de programación moderno, aplicado al ámbito Frontend, y al ámbito Backend.
HTML + CSS + JavaScript es el Stack
frontend más utilizado hoy.
Se complementan a su vez con React,
Angular, o Vue, para el desarrollo de
aplicaciones web Frontend.
NodeJS aprovecha el lenguaje JS, y se
integra con el framework Express JS y
la base de datos MongoDB, para
conformar un stack de desarrollo de
aplicaciones Backend.
Express

Express
Todas las tecnologías y lenguajes que
conforman diferentes Stacks (front y
back), conviven entre sí y pueden
combinarse sin inconveniente.
Hoy en día, tanto en empresas medianas
como empresas grandes, muchas de estas
tecnologías ya trabajan de forma
simultánea.
Ejemplos de Stack de programación clásicos, orientados al desarrollo Fullstack.
Frontend Backend

Ambos términos están relacionados
porque uno necesita del otro para
poder existir, pero son cosas diferentes
Diferencia entre web e internet

16
Diferencias entre la Web e Internet
¿Qué es la Web?
•A grandes rasgos, la Web es un sistema de
distribución que puede interconectar documentos que
contengan multimedia: imágenes, videos, textos y
demás. Los mismos se transfieren o comunican a través
de un protocolo que conocemos como HTTP (Hypertext
Transfer Protocol).
•Estos documentos emplean el lenguaje de marcado
conocido como HTML (Hypertext Markup Language)
que permite realizar enlaces entre dichos archivos; lo
que usualmente conocemos como links.

Podríamos decir que es la infraestructura que nos
permite de alguna manera tener conectada una
computadora en Argentina con otra en Japón y así
cada una de las computadoras o servidores a lo
largo del mundo.
Este tipo de red descentralizada se utilizó en
principio para ﬁnes cientíﬁcos conectando
universidades con instituciones estatales, como,
por ejemplo, el proyecto ARPANET desarrollado por
el Departamento de Defensa de los Estados Unidos
en el año 1969.
¿Qué es Internet?

En resumen
•Lo importante a entender es que la Web es un modelo
para compartir información que está construido sobre
Internet.
Web Internet
Sistema de distribución que
interconecta documentos de
hipertexto.
Red descentralizada que
conecta computadoras y
servidores entre sí.
Utiliza el protocolo HTTP.
Utiliza el protocolo TPC/IP, entre
otros.
Información y archivos. Infraestructura.

Actores involucrados en el desarrollo web:
● diseño gráfico orientado a web
● lenguajes de programación o de desarrollo web
● servidores web (públicos o privados)
● editor de código
● herramientas adicionales (repositorio, recursos, etc.)

Diseño gráfico orientado a web
El diseño gráfico es una pieza clave en el mundo del
desarrollo web. La estética visual aportada por imágenes y
archivos multimedia, como ser videos, le dan vida a un sitio
web; marcan su identidad.

Lenguajes de programación o de desarrollo web
El CORE de la web está conformado por lenguajes de
programación, de marcado y de estilos.
Más allá de que utilicemos otras alternativas para crear
sitios web, el navegador web que recibe el contenido de un
sitio o aplicación web, solo entiende una sola cosa:
HTML + CSS + JavaScript

servidores web (públicos o privados):
Un servidor web es básicamente una aplicación de software que
procesa información del lado del servidor a través de conexiones
bidireccionales y unidireccionales, sincrónicas o asincrónicas, con
un cliente, devolviendo una respuesta al cliente en sí.
Un servidor web es una aplicación clave, porque será la cual aloje
nuestro desarrollo web y lo “sirva” a aquellos clientes que deseen
acceder y hacer uso del mismo.

servidores web (públicos):
Son usualmente aquellos a los cuales accedemos a un sitio web
específico. Están emplazados en un datacenter con conexión a
internet directa, y envían la información haciendo uso de DNS’s
para enmascarar una dirección IP fija que poseen, bajo un
nombre amigable, que sea fácil recordar, y que esté publicado
para todo el mundo:
Dirección IP Sitio web
66.249.93.104 www.google.com
200.45.165.28 www.untref.edu.ar

servidores web (privados):
Son aquellos utilizados por empresas, alojados en sus servidores
corporativos. Se suele instalar un servidor web que permite
acceder a una aplicación web corporativa, a través de la red
interna propia de la empresa.
Dirección IP interna Sitio web
192.168.0.101 http://servidor-contable/app
192.168.0.116 http://servidor-acceso-corporativo/reloj

Puedes encontrar información completa sobre
servidores web, en la página de Wikipedia dedicada a
esta temática:
https://es.wikipedia.org/wiki/Servidor_web

Navegador web:
Cuando trabajamos con el desarrollo web orientado a
frontend, utilizaremos siempre un navegador web (web
browser), para ejecutar la aplicación web resultante.
El navegador web es hoy una herramienta sumamente útil, y
día tras día, más aplicaciones crean su versión web, porque así
garantizan su total compatibilidad con cualquier sistema
operativo existente (Desktop o Mobile).

Editor de código:
Existen muchos editores de código en el mercado del software.
Dentro de los más populares, podemos mencionar a:
● Visual Studio Code
● IntelliJ Idea
● Brackets
● Notepad++
Concentraremos la enseñanza de todo este curso de la mano de
Visual Studio Code, más algunas extensiones clave para pruebas.

Herramientas adicionales
Repositorio de código: es un lugar donde se almacena y se puede
distribuir el código de una aplicación o software. Usualmente es un
servidor corporativo o uno de acceso vía internet. Administra un
historial de cambios y permite “fusionar” código escrito por más de una
persona.
(github, gitlab)
Recursos: son herramientas, usualmente de acceso web, pagas o
gratuitas, que aportan elementos utilizables para nuestros desarrollos
(íconos, imágenes, videos, extensiones, textos, etcétera).

Herramientas que usaremos
Visual Studio Code
El editor de código recomendado para abordar
los proyectos y ejemplos en clase.
Estructuraremos un proyecto web de acuerdo
a la visión del profesor, y sumaremos algunas
herramientas básicas a VS Code, más otras
que te pueda recomendar el profe o
compañer@s de curso.
Descárgalo desde su web oﬁcial.

Herramientas que usaremos
GITHUB
Es el repositorio más utilizado a nivel
personal y corporativo. Lo utilizaremos a
través de sus diferentes herramientas para ir
resguardando el código de nuestras
prácticas.
A su vez, te servirá como Portfolio, o carta
de presentación, si tu interés es buscar
trabajo dentro del mundo del desarrollo
web.

Navegadores web
Si bien existen una amplia oferta de navegadores web, algo
que debemos tener presente como Web-Developers, es que
por más “sabores” que encontremos en el mercado de
navegadores web, es el motor web quien marca una
diferencia entre unos y otros.
Y, en materia de motores web, a la fecha actual existen solo
tres alternativas en el mercado. Estas alternativas son las
que, luego, le dan vida al resto de los web browsers
alternativos.

Navegadores web
Características de todo navegador web
➔ Solo entienden HTML + CSS + JavaScript
➔ Tienen un motor web interno que renderiza el contenido
➔ El motor web se divide internamente en dos intérpretes
◆ HTML + CSS
◆ JavaScript
➔ Adaptan las novedades de estos 3 lenguajes a destiempo
➔ Existen algunas restricciones sobre motores web en el ecosistema
mobile (marcadas principalmente por los branding)

Navegadores web
Composición de un motor web Estos son los navegadores web que se diferencian
entre sí por su motor web.
● Chrome y Edge
● Safari
● Firefox
Son los que proveen el motor web del resto de los
browsers que hay en el mercado de navegadores
web.

Navegadores web
Composición de un motor web Chrome y Edge (Google y Microsoft), trabajan en conjunto
desde 2019 en la evolución del motor Blink. Hoy
evolucionan a la par (no hay diferencia sustancial por usar uno u otro).
Safari utiliza Webkit como motor web, tomando para su
construcción el código fuente del navegador web
Konqueror (Linux). Hoy Apple mantiene a Webkit y
aporta a la evolución de Konqueror.
Firefox es quien mantiene a Gecko, su propio motor web.
Blink Webkit Gecko

Motores Web
Este es el camino completo de lo que sucede
desde que abrimos un navegador web,
escribimos una URL, o buscamos en un
buscador web, y hacemos clic en el link para
acceder a dicho contenido.
Veremos con más profundidad todo el
funcionamiento de un motor web, cuando
abordemos el aprendizaje de JavaScript.
URL INICIO
FIN

¿Cuál me conviene utilizar?
Chrome y Edge son los más evolucionados actualmente
en HTML, CSS y JavaScript.
Safari está restringido al ecosistema Apple. Si tienes una
Mac o un iPad/iPhone, puedes utilizarlo para pruebas
generales de visualización de contenido.
Firefox actualmente se convirtió en el motor web que
más lento evoluciona. Igualmente nos conviene tenerlo
también como motor de pruebas para nuestros
desarrollos.
Blink Webkit Gecko

El resto de los navegadores web, si bien no son claves
en el momento de desarrollar web, podemos tenerlos
como referencia para probar características muy
avanzadas de HTML, CSS y JavaScript.
Usualmente estos navegadores web que utilizan
alguno de los motores web mencionados antes,
suelen usar el motor web con “algunas versiones de
retraso” respecto a los tres motores más importantes.
¿Cuál me conviene utilizar? 🤔

¿Cuál me conviene utilizar? 💡
Algo poco difundido, pero que está bueno tener en cuenta es que, el
ecosistema de Apple orientado a mobile (iPad / iPhone), utiliza un único
motor web (Webkit).
Más allá de que podamos instalar desde el App Store otros navegadores
web, estos no son más que un “skin” que utilizan internamente el motor
web de Safari (Webkit), para renderizar contenido.
Tengamos esto presente por si alguna vez debemos realizar un
desarrollo web específico para Apple y su ecosistema móvil.
Webkit

Introducción al Desarrollo Web - Argentina Programa

Más contenido relacionado

Similar a Introducción al Desarrollo Web - Argentina Programa (20)

Último (6)

Introducción al Desarrollo Web - Argentina Programa