📹

No olvides poner a grabar la clase

Diplomatura
FullStack
 Temario

● Presentación general del curso

● Presentación docentes - tutores - estudiantes

● Fundamentos del desarrollo web (101) 👀

● Herramientas que usaremos

○ instalar y configurar software

Presentación general del
curso
 Presentación general del curso

Este curso está pensado para darte una introducción sólida a los conceptos del desarrollo web
orientado al ámbito frontend. En el mismo no solo conocerás los fundamentos del desarrollo web,
sino que también harás uso de las herramientas más demandadas hoy en el mercado laboral.

Además realizaremos en todas las clases prácticas, combinadas con la teoría necesaria, para así
afianzar los conceptos más importantes de este fabuloso ecosistema.
 Presentación general del curso

Al finalizar el mismo, tendrás conocimientos en todas las herramientas necesarias para adentrarte
en este mundo y poder seguir perfeccionándote en el ecosistema Backend, como también en las
librerías y frameworks satélites disponibles para el ecosistema Frontend.
 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
Presentación de docentes y tutores

󰞨󰟲󰲐
 Presentación de docentes y tutores

󰞨 Docente:
󰲐Tutor@:
󰞦Tutor@:
 Presentación de estudiantes

Es tu momento de contarnos quién eres, a qué te dedicas

�
●
(estudias, trabajas, eres profesional en algún área), etcétera.

�🏼● 🎓
también si sabes programar, si estás en el mundo del

��🏻 🎓web, diseño web, o ecosistema IT en general.

desarrollo

● Desde dónde estás estudiando (Ciudad, Localidad, etc.)

Fundamentos del desarrollo web
 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
 Fundamentos del desarrollo web
Ejemplos de Stack de programación clásico, orientado al Desarrollo Frontend y/o Backend.

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

Express

HTML + CSS + JavaScript es el Stack NodeJS aprovecha el lenguaje JS, y se

frontend más utilizado hoy. integra con el framework Express JS y
Se complementan a su vez con React, la base de datos MongoDB, para
Angular, o Vue, para el desarrollo de conformar un stack de desarrollo de
aplicaciones web Frontend. aplicaciones Backend.
 Fundamentos del desarrollo web
Ejemplos de Stack de programación clásicos, orientados al desarrollo Fullstack.

Frontend Backend

Todas las tecnologías y lenguajes que

conforman diferentes Stacks (front y back),
conviven entre sí y pueden combinarse sin
inconveniente.

Express
Hoy en día, tanto en empresas medianas
como empresas grandes, muchas de estas
tecnologías ya trabajan de forma
simultánea.
 Fundamentos del desarrollo web

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.)

 Fundamentos del desarrollo web

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.

 Fundamentos del desarrollo web

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

 Fundamentos del desarrollo web

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.
 Fundamentos del desarrollo web

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
 Fundamentos del desarrollo web

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
 Fundamentos del desarrollo web

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
 Fundamentos del desarrollo web

Editor de código:
Es una herramienta de software que se utiliza para poder
concentrar todo el código de un proyecto web.

Nos permite no solo escribir el código, sino también verificar la

correcta sintaxis del mismo, concentrar archivos y subcarpetas en
un único punto, y también realizar pruebas de funcionamiento a
través de extensiones o complementos de software, integrables
dentro de éste.
 Fundamentos del desarrollo 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).
 Fundamentos del desarrollo web

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.
 Fundamentos del desarrollo web

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 oficial.

 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
 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
Blink Webkit Gecko 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.

 Motores Web

Este es el camino completo de lo que sucede

desde que abrimos un navegador web,
URL INICIO

escribimos una URL, o buscamos en un

FIN
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.
¿Cuál me conviene utilizar? 🤔
 ¿Cuál me conviene utilizar? 🤔

Chrome y Edge son los más evolucionados actualmente

en HTML, CSS y JavaScript.
Blink Webkit Gecko

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.
¿Cuál me conviene utilizar? 🤔

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? 💡

Algo poco difundido, pero que está bueno tener en cuenta es que, el
Webkit 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.
¿Dudas o preguntas?
Muchas gracias