UNIVERSIDAD MARIANO GALVEZ DE GUATEMALA

FACULTAD DE INGENIERIA EN SISTEMAS DE

INFORMACION
INGENIERIA EN SISTEMAS DE INFORMACION
Ing. MBA. José González
umg.jmg@gmail.com
Cel.: 5414-6220

INTRODUCCION A LOS SISTEMA DE COMPUTO

Código 094-504
Clase 11
Internet
3

Internet, red de redes

Internet es la red de redes que interconecta
computadores mediante diferentes protocolos
Un ordenador se puede conectar a Internet
por medio de un servidor de red (mediante
tecnologías diversas)
Un ordenador puede conectarse a una red
local y los ordenadores de dicha red local
pueden conectarse a Internet mediante una
pasarela
Existen ordenadores permanentemente
conectados a Internet que ofrecen recursos
(son los servidores)
páginas web 3
4

Recursos en Internet
Los recursos accesibles en Internet se identifican
por un URI (identificador de recurso uniforme)
(URL)
p.e.
http://www.uv.es/cerveron/paginasweb/index.html
el protocolo con que acceder al recurso
el nombre (o dirección) del host
el nombre del recurso
Internet es el medio de comunicación para
diversas aplicaciones, que utilizan diferentes
protocolos, destacando el correo electrónico, la
transferencia de ficheros (FTP) y la web

páginas web 4
5

Recursos en Internet
Los recursos accesibles en Internet se identifican
por un URI (identificador de recurso uniforme)
(URL)
p.e.
http://www.uv.es/cerveron/paginasweb/index.html
el protocolo con que acceder al recurso
el nombre (o dirección) del host
el nombre del recurso
Internet es el medio de comunicación para
diversas aplicaciones, que utilizan diferentes
protocolos, destacando el correo electrónico, la
transferencia de ficheros (FTP) y la web

páginas web 5
La Web
7

La web
La web es un sistema de información
distribuido basado en hipertexto
Los usuarios, mediante un navegador
(cliente) solicitan recursos (normalmente
páginas web) a un servidor web
el cliente envía una petición
el servidor produce una respuesta (una página
HTML)
 [puede ser de error]

páginas web 7
8

World Wide Web ¿Cómo se

inició?
Tim Barnes Lee (CERN, 1989).
Repositorio estático de documentos:
Una forma cómoda de acceder a documentos
estáticos interrelacionados almacenados en
servidores distribuidos alrededor del mundo.
La especificación inicial incluía:
Un lenguaje para dar formato a los documentos
(HTML).
Un protocolo sencillo para comunicar
navegadores (clientes) y servidores (HTTP).

páginas web 8
9

El primer navegador
gráfico
En 1993 Marc Andreesen (estudiante) escribe
Mosaic. Precursor de Netscape.

páginas web 9
0

Cómo funciona la web

(1)
Para poder visualizar una página web es
preciso:
Tener un ordenador conectado a Internet:
 Establecer una conexión PPP con la máquina del ISP.

 El ordenador recibe una dirección IP temporal

 Usando DHCP (Dynamic Host Configuration Protocol)

 El ordenador recibe la dirección de un servidor de

nombres (DNS, Domain Name Server)

páginas web 10
11

Cómo funciona la web

(2)
Iniciar sesión en un navegador Web (ej.:
Internet Explorer, Mozilla, Netscape, etc.)
Indicar al navegador el URL de la página que
se desea "visitar".
El navegador pide al DNS la dirección IP
correspondiente al servidor que contiene el
documento cuyo URL se ha indicado.
El navegador abre una sesión TCP con la
máquina cuya dirección IP se ha obtenido.

páginas web 11
2

Cómo funciona la web

(3)
El navegador solicita al servidor que le
transmita el documento (orden GET).
El servidor web envía el documento.
La conexión TCP finaliza.
El navegador muestra el documento.

páginas web 12
 Cómo funciona la web
Abrir dirección “http://www.uv.es/cerveron/index.html”
Internet

Servidor Web
Cliente Web
(Mosaic, Netscape,
Internet Explorer, Firefox, etc.)

Servidor de nombres
(DNS)

páginas web 13
 Estructura de un URL
URL = Uniform Resource Locator

http://www.uv.es/cerveron/index.html

Nombre del protocolo de comunicación Localización del documento dentro del

con el servidor sistema de archivos del servidor web
(http es el estándar para web)

Nombre del dominio del servidor web

donde se almacena el documento

páginas web 14
 Cómo funciona la web
Abrir dirección “http://www.uv.es/cerveron/index.html”
Internet

Buscando 147.156.11.1
host:
www.uv.es

Servidor Web
¿dirección IP
Cliente Web
www.uv.es?
(Mosaic, Netscape,
Internet Explorer,
Servidor de nombres
Firefox, etc.)
(DNS)

páginas web 15
 Cómo funciona la web
Abrir dirección “http://www.uv.es/cerveron/index.html”
Internet
Envíame el documento
cerveron/index.html

Servidor Web

Cliente Web
(Mosaic, Netscape,
Internet Explorer,
Servidor de nombres
Firefox, etc.)
(DNS)

páginas web
Introducción a la tecnología web (parte 3)
16
7

WWW es un sistema
Cliente/Servidor
Clientes Web:
 Utilizan el protocolo HTTP para conectar con los
servidores.
 Solicitan y muestran las páginas web almacenadas en los
servidores.
 Clientes típicos: navegadores web (Explorer, Firefox).
Servidores Web:
 "Escuchan" conexiones entrantes desde clientes.
 Utilizan el protocolo HTTP para conversar con los clientes.
 Almacenan y transmiten páginas web a los clientes.
 Actualmente interactúan con el usuario y generan
dinámicamente páginas web

páginas web 17
8

Aplicaciones web
La web era al principio un conjunto de
páginas fijas
La evolución de la web ha llevado al
desarrollo de aplicaciones web
Una aplicación web es un programa
informático en la red (en un servidor) cuya
interacción con el usuario sea mediante un
navegador web
El programa recibe los inputs del usuario
El programa genera dinámicamente páginas
web que muestran información personalizada y
en su caso permiten al páginas
usuario
web seguir18
Paginas WEB
¿Qué es Internet?
Una red de redes TCP/IP
(Visión tecnológica)
Un conjunto de servicios entretenidos
(Visión del usuario final)
Una plataforma de soluciones integrales para la vida
diaria
(Visión estratégica)
La base operacional del futuro ...
Tiempo Real:
Nuevo Paradigma de Negocios
“Las empresas mejor equipadas
para el siglo 21 considerarán a los
sistemas en tiempo real como
esenciales para mantener su
ventaja competitiva y retener a sus
clientes….ellas usarán tecnología
de información y de
telecomunicaciones para responder
a circunstancias cambiantes y, aún
más importante, para responder a
lo que esperan los clientes dentro
del menor lapso de tiempo
posible.”
Reducciones
La capacidad de ver las cuentas en línea ha reducido
las llamadas al centro de llamados en un 5%
Cuando los clientes hacen reservaciones mediante
Internet, la compañía ahorra 25%
Oportunidad
El punto es encontrar cual es el factor crítico de éxito
tal que con ayuda de la tecnología se obtenga un gran
impacto
Pregunta
¿Cuál es nuestro negocio?
¿cuáles son nuestros clientes?
¿Cómo podemos generar un gran impacto sobre
nuestro negocio y nuestros clientes?
Ejemplos de Páginas Web
Ejemplos de Páginas Web
Ejemplos de Páginas Web
Ejemplos de Páginas Web
Ejemplos de Páginas Web
Introducción
El protocolo TCP/IP
Es un conjunto de normas que deben seguir los elementos
que conforman la red (hardware y software), para
garantizar un enlace coherente entre quien transmite y
recibe la información.
Este protocolo está formado por dos partes:
El protocolo TCP y el protocolo IP
Introducción

El protocolo TCP le dice a la computadora qué datos

componen la información que va a ser enviada.
El protocolo IP le dice a la computadora a donde debe
enviar la información
Introducción
Direcciones

Debido a la gran cantidad de usuarios conectados a la red,

ha sido necesario crear un sistema de direcciones, de modo
que cada computadora se identifique de manera única. Esta
identificación única es conocida como dirección IP.

Una dirección IP se compone de cuatro números entre 0 y

255, cada uno separado por un punto. Una dirección IP
sería 146.83.141.25.
Introducción
El organismo creado para administrar los números IP se
llama InterNIC.
Dominios
las direcciones IP, pueden ser difíciles de recordar. Por este
motivo, Internet emplea nombre de dominios para
ocultar la complejidad de la dirección numérica.
Ejemplo: 146.83.141.70
www.umag.cl
Introducción

Servidores de Nombre de Dominio(DNS), traducen los

nombres de dominio a direcciones IP para agilizar el acceso
a Internet.
World Wide Web
Hipertexto

El hipertexto consiste en permitir al usuario navegar entre

diferentes páginas Web. Para conseguirlo simplemente se
pulsa con el mouse sobre una palabra, icono o grafico,
resaltado de manera clara, obteniendo como respuesta el
cambio a una nueva página.
World Wide Web
Hipertexto

Al pulsar sobre un hiperenlace, el navegador recibe una

dirección. A continuación, el navegador localiza el servidor
que contiene el documento, se recibe una copia del
documento solicitado y se despliega la información en
pantalla.
World Wide Web
Localizador Uniforme de Recursos (URL)

El URL (Uniform Resource Locator) sirve como

identificador para todos los documentos Web. También se
conoce como dirección de página Web. Todo sitio y página
tiene un URL.
World Wide Web
Dominios de Organizaciones
Dominio Usuario.
com Organizaciones comerciales.
edu Instituciones educativas.
gov Organizaciones del Gobierno.
int Organizaciones internacionales.
mil Instituciones Militares.
net entidades con categoría de red.
org Organizaciones sin fines de lucro.
El lenguaje HTML
HTML (Hyper Text Markup Languaje, lenguaje de
composición de páginas hipertexto), es uno de los
lenguajes que se utilizan para escribir las páginas Web.

El hipertexto es un texto presentado de forma estructurada

y agradable, con enlaces que conducen a otros documentos
o fuentes de información, y con elementos multimedia
insertados en él (gráficos, sonidos, etc.)
El lenguaje HTML
Los documentos HTML se escriben en texto plano,
también conocido como texto ASCII, y se puede crear en
cualquier procesador de palabras y en cualquier sistema
operativo.
Los orígenes del lenguaje HTML se encuentran en el
lenguaje SGML (Standard Generalized Markup Language,
lenguaje estandarizado y generalizado de marcado). Este es
un conjunto de reglas que permiten la descripción y el
manejo del contenido de cualquier documento digital. A
pesar de su enorme potencia, SGML no es tan popular,
debido, a su alto grado de complejidad.
41

El lenguaje HTML
HTML es un lenguaje que permite incluir texto
junto a las indicaciones de cómo mostrarlo, cómo
y dónde incluir imágenes y cómo acceder
mediante enlaces a otros recursos en Internet (y
también posibilita la entrada de datos)
El navegador-cliente solicita y recibe del servidor
web una página y nos la presenta formateada
La página puede “pedir” al servidor imágenes (o
otros recursos) que están en archivos distintos de
la propia página web y son enviados por el
servidor y presentados por el cliente junto al
texto
páginas web 41
Construcción de una página Web.
En primer lugar, debemos notar que el Lenguaje HTML
consiste en una serie de etiquetas (tags), encerradas entre
los símbolos < y >. Cada etiqueta realiza una tarea de
formato diferente. Por ejemplo, si queremos que un texto
aparezca centrado, escribiremos la etiqueta <CENTER>
seguida por el texto que deseamos centrar, y cerrando la
instrucción con la etiqueta </CENTER>
Ejemplo:
<CENTER> Mi primera línea en html </CENTER>
Estructura básica de un documento
HTML.
Las etiquetas (tags) más comunes en una página Web son
las siguientes:
 HTML5

• La sección HEAD
• Contiene metainformación de la página
• Establecemos título y palabras clave para los
buscadores
• Incluimos hojas de estilo (CSS) a utilizar en la
página
• Podemos introducir código javascript a usar en
nuestra página.
• Referencia:
http://www.w3schools.com/html/html_head.asp
 HTML5

• La sección BODY
• Alberga el "contenido" real de la página.
• Establece cómo se visualizan los elementos.
• Hace uso de los scripts y hojas de estilo definidos
en la sección HEAD.
• En este punto tenemos a nuestra disposición de
todos los tags disponibles para maquetar nuestra
página.
• Referencia: Elementos HTML
¿Cómo crear páginas Web?
Editor de texto (Notepad, Wordpad)
Editor de HTML (HTMLed)
Aplicación compatible con HTML (Word, PowerPoint)
Editor de páginas Web (Composer)
Gestor de Webs (FrontPage, DreamWeaver)
El lenguaje HTML
Etiquetas
<center> Inicio de etiqueta
................ Elementos a los que afecta
</center> Cierre de etiqueta
Atributos
<table border="0" width="80%" ...>
.............
</table>
Estructura de un documento HTML
<HTML>
<HEAD>
<TITLE>Título</TITLE>
</HEAD>
<BODY>
Texto del documento, Gráficos, Enlaces, ...
</BODY>
</HTML>
Enlaces
Direcciones URL
Ficheros de otros servidores Web
Enlaces locales
Ficheros en el mismo sevidor
Enlaces internos
Destinos en el propio fichero
Envío de mensajes de correo
Direcciones URL
<A HREF = “http://www.upv.es”>
Universidad Politécnica de Valencia
</A>
Enlaces locales
1. Fichero en una
subcarpeta
2. Fichero en la misma 2
carpeta
3. Fichero en una
supercarpeta 1 3
Fichero en una subcarpeta
En index.htm:
Aficiones:
<A HREF = “aficiones/astronomia.htm”>
Astronomía
</A>
Fichero en la misma carpeta
En index.htm:
<A HREF = “splash.htm”>
Ver animación
</A>
Fichero en una supercarpeta
En astronomía.htm:
<A HREF = “../index.htm”>
Volver al principio
</A>
Enlaces internos
Destino del enlace
<A NAME = “nombre” > texto </A>

Enlace desde el propio fichero

<A HREF = “nombre”> texto </A>

Enlace desde fuera

<A HREF = “http://www.upv.es/ficheronombre”> texto
</A>
Envío de mensajes de correo
<A HREF = “mailto:jlhueso@mat.upv.es?tema”>
Inclusión de imágenes
Enlace a la imagen
<IMG SRC = “imagen.gif” ALT = “Texto”> </IMG>
La imagen como enlace
<A HREF = “dirección de destino”>
<IMG SRC = “imagen.gif”> </IMG> </A>
Formato de la imagen
Borde
<IMG SRC = “imagen.gif” BORDER = “0”> </IMG>
Tamaño
<IMG SRC = “imagen.gif” BORDER = “0”> </IMG>
Alineación del texto
Códigos de color
Sistema con 16 dígitos
1 2 3 4 5 6 7 8 9 A B C D E F
#rrggbb
#FFFFFF  Blanco
#000000  Negro
#FFFF00  Amarillo
Colores en una página
Texto normal
<BODY TEXT = “black”>
Texto del enlace
<BODY LINK = “blue”>
Enlace visitado
<BODY VLINK = “#rrggbb”>
Enlace activo (en descarga)
<BODY ALINK = “#rrggbb”>
Fondo de la página
Color
<BODY BGCOLOR = “white”>
Imagen
<BODY BACKGROUND = “imagen.gif”>
HTML: tablas
Tablas: permiten la definición de estructuras
rectangulares
uno dos
<table border="1">
<tr> tres cuatro
<td>uno</td><td>dos</td>
</tr>
<tr>
<td>tres</td><td>cuatro</td>
</tr>
</table>
HTML: tablas, colspan
<table border="1">
<tr>
<td colspan="2">uno</td>
</tr>
<tr>
<td>tres</td><td>cuatro</td>
</tr>
</table> uno
tres cuatro
HTML: tablas, rowspan
<table border="1">
<tr>
<td rowspan="2">uno</td><td>dos</td>
</tr>
<tr>
<td>cuatro</td> uno dos
</tr>
cuatro
</table>
HTML: tablas, encabezados
<table border="1">
<tr>
<th>uno</th><th>dos</th>
</tr>
<tr>
<td>tres</td><td>cuatro</td>
</tr>
</table> uno dos
tres cuatro
HTML: tablas, bordes y espacios
¡Usar CSS!
<table> uno dos
tres cuatro
<table border="4">
uno dos
tres cuatro
cellpadding="10"
cellspacing="10"
PRACTICA
Agenda Para la Semana No.11
Laboratorio
Tareas
Casos
Proyectos
Investigaciones
Instalar Software Start UML, Embarcadero y Oracle
Clase Magistral (Clase No.9)