U3_Aplicaciones Web.pdf

UNIDAD III
PROGRAMACIÓN DE
APLICACIONES WEB
FUNDAMENTOS DE PROGRAMACIÓN EN LA
ARQUITECTURA CLIENTE - SERVIDOR

1
Unidad lll
Práctica: Estructura en HTML
La mayoría de las etiquetas funciona con un delimitador de inicio y otro de final del elemento. Los
delimitadores de inicio o apertura son las etiquetas como en el ejemplo anterior <title>, y los del final
o cierre son básicamente lo mismo pero con una barra precedente: </title>.
En el siguiente ejemplo se ilustra un encabezado delimitado correctamente:
<title>Bienvenido a este sitio web</title>
Existen algunas etiquetas que no requieren elementos de cierre. Un ejemplo es , la cual
crea una nueva línea en el texto. (Notemos que algunas etiquetas como éstas no tienen la barra al
comienzo, sino al final de la etiqueta).
En el siguiente ejemplo, un navegador mostrará las tres palabras, pero una en cada línea:
Línea 1 Línea2 Línea3
Ergo, el navegador mostrará dicho texto así:
Línea1
Línea2
Línea3
El uso de es importante en HTML porque los navegadores ignoran las nuevas líneas a
menos que usemos dicha etiqueta.
En cuanto al uso de mayúsculas, la especificación HTML no lo considera importante, por
lo que <TITLE> es igual de válido que <title>, pero en la especificación XHTML (más estricta), se
especifica que todas las etiquetas deben estar en minúsculas.
El siguiente texto muestra la estructura básica recomendada de un documento HTML5:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Título de la página</title>
</head>
Programación de
Aplicaciónes
Implementación de una página
web – aspectos técnicos

Unidad lll
2
<body>
Contenido de la página
</body>
</html>
Según HTML, el único elemento requerido es <title>, pero en el más estricto XHTML, todos
estos elementos (a excepción de <meta> deben estar incluidos.
La primera línea de todas no es una etiqueta de un elemento HTML, sino lo que se conoce
como Declaración DOCTYPE. Es una línea de texto que identifica a este documento como un do-
cumento HTML5 – permite que los navegadores sepan que se debe interpretar el documento según
el estándar HTML5.
Todo el resto del documento está contenido (es decir, dentro de las etiquetas limitadoras) en
el elemento <html>. Se le llama también elemento raíz, ya que contiene a todos los otros elemen-
tos.
Dentro de <html> observamos que se divide el documento en dos secciones separadas,
<head> y <body>. El elemento <head> (encabezado) contiene información que describe al docu-
mento, como por ejemplo el título de la página, las hojas CSS que se utilizan, scripts, entre otros.
El elemento <meta> es otra etiqueta especial, ya que no tiene par de cierre equivalente. Este
elemento provee información sobre el documento en sí, o sea que contiene metadatos del docu-
mento. Estos metadatos pueden ser de diversos tipos, pero en el ejemplo estamos especificando
la codificación de caracteres a usar, que en este caso es Unicode utf-8.
Dentro de <head> también tenemos el elemento <title>. Este título es el que los navegadores
muestran en sus respectivas barras de pestañas o barras de título de la ventana donde aparecen.
Notemos que todos estos textos que hemos visto dentro de <head> no son parte de lo que
se ve en la página – es puramente información para el navegador. El siguiente elemento, <body>
(cuerpo) es el que contiene lo que actualmente veremos en la ventana del navegador.
Dentro de body pondremos texto que se ve en la página. Normalmente se usa CSS para
darle estilo a dicho texto, pero dentro del HTML podemos aplicar ciertas etiquetas para organizar
un poco mejor las líneas de texto y los elementos CSS que usaremos. Estas etiquetas son los en-
cabezados (h) y párrafo (p).
Los encabezados son etiquetas que dan un estilo resaltado al texto según la configuración
por defecto de nuestro navegador, y van del 1 al 6, en forma <hX> </hX> donde X es el número,
siendo 1 de mayor importancia (tamaño) de todos.
La etiqueta párrafo define exactamente eso, un párrafo de texto independiente. Si defini-
mos múltiples textos con sus etiquetas y respectivas, el navegador los muestra separados
uno de otro.
Podemos agregar comentarios (texto que se ignora por completo) usando . Por
ejemplo:

Unidad lll
3
Estructura
Las hojas CSS que deseamos usar en una página las especificamos dentro del elemento head del
documento HTML, pero antes debemos escribir dichas hojas con los ajustes visuales que precise-
mos. Los archivos CSS son simples archivos de texto plano, igual que los documentos HTML. Sin
embargo, su estructura es diferente – un archivo CSS no se compone de contenido demarcado por
etiquetas, sino por una o más instrucciones de estilo, llamadas reglas, las cuales definen la aparien-
cia de los elementos que usamos en nuestro documento HTML.
Veamos el siguiente ejemplo:
h1 { color: red; }
p {
font-size: 10pt;
font-family: “Verdana”;
}
Son dos reglas las que vemos en el ejemplo. Antes que nada, observemos que la primera
está indicada en una sola línea, pero la segunda en múltiples líneas. Ambas formas son válidas
(podemos poner la segunda regla en una sola línea también) pero por cuestiones de legibilidad es
recomendable estructurar nuestras reglas para facilitar el trabajo.
Cada regla se compone de dos cosas: Uno o múltiples selectores y una o más declaracio-
nes. Los selectores definen cuál es el elemento que vamos a modificar (en los ejemplos son h1 y
p), mientras las declaraciones definen las características a aplicar al elemento afectado.
Cada declaración sirve para un aspecto específico de apariencia, por ejemplo color, grosor
o tipo de letra. Una declaración a su vez se compone de dos elementos: la propiedad y el valor. La
propiedad es la característica que alteramos (color, tamaño) y el valor es la configuración específica
de esa característica (rojo, 10pt). Cada declaración separa la propiedad del valor con el signo de
doble punto, mientras termina con un signo punto y coma. A su vez , todas las declaraciones de un
selector en particular están dentro de un par de llaves {}.
En el ejemplo anterior, usamos los selectores h1 y p, siendo estos ejemplos de selectores
sencillos de tipo de elemento – básicamente el estilo de estas reglas se aplicará a todos los ele-
mentos demarcados como h1 y p respectivamente. (O sea que todos los h1 serán rojos, y todos los
p usarán texto con tipo Verdana en 10pt).
Algunas propiedades tienen múltiples formas de expresar sus valores. Por ejemplo los colo-
res se pueden expresar así:
color: red;
color: #FF0000;
color: rgb(255,0,0);
color: rgba(255,0,0,1.0);
Todas las declaraciones anteriores especifican exactamente el mismo color rojo. La primera
es la más simple, la palabra red, pero no todos los colores tienen equivalentes en palabras, sola-
mente los colores básicos tienen esta forma.
La segunda forma es el valor del color en modelo RGB (rojo, verde, azul) en forma hexade-
cimal. FF equivale a 255 en el sistema decimal.

4
Unidad lll
La tercera forma es idéntica a la anterior, pero en forma decimal en lugar de hexadecimal.
Cada valor se separa por comas dentro de los paréntesis.
Por último, la cuarta forma es específica a CSS3 – es similar a la anterior pero agrega un
elemento más, la a de alpha, refiriéndose al canal alfa o transparencia. Este último valor no va de
0 a 255 como los valores de r, g y b, sino va de 0.0 a 1.0, siendo completamente transparente y
completamente opaco, respectivamente.
En CSS, los comentarios se delimitan con /* y */. Por ejemplo:
/* esto es un comentario */
Una vez creada nuestra hoja de estilos, debemos asignarla a nuestro documento HTML para
que funcione. Para esto, debemos especificarla dentro de head. Hay dos formas:
Hoja externa: Consiste en especificar la dirección URL de nuestro archivo CSS para que
sea cargado. Es la forma recomendada, porque si tenemos múltiples páginas con el mismo estilo,
y todas apuntan a la misma hoja externa, solamente debemos editar el CSS una vez para que los
cambios se reflejen en todas las páginas. Para ello, usamos el elemento link dentro de head, de esta
forma:
<head>
<title>Título de la página</title>
<link rel=”stylesheet” href=”/carpeta/estilo.css”>
</head>
Hoja embebida:
Consiste en colocar todo el texto de nuestro archivo CSS dentro de etiquetas style, dentro de la sec-
ción head. Las reglas contenidas solamente se aplicarán al archivo HTML específico en cuestión.
No es recomendable usar mucho este método, porque si debemos hacer cambios, tendremos que
replicarlos en todos los archivos HTML afectados.
Arquitectura de un proyecto de página web
Con HTML y CSS se construye la parte básica de lo que compone un sitio web, pero son necesarios
otros elementos para su funcionamiento. Un sitio web dinámico requiere una base de datos para
operar, y la misma requerirá ciertos recursos externos adicionales para funcionar.
Todos estos componentes se supone que residen en la máquina que servirá como el servidor
web, pero dicho servidor requiere además cierto software, ajustes y requisitos para funcionar. Ana-
licemos los elementos necesarios:
Servidor
En primer lugar, del lado del servidor necesitamos cierto software para operar lo que conocemos
como el “servicio web”, lo que es un software de servidor HTTP. Pero antes de listar el software en
el servidor primero necesitamos la máquina en sí.
Podemos usar cualquier PC o laptop como un servidor a la hora de experimentar y probar el
funcionamiento de nuestro sitio pero en ambientes de producción (listos para su uso) necesitamos

5
Unidad lll
Dominio
Cuando hablamos anteriormente del sistema DNS, destacamos que se encarga de ‘enlazar’
la IP de nuestro servidor a una dirección en forma de texto (el dominio). Esta es una de las funcio-
nes principales, pero además asigna cierta información descriptiva adicional de cada dominio.
Nuestro servidor (sea propio o del proveedor) debe tener una dirección IP pública asignada
a él. Con esto nos referimos a una dirección IP fija o estática, la cual siempre será la misma para
esa PC. (Normalmente, las conexiones de internet de usuarios en general usan IP dinámica, la cual
cambia cada cierto tiempo).
No podemos usar una dirección IP dinámica, ya que al cambiar constantemente, nuestro
dominio se quedará constantemente desactualizado.
El rango de las direcciones IPv4 (usadas actualmente) se encuentra prácticamente usado
por completo, pero en nuestro país obtener una dirección estática es sencillo y barato, ya que no
hacemos mucho uso de las mismas (los rangos de direcciones IP en todo el mundo se dividen de
forma equitativa).
De vuelta al tema del dominio, el sistema DNS es un registro descentralizado global, el cual
lista dominios como www.ejemplo.com y provee datos necesarios para servicios a un equipo cuan-
do el mismo hace una conexión al dominio en cuestión. Cuando ponemos la dirección web en nues-
tro navegador, el mismo aún no sabe la IP del sitio – lo que hace es conectarse con el proveedor de
internet, quien provee el servicio de DNS. El proveedor recibe la información de que queremos co-
nectarnos a un dominio, y de ahí ‘consulta’ los registros de ese dominio para entregarlos al equipo.
Así, el proveedor nos facilita la dirección IP del servidor al que nos conectaremos, entre otros datos
importantes para autenticación y seguridad. Esto funciona de manera completamente transparente
al usuario.
Si nosotros sabemos de antemano (o se guardó en el sistema) la información de cierto do-
minio, podemos conectarnos sin usar registros DNS. Simplemente ponemos la IP del servidor en
lugar de su dominio, y llegaremos al mismo destino.
En cuanto a los datos que se almacenan sobre los dominios como parte del DNS, los cono-
cemos como registros. Algunos de los registros más comunes son:
SOA: (Start of Authority), incluye información del nombre de host del servidor, email de con-
tacto con el administrador, número de serie, datos de zona horaria, y otros datos de autoridad.
que el servidor tenga alimentación de corriente y conexión a red continua, por lo que es prudente
hacer uso de los servicios de algún proveedor de hosting. Los proveedores son organizaciones que
básicamente alquilan equipos enteros (o instancias virtuales individuales) de servidores para alma-
cenar y operar nuestro sitio web. El proveedor se encarga de mantener el equipo en funcionamien-
to, reemplazando hardware si fuese necesario, y además provee servicios para conectarse desde
afuera para operar nuestra “instancia” alquilada (esto permite que podamos trabajar en nuestro
sitio sin tener que estar físicamente frente al servidor, ya que el mismo probablemente esté en un
lugar inaccesible de la empresa proveedora). Al mismo tiempo, el proveedor nos ahorra tener que
preocuparnos de la seguridad física (y lógica hasta cierto punto) del equipo.
Si deseamos prescindir de un proveedor de hosting, quedará a nuestro cargo mantener el
equipo funcionando de manera óptima. En este caso es recomendable un sistema de alimentación
ininterrumpida (UPS), y constante monitoreo para asegurar el funcionamiento. Además necesitare-
mos una conexión de internet no solamente rápida y apta para el servidor, sino que sea por medio
de una dirección IP pública (la razón veremos cuando hablemos del dominio, a continuación).

A: (Address), es la dirección IP del servidor, en forma 32-bit (IPv4).
AAAA: Similar a A, pero este registro almacena una dirección IP en forma 128-bit (IPv6).
MX: (Mail eXchanger): Se utiliza para indicar servidores de correo (email).
CERT: (Certificate): Almacena certificados virtuales, usados para comprobar la autenticidad
de un servidor al que nos conectamos.
Para que los usuarios puedan conectarse a nuestro sitio web, será necesario un dominio.
Para ello, debemos usar los servicios de un registrador de dominios.
El registrador es una organización delegada por la ICANN que nos delega el derecho de uso
sobre un dominio en particular.
ICANN (Internet Corporation for Assigned Names and Numbers) es la organización encarga-
da de dirigir y controlar los sistemas de nombres y direcciones de Internet.
Al contactar con un registrador, consultamos los dominios ofrecidos, y al decidir sobre uno se
realiza un pago (normalmente anual) para obtener los derechos de uso del dominio. El registrador
publica la información sobre la transacción a través del servicio WHOIS.
Los dominios son globales, y basta con registrar nuestro dominio una sola vez con un re-
gistrador – no es necesario múltiples – ya que el servicio de WHOIS informa en general sobre el
registro. Si en el futuro otra persona consulta sobre nuestro dominio elegido (sea en el mismo re-
gistrador o no), recibirá un mensaje de que ese dominio ya no está disponible. Ciertos dominios de
palabras comunes pueden tener valores mucho más altos, y existe un mercado de transferencias
de los derechos de dominios. Si hay un dominio particular que deseamos a toda costa, es posible
obtenerlo… a un precio que será mucho más alto que el de un dominio más común.
El ‘repertorio’ de dominios que se puede buscar con un registrador es amplio, podemos ob-
tener un dominio compuesto de palabras impronunciables si lo deseamos. Lo que sí varía según
registrador será el rango de los TLDs ofrecidos.
Top-Level Domains, o “Dominios de nivel superior”.
TLDs
Comúnmente conocidos como los ‘sufijos’ que acompañan los dominios. Ejemplos son .com,
.net, .org, .py, .us, .uk, .info.
Cada TLD es administrado por una organización específica, pero la lista oficial de todos los
TLDs es mantenida por la IANA (Internet Assigned Numbers Authority). La misma también se en-
carga de los procesos de aprobación para nuevas TLDs.
Existen los siguientes tipos:
TLD de infraestructura: Es uno solo: .arpa, originalmente usado durante el proceso de tran-
sición de ARPANET a Internet. Hoy en día se usa solamente para aspectos de infraestructura téc-
nica.
TLD genérico (gTLD): El tipo más común. Hoy en día más de 1200, son variados pero ge-
neralmente palabras en inglés. Los primeros genéricos (y más usados) son .com, .org, .net, .edu.
Algunos son libres, y otros tienen restricciones, como .gov y .mil. (a estos se les conoce como ge-
néricos restringidos, grTLD).
TLD patrocinado (sTLD, sponsored): Se caracterizan por ser patrocinados por un ente que
representa una comunidad específica. Por ejemplo .app es patrocinado por Google, .int (para orga-
nizaciones multinacionales) por IANA.
TLD de código de país (ccTLD, country code): Siempre de dos letras, normalmente reser-
vados para un país específico, y son administrados por un ente determinado por la IANA. Algunos
son libres y otros tienen ciertos requerimientos (como tener residencia en el país en cuestión). El
ccTLD de Paraguay es .py, y está administrado por NIC-PY, que opera en el Centro Nacional de
Computación de la UNA.
TLD de prueba (tTLD, test): Son destinados específicamente para pruebas – los dominios
con .test nunca forman parte de los registros de DNS, por lo tanto se pueden usar en una red local
sin posibilidad de conflictos.
Unidad lll
6

Los siguientes siete gTLDs fueron los que se crearon primero, esto antes de la formación de la
ICANN en 1998.
Lista de gTLDs originales
(en cuanto a los últimos tres, las limitaciones son específicas a los TLDs listados “a secas”, no así
los combinados con ccTLDs – por ejemplo .edu.py, gov.py y mil.py son administrados por NIC-PY,
y no tienen las mismas restricciones).
Con un dominio asignado y listo, ahora los visitantes podrán llegar a nuestro servidor. En
cuanto al software necesario en el mismo, seguimos a continuación.
LAMP son las siglas de Linux, Apache, MySQL/MariaDB y PHP – cuatro elementos que forman lo
que se llama un stack o “pila” de componentes en un servidor Web. Es una de las soluciones más
populares destinadas a servidores web.
Linux es el sistema operativo de código abierto usado por la mayoría de los servidores web
del mundo. Su estabilidad y seguridad basada en UNIX, acompañados de un costo nulo de licen-
ciamiento al ser de código abierto son ideales para este propósito.
Apache HTTP Server es un servidor web (HTTP). También de código abierto, se encarga de
recibir las conexiones de clientes para presentar las páginas web en sus navegadores.
MySQL es un sistema de bases de datos relacional, que es propiedad actual de Oracle (por
esta razón, un grupo decidió crear un fork o derivado llamado MariaDB, el cual es mayormente
compatible con MySQL).
PHP es un lenguaje de scripts del lado del servidor, utilizado para dinamizar contenido en
páginas estáticas.
Otras variantes “AMP” son WAMP y MAMP (reemplazando Linux por Windows y MacOS,
respectivamente). Ya que Apache, MySQL/MariaDB y PHP están disponibles para las tres platafor-
mas, es posible hacer uso de estos sistemas operativos.
Software en el servidor – LAMP
Unidad lll
7

U3_Aplicaciones Web.pdf

Recomendados

Recomendados

Más contenido relacionado

Similar a U3_Aplicaciones Web.pdf

Similar a U3_Aplicaciones Web.pdf (20)

Más de VICTORMORO11

Más de VICTORMORO11 (9)

Último

Último (20)

U3_Aplicaciones Web.pdf