y otra con el tag :
Programador web FullStack</titie>
</head>
<body>
<hi>Programador Fullstack</hi>
<p>Bienvenidos al curso de desarrollador
</body>
</atal>
Solo nos queda guardar el archivo para
asegurarnos que nuestro cédigo quede
escrito, Abrimos la carpeta donde guardamos
nuestro archive HTML, abrimas una sesién o pestafia
de nuestro navegador web, arrastramos el archivo
indexhtml dentro del navegador web, A continuacién,
se cargara la pagina web que creamos,
web fullstack</p>
iFelictaciones, hemos escrito nuestra
primera pagina web! Estas fueron las
primeras lineas de cédigo HTML que darén
Vida a una pagina simple, pero que nos
permitira conacer el. concepto basico det
‘componente gréfico principal que compone
todo sitio web: el HTML, que veremos en
profundidad en a Clase 02.
«00
REDUSERS Ei PROGRAMADOR WEB Full Stack
Programador Fi
stack
Amagen 06,
Con tan solo unas
lineas de cédigo HTML,
hhemos logrado crear
‘nuestra primera,
web. éC6mo funcionan
los tags?
Volvamos sobre los tags HTML utilizados en el ejercicio anterior. Los mismos son
la base necesaria de cada pagina HTML que crearemos de aqui en adelante, Por
el momento veremos su funci6n bésica, y a medida que avancemos clase a clase,
conaceremos qué otras funciones pueden prestar 0 como los podemos combinar.
i <HTML> </HTML>
Eltag <html> es el elemento raiz de cada
pagina web. Este se utiliza para indicar
almotor de renderizado donde inicia y
termina una pagina html, El tag </htmi>
con el earacter / indica gue all finaliza
el cédigo correspondiente a una pagina
html, De la misma forma, el caracter J
utilizado en otros tags, determina que
dicha etiqueta finaiza al.
Si analizamos otras paginas web
respecto 4 la nuestra, encontraremos
(que algunas de ellas comienzan con
-IDOCTYPE html> en lugar de <htmb
Cuando analicemas el cédigo HTML
por completo, veremos esta y otras
diferencias, y cuindo y cémo aplicar
cada una de ellas.
Bo <HEAD> </HEAD>
El tag <HEAD> define el inicio del
encabezada de cada pagina. En el
interior de este tag se especifica
el titulo de la pgina, que solemos
visualizar en la pestaia del
navegador web, y también se
incluye el lamado a otros archivos
que componen la estructura de
una web (archivos C
JavaScript, eteétera),
archivos
ee
[Link]
<TITLE>Programador
</HEAD>
<BODY >
<H1>Programador
<P>Bienvenidos al cu
‘ullstack</P>
a
</BODY>
L</HTML>
Clase 011i Ecosistema web a El <TITLE>
El tag especifica el titulo
Solo el contenido aque tiene ta pdgina web, Se trata
del titulo que aparece ena pestatia
interno de <body> pce nrarinioenai
y <title> es Usualmente el titulo de las paginas
es estatico, aunque veremos
visualizado en el siendlanes en lax oe por varias
navegador web. Tengen bey
ais or ee)
<BODY> </BODY>
El tag <BODY> es el tag principal que
aloja todo el contenido (dinamico y
estético) que conforma una pagina
web y con el que solemos navegar
los sitios e interactuar de manera
‘grifica, En este tag se almacenan
los titulos, las secciones, los meni,
Imagenes, audios, videos, y todo
otro material que componga una
web Fullstack</TITL
web,
Hi <H1></H1>
| <P> </P>
El tag <P> especifica el parrafo de
texto que se muestra en una pagina
web. También para espaciar un
parrafo de otro, se suele utilizar
este tag como generador de
renglones vacios, aunque lo mas
‘efectivo y politicamente correcto es
Fullstack</H1>|
rso de desarrollador web
recurriral tag <br>,
REDUSERS Ei PROGRAMADOR WEB Full Stack a éCdmo funciona la web?
Si bien el ejemplo anterior nos permité crear una pagina html 1 Mostrar contenido dinémico, obtenido desde de una
‘stética, quardarla en nuestra computador visuaizarla base de datos o peticiones « webservices.
en el navegador web, el concepto de web requiere un 15 Ejecutar de cédigo especitico realizado en tecnologia
Componente esencial que oficia como alojamiento del PHP, NET, Python, entre otras.
contenido de una wab, ysirve este contenido de forma 15 Establecer sistemas de seguridad contra ataques
remota através de les drecciones URL (Universsl Resource _remotos.
Locator: el servidor web. Sibien pudimos ver contenido html i Integrar bases de datos remotas para alojar contenido
sin necesidad de un servidor web, el no tener un servidor que alimenta nuestra we
‘web que canalice el contenido de un sitio web através dela 1 Redireccionar el contenido a un dominio como www.
red nos impide, entre otras cosas: [Link],
Enlabarrade
direcciones dol
€cvene_/NAVEGADOR eae
F
SS
Servidor web
‘Un servidor web o web server es una aplicacidn que procesa el contenido, usualmente
pines we, del mds dl ervidor:Realzncovexinesunitdecsonale deforma
eden tcoeraes eee) cma Mtial eet npenestnabeee
Cond respuestas. Cominmente un servidor web utilize el protocolo HTTP para envier
el contenido htnla cad lent quele sols, Soninstlods yutlizades on
eee dara eeceneer rr feat eee nearer eee erates ota
ome pris scenes IF ees risa
are elcas de servidores web ques cite n empress, soda de Intranet, se
rodiroccionamiento I
sueleutlizar lo que eonacemos come Personal Web Server. Dentro dels servidores
web més comunes en el mercado, podemos destacara Microsoft llS, Apache web
Server,y NGinX, entre otros.
oo Clase 01 BI Ecosistema web URL
URL proviene dea sgl Universal Resource Locator. Su
traduccin al espafiol es basicaments teal Localzador de
recursos uniormes), yes a taenologie quo so ocupa do enlazar
recursos, usualmante através dala wob o intranets, que se
smueven através de direccanes IP o nombres de dominios. a
UAL se ocupa de “volver amigable” através de una dreocion
ob, el acceso 8 un recurso especifco, como puede ser una
pigna html, un documento PDF, ura imagen, un vido, o une
aplicacin para sor dascargada do Internat.
Por ejemplo, cuando accedemas a un sitio web, nosotros
simplemente tpiamos en
[Link],yvisualizamos la pigina principal de dicho sitio
Esta pigina es un archivo htm! que contiene por ejemplo la
informacin institucional de una empress. Le pagina html est
navegador webliadireccién www.
AU RedUSERS -Notiia e x
€ > SO [_D [Link]/noticias/
navegador
Paginas html
Lospésnas ha sonie ue alan ol contenida general qe
conpone cad tex. Estas pias stn armadas eon conteido
HTML camo! ejomplo que vnos atrormenta, contenido
(88,seuaSep ganas, ios, dtr. Tod est contenido
esarmatode forma optims yess, pra que pueé ser
visuizndo atrové de los [Link] ass donde los
contro te
alas pies ob cao dices eer do pines eatin,
Estas solo secupandeaguparel contenido hin basic, que
conforma estructura dela pins el contenido CSS que a
formers demaner gratis yleanterido un engine de
programcié expecic ame puede ser PHP [Link], ene aos,
due conautalabas de dete, els regiatrsnacesario,y
3m intereccisn con base de datos, se denomina
REDUSERS Ei PROGRAMADOR WEB Full Stack
slojada en un cisco rigid isco do una computadora remote,
bajo una ruta local que puede ser ¢:\wrebs\midominia\wewr
indox hm, El wab saver, @ través de una URL, se ocupa de
rutear este contenido de manera transparente para elusuario
que lo solicit, pare que éste simplemente escribe el dominio al
que desea accede, yacceds a contenido principe, sin tener
‘ue escribir por completo toda la URL. Esto mismo también as
_apicado enlos casos donde nacasitamos descargar contenido,
‘come por ejomplo un nstalador da daterminads apicacon, En
estos casos, vemos muchas veces une ireccion de scarge
similar : www [Link]/download, Al hacer clic en
esta URL el servdor web reirecciona hacia contenido de
descarge orginal, cual puede ser ww. [Link]
download/appslintaladordemiapp.2x.
El navegador analiza
el documento HTML.
En caso de requerir recursos
documentes, plugins, et,
vuelve @ hacer una
solicitud al servidor
‘tansforma estos datos on cantando html, para
‘que finalmente este see e que llegue en modo
ico a nuestro navegador Este contenido
inémico es procesada eno servidor web, de
forma
</>
nsparente para el usuario, Este timo rcibiré en su
navegador web toda el contenido en formato plano, camo si
‘ese esttic, pars que el na
de la manera carecta, Las
‘xtensin HTML, pero en los casos det
4inémicas, estas pueden comtener extensiones como PHP,
dor web loranderice ymuestre
ASPX, .PY, entre otras. Esto serd transparente para el usuario
final, pero clave para que nuestro servidor web puede procesar el
eontenida de forma dptima, RU RedUsthe - Noite inc
— Hipervinculos
Tool contenido web de 98¢
ireccions wa, eter
—— hiprvneuos Esta concopto
5 A \ WD Green $80 - 240 G2 fisica do un archivo o recurso
Va \ es ey en ‘web o hacia un servidor web)
© wore. [Link])
aa
sonlos que nos permiten nav
Pa mcs eres
un nuevo mensaje de correo ¢
web, accodor aa lactura de
a servidor, escuchar un archive
Gigabyte AORUS Z270x- Archos Drone
caewne frospor Rosen mediante streaming
lense itt 2270 pare asso eas
Tr ugedores oveocers.
Recursos adicionales
Todo conten adcional ue complamente nso web come videos, rhivs de auto imépenes,
documentos, POF, picaciones isla, lis lash, son atados yconardos como recursos
adicionales Ea muchos cats estos conteido pueden ser vneldoe den deuna web comoun
Gos) 4 archivo mis, a través do hiporvinculs, para que estos sean ojecutados o descargados, sogin el
‘comportamionto del navagador.
Estos recursos pueden ono estar vinculados a una web de ferme directa, quedando expuesta su URL
complete para ls usuarios finales, a puede estar ofuscado a través do cbdigo CSS o JavaScript pa
(que el acceso directo a su URL isica no quade disponible para el usuario final. También en algunos
asos, parte de este contenido videos, PDFs, MPs) std embebido dentro de una base de datos, on
‘formato BINARY o BLOB, para que no pueda sor accodido de forma directa por usuarios oindoxade por
buscadores web,
OB Clase 0116 Ecosistema web Los hipervinculos estéticos son insertados dentro de
las paginas web, algunas veces por el desarroliador
‘wb durante la disaho da sitio, mientras que los
hipervinculos dindmicos son ereados 2 partir de
bésicamonte es la
dentro de mismo:
[Link] variables que parametrizan ol contenido 8 mostrar,
agerelcontenido web, iniciar ejecutan brdenes rematas del servidor, pare, por
Aectrénico desde un sitio __ojemplo, eliminar un item de un earrito de compras
:ontonido POF alojado enun online, o aceeder « modificar nuestro porfil de usuario
IMP3,ovisualizarunvideo gn una red socal. la largo de esta curso, la insarcién
{de hipervinculos estticos y dindmicos, tanto a péginas
‘web como a recursos adicionales, soré un toma que
‘rataremos en profundidad.
larchos-drone/
S|
=
a cea
REDUSERS Ei PROGRAMADOR WEB Full Stack
Estees el
proceso mas rapido
y simplificado
de como se carga el
contenido de una web
enelnavegador del
usuario. Puede darse,
endeterminados
casos, que la web
Necesite acceder a
otros contenidos,
los cuales requieren
un plugin en el
navegador web del
usuario: en este caso,
el navegador activa
el plugin cuando
lo necesita, para
procesar los recursos
que lo solicitaron,
yque estos se
visualicen de manera
6ptima. Algunos
de estos plugins
pueden ser contenido
en Adobe Flash,
archivos en formato
PDF, documentos
ofimaticos, entre
otras opciones mas. Mapa de tecnologias
El desarrollo web ha ido cambiando con el tiempo. Desde
hace mas de dos décadas, la cantidad de tecnologtas,
editores de digo, lenguajes de programacién, de
marcado, y de estandares web ha cambiado rotundamente.
‘Coma bien sabemos, los inicios de la web basaban el
contenido de cada sitio en un
texto, secciones, y pocas imagenes, dada la escasa
velocidad de transferencta de datas de aquel momento, y
l bajo poder de procesamiento de las méquinas, Con los
avances teenolégicos de procesamiento, a conectividad,
yla imposicién de nuevos estandares visuales (come el
‘que marc el ya extinto Adobe Flash, que lle
animaciones), hay potlemos encontrar una diversidad de
contenidos y estructuras completamente diferentes al
HTML
Es el principal condimento para que
toda web se jacte de ser tal. Este
mezcla limitada a mucho
lawebde
Tenguaje ha evolucionado can el
tiempo, desde su llegada al mundo
comercial de internet, alla por 1994,
hasta nuestros dias,
HTML serd el esqueleto o estructura con
de casi todos los desarrollos web que
‘magen 07.
HTML puro que
conjuga el disenio de
texto + imagenes de
tuna pagina web.
evaremos adelante en este curso
desde la Clase 02 en adelante, por
lo tanto, cada uno de ls ejerciclos
que abordaremos tendran como
base este lenguaje de marcado. Esto
permitira que nos familiaricemos
al maximo desde aqut hasta
¢! final, Conaceremos sus aspectos
propio de los inicios del mundo web.
lan mucho alo que
hay conocemos coma portales Wikis. Los sitios
iplataforma o responsive basan sus animaciones
eno impuesto en su momento por Adobe Flash, con el
toque detalle de poder adaptarse a las mailtiples pantallas
cexistentes, Por ello, a tecnologfa bisica tilizada se
mantlene algo limltada respecta a su comienzo a través
dol HTML (algo evolucionado),y se apoya en un edimulo de
‘teenologias con un fin especifico basado en brindar una
mejor experiencia de usuario, Por esto, veamos:
Jas principales herramientas y tecnologias con las que
‘se manoja un desarrollador full stack parallacreacidn de
contenido para Internet,
Los inicios de la web se asimil
principales y, aprovechando que,
en el desarrollo inicial de esta obra,
HTML.
1 viola luz como estindar
de desarrollo para la web, también
veremos qué caracteristicas nuevas
trae la dltima versién de este
fabuloso y necesario lenguaje de
mareada e hipertexto, ‘<titlerejenplo Hola hundo
