PDF Alumno

📹
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.
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.
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
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 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.
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.
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.
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
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.
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 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? 🤔
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.
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

PDF Alumno

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

PDF Alumno

Cargado por

Copyright:

Formatos disponibles

📹

No olvides poner a grabar la clase

● Presentación general del curso

● Presentación docentes - tutores - estudiantes

● Fundamentos del desarrollo web (101) 👀

○ instalar y conﬁgurar software

Temas que veremos durante la cursada:

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

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

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

Entendemos como desarrollo web al concepto de diseñar y crear sitios y

Actualmente existen muchas alternativas para realizar desarrollo web en el

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

Todas las tecnologías y lenguajes que

Actores involucrados en el desarrollo web:

● diseño gráﬁco orientado a web

● lenguajes de programación o de desarrollo web

● servidores web (públicos o privados)

● herramientas adicionales (repositorio, recursos, etc.)

Diseño gráﬁco orientado a web

El diseño gráﬁco 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

Un servidor web es una aplicación clave, porque será la cual aloje

servidores web (públicos):

Dirección IP Sitio web

servidores web (privados):

Son aquellos utilizados por empresas, alojados en sus servidores

Dirección IP interna Sitio web

Puedes encontrar información completa sobre servidores

web, en la página de Wikipedia dedicada a esta

Nos permite no solo escribir el código, sino también veriﬁcar la

El navegador web es hoy una herramienta sumamente útil, y día

Concentraremos la enseñanza de todo este curso de la mano de

Recursos: son herramientas, usualmente de acceso web, pagas o

Visual Studio Code

Estructuraremos un proyecto web de acuerdo

Descárgalo desde su web oﬁcial.

A su vez, te servirá como Portfolio, o carta de

Si bien existen una amplia oferta de navegadores web, algo

Y, en materia de motores web, a la fecha actual existen solo

Características de todo navegador web

➔ Solo entienden HTML + CSS + JavaScript

Son los que proveen el motor web del resto de los

Safari utiliza Webkit como motor web, tomando para su

Firefox es quien mantiene a Gecko, su propio motor web.

Este es el camino completo de lo que sucede

escribimos una URL, o buscamos en un

Veremos con más profundidad todo el

Chrome y Edge son los más evolucionados actualmente

Safari está restringido al ecosistema Apple. Si tienes una

Firefox actualmente se convirtió en el motor web que más

El resto de los navegadores web, si bien no son claves