Computación III

Funcionamiento de la web

Cliente: browsers, teléfonos móviles, e-mail, chat, etc.

Servidores: son las aplicaciones que guardan y envían el contenido al cliente
ftp (file transfer protocol), pop (post office protocol), db (DataBase), dns (domain name
system), php (hypertext pre-processor).

URL (uniform resource location)

Es la dirección única de un archivo en Internet y se utilizan para establecer vínculos a ar-
chivos en la web, también se pueden usar para establecer vínculos a archivos de un servidor
de red o del sitio de intranet de alguna organización.

Estructura de la url
ejemplo de una dirección absoluta

dominio de
subdominio dominio nivel superior carpeta página

h ttp://w w w.u n l a.edu.ar / licenciatur as/ diseno-y-comunicacion-visual

protocolo nombre del recurso

Top Level Domain (dominios de nivel superior)

.com comercial .info informativo
.net infraestructura .biz pequeñas empresas
.org sin fines de lucro .name sitios personales
.edu instituciones educativas

Por paises
.ar Argentina
.cn China
.uk Reino Unido
.nl Holanda

Protocolos
http (hypertext transfer protocol)
ftp (file transfer protocol)
smtp (simple mail transfer protocol)
rtp (realtime transport protocol)

Ejemplo de funcionamiento de la web

subdominio
web server
browsers
.edu DNS Server
www
index.html undav
nosotros.html
unla
trabajos.html
contacto.html unlp
css
unlz
video
unqui
ftp
untref

1
 Ejemplo cliente / servidor

El cliente envia una solicitud de una URL, el DNS devuelve un número de dirección de IP,
con este el navegador localiza su ubicación en un servidor. Este servidor recibe la solicitud
y le envia al navegador la información del sitio en un formato (html, css, php, javascript)
que pueda mostrarlo.

www.unla.edu.ar
browser DNS
19.611.612

HTML
PHP

Hosting
Server
.css .js .jpg .swf .svg

Browsers / navegadores, motores de renderizado

Es un programa que permite visualizar la información que contiene una página web, inter-
preta el código HTML y lo presenta en pantalla permitiendo al usuario interactuar con su
contenido y navegar hacia otros lugares de la red mediante enlaces o hipervínculos.
La razón por la que una página se visualiza de manera diferente en los distintos navega-
dores es porque estos utilizan diferentes motores de renderizado. Estos utilizan diferentes
tecnologías para poder mostrar el contenido del sitio web.

Gecko utilizado en Firefox, Mozilla Suite .

Trident EdgeHTML el motor de Microsoft Edge.
WebKit el motor de Google Chrome, Safari y Opera.
Blink el nuevo motor de Google Chrome (es un fork de WebKit).
Servo nuevo motor en desarrollo por parte de Mozilla (con el apoyo de Samsung), está
siendo optimizado para la arquitectura ARM y la plataforma Android.

HTML (HyperText Markup Language)

Significa Lenguaje de marcado de hipertexto y es el que se utiliza para crear documentos

para web, se trata de un conjunto de etiquetas que sirven para definir el texto y otros ele-
mentos que componen una página web. Además de HTML, existen muchos otros lenguajes
de etiquetas como XML, SGML, DocBook y MathML.

La principal ventaja de los lenguajes de etiquetas es que son muy sencillos de leer y escribir
por parte de las personas y de los sistemas electrónicos. La principal desventaja es que pue-
den aumentar mucho el tamaño del documento, por lo que en general se utilizan etiquetas
con nombres muy cortos.

El primer HTML se publicó en 1991 bajo el nombre HTML Tags (Etiquetas HTML). En
1996, los estándares de HTML son estandarizados por la W3C (World Wide Web Consor-
tium). La primera recomendación de HTML publicada por el W3C La versión HTML 3.2 se
publicó en 1997, donde incorpora los últimos avances de las páginas web desarrolladas
hasta 1996, como applets de Java y texto que fluye alrededor de las imágenes. En 1998 se

2
publicó HTML 4.0 la cual es un gran salto desde las versiones anteriores. Entre sus noveda-
des más destacadas se encuentran las hojas de estilos CSS, la posibilidad de incluir pequeños
programas o scripts en las páginas web, mejora de la accesibilidad de las páginas diseñadas,
tablas complejas y mejoras en los formularios. En diciembre de 1999 la W3C publica la úl-
tima actualización de HTML 4.1, sin cambios significativos. En el 2004, las empresas Apple,
Mozilla y Opera preocupadas por la falta de interés del W3C en HTML se organizaron en
una nueva asociación llamada WHATWG (Web Hypertext Application Technology Working
Group), su actividad se centró en el futuro estándar HTML 5, cuyo primer borrador oficial
se publicó en enero de 2008. Dada la fuerza de las empresas que forman el grupo WHATWG
y a la publicación de los borradores de HTML 5, en marzo de 2007 el W3C retoma la activi-
dad estandarizadora de HTML.

Las páginas HTML se dividen en dos partes: la cabecera (head) y el cuerpo (body). La cabe-
cera incluye información sobre la propia página, como por ejemplo su título y su idioma.
El cuerpo de la página incluye todos sus contenidos, como párrafos de texto e imágenes.

www.unla.edu.ar
<head>
<html>

<body>

<head> contiene todo lo que no se ve salvo el título

<body> contiene todo lo que el usuario ve en la pantalla

Ejemplo de código HTMl:

<html>

<head>
<title>Primer documento HTML</title>
</head>

<body>
<p>El lenguaje HTML es <strong>muy sencillo</strong> que se
entiende sin estudiar el significado de sus etiquetas principales.</p>
<p>Tambi&eacute;n podemos agregar texto en <i>it&aacute;lica</i>
adem&aacute;s de <b>negrita</b></p>
</body>

</html>

<html>: indica el comienzo y el final de un documento HTML. En el interior de la etiqueta

<html> se definen la cabecera y el cuerpo del documento HTML y todo lo que se coloque
fuera de la etiqueta <html> se ignora.
<head>: delimita la parte de la cabecera del documento. La cabecera contiene información
sobre el propio documento HTML, como por ejemplo su título y el idioma de la página. Los
contenidos indicados en la cabecera no son visibles para el usuario, con la excepción de la
etiqueta <title>.
<body>: delimita el cuerpo del documento HTML. El cuerpo encierra todos los contenidos
que se muestran al usuario (párrafos de texto, imágenes, tablas, div, etc.).

En general, el <body> de un documento contiene cientos de etiquetas HTML, mientras que

el <head> no contiene más que unas pocas.

3
Etiquetas

Apertura <> y cierre </> Acción

< !-- --> Comentario

<html> </html> Al principio y al fin de todo documento
<meta> Metainformación ubicada en <head>
<head> </head> Encabezado del documento
<title> </title> Título dentro de <head>
<body> </body> Cuerpo del documento
<font> </font> Definición de la fuente
<h1 ...h6> </h1 .../h6> Tamaño de títulos del 1 al 6
<small> </small> Disminuye el tamaño de la fuente
<strong> </strong> Formato enfatizado
<i> </i> Itálica
 Subíndice
 Superíndice
<s> </s> Texto tachado
<em> </em> Formato enfatizado en itálica
<a></a> Hipervínculo.
<bgsound> Sonido de fondo
<blink> </blink> Hace parpadear el texto
<kbd> </kbd> Formato monoespaciado
<hr> Línea horizontal
<p> </p> Párrafo
<blockquote> </blockquote> Da formato con sangría a un párrafo
<br> Retorno de línea
<nobr> Elimina los saltos de líneas
<table> </table> Tabla
<tr> </tr> Fila de una tabla
<td> </td> Data de una fila en una tabla, dentro de <tr>
<th> </th> Título de Tabla
<center> </center> Centrar
<div> </div> Define un bloque de contenido
<li></li> Ítem de lista
<ol> </ol> Lista ordenada, con elementos de <li>
<ul> </ul> Lista no ordenada, con elementos de <li>
<img> Cargar imágenes
<form> </form> Ingreso de datos del usuario en un formulario
<input> </input> Define un objeto de ingreso en un formulario
<option> Opción de selección dentro de un formulario
<select> </select> Selección de opciones dentro del formulario
<textarea> </textarea> Área para ingreso de texto en un formulario
<embed> Para embeber contenido externo de otro tipo
<var> </var> Formato tipo variable

Novedades HTML5

Las novedades de la versión 5 son una serie de etiquetas útiles en la web actual, sencillo de
aprender y de aplicar a los sitios web, así como el propio lenguaje de marcación es también
sencillo de asimilar. Se pueden clasificar en dos partes:
Etiquetas que nos traen soporte a nuevas funcionalidades: aquellas que nos sirven para
extender el HTML, dando soporte a asuntos como el vídeo o el sonido, lienzos donde dise-
ñar dibujos, etc.
Etiquetas que componen la web semántica: etiquetas que realmente no proponen nuevas
funcionalidades, sino que sirven para componer sitios indicando qué son los bloques de
código de una web, en lugar de cómo se deben representar.

4
Apertura <> y cierre </> Acción

Nuevas funcionalidades

<audio> Insertar sonido dentro de una web

<video> Insertar clips de video
<source> Especifica varias fuentes diferentes cuando se insertan
elementos en audio y video
<track> Especifica varias pistas de sonido o video para los
elementos audio y video
<canvas> Genera un lienzo en la página donde realizar cualquier
tipo de diseño, soporta dibujo de todo tipo de formas,
degradados, imágenes, etc

Nuevos elementos de formularios

<meter> Trabaja con medidas y escalas

<progress> Implementa barras de progreso
<datalist> Extensión para crear campos con funcionalidad de
autocompletar
<keygen> Genera claves pública y privada para encriptación
<output> Realiza y muestra cálculos matemáticos

Elementos para la web semántica

<header> Cabecera de una página

<aside> Parte de la web que muestra contenido accesorio,
generalmente colocado en un panel lateral
<nav> Navegador principal de una página web
<article> Especifica un artículo, una unidad de contenido
<section> Una sección dentro de un documento
<footer> Pie de página o informaciones que formen el pie
de una sección.
<bdi> Una parte del texto que debe ser entendido
aparte de la línea de contenido que se esté escribiendo
<menu> Una lista de opciones que formen parte de un menú
<command> uno de los elementos de un menú de opciones
<summary> Encabezamiento para detalles especificados en details
<details> Detalles o información suplementaria que se puede ver
u ocultar por el usuario
<figure> Un contenido que ilustre el artículo, como fotos,
diagramas, ilustraciones, etc
<figcaption> Epígrafe de un figure
<hgroup> Un grupo de encabezados, útil cuando se tiene diversos
bloques de encabezados del mismo nivel h1, h2...
<mark> Texto o información que es remarcable
<time> Para escribir una fecha, una hora o ambas
<wbr> Define un posible salto de línea