Está en la página 1de 26

INSTITUTO TECNOLGICO

BOLIVIA MAR
CARRERA DE SISTEMAS INFORMTICOS

DISEO Y PROGRAMACIN WEB I


Lic. Gabriel Alejandro Mamani Titto
2015

La Web - www
La World Wide Web
(Red
de
Alcance
Mundial)
es
una
coleccin
de
documentos
electrnicos que estn
vinculados entre s,
como
una
gran
telaraa.

Estos documentos estn


almacenados
en
computadores
llamados
servidores
situados
en
cualquier parte del mundo.

Internet

Servidor Web

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

LIC. GABRIEL ALEJANDRO MAMANI TITTO - 2014

Conformacin de la Web

LIC. GABRIEL ALEJANDRO MAMANI TITTO - 2014

De un computador personal

Un programa explorador para


acceder a la Web (Navegador).

Una conexin a un proveedor


de servicios de Internet (ISP,
Internet Service Provider)

Servidores para albergar los


datos

Enrutadores y conmutadores
para dirigir el flujo de datos

Navegador
Programa
informtico
que
permite visualizar la informacin
contenida en una pgina web, ya
sea alojada en Internet o en un
servidor local.

Los navegadores ms populares


son el Internet Explorer, Mozilla
Firefox, Google Chrome, Safari,
Opera y algunos otros.

Pone rpida y sencillamente al


alcance del usuario, toda la
informacin que ha sido subida
por desarrolladores de todo el
mundo.
Son
utilizados
en
los
ordenadores,
pero
tambin
muchos
dispositivos
mviles
como celulares o tabletas que
pueden
integrar
estas
aplicaciones para su uso en todo
momento.
LIC. GABRIEL ALEJANDRO MAMANI TITTO - 2014

Navegador
Tiene
herramientas
necesarias para interpretar
el cdigo de una pgina, el
cual puede constar de uno o
varios
lenguajes
de
programacin, y presentar el
contenido en pantalla de
modo tal que el usuario
pueda interactuar con la
informacin y navegar hacia
otras pginas a travs de
enlaces (tambin conocidos
como hipervnculos o links).

Aseguran una experiencia segura al usuario, protegindolo de


errores, virus y otros elementos nocivos que pueden hallarse en
la web y afectar la computadora que realiza la navegacin.

LIC. GABRIEL ALEJANDRO MAMANI TITTO - 2014

Funcionamiento de la Web

1.

Iniciar sesin en un navegador


Web (ej.: Internet Explorer,
Mozilla, Google Chrome, etc.)

2.

Indicar al navegador el URL de


la pgina que se desea
"visitar".

URL = Uniform Resource Locator (Identificador de recurso uniforme)


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

Nombre del
protocolo de
comunicacin
con el servidor
(http es el
estndar para
web)
LIC. GABRIEL ALEJANDRO MAMANI TITTO - 2014

Nombre del
dominio del
servidor web
donde se
almacena el
documento

Localizacin
del
documento
dentro del
sistema de
archivos del
servidor web

3. El navegador pide al
DNS la direccin IP
correspondiente
al
servidor que contiene el
documento cuyo URL se
ha indicado.
Abrir direccin http://www.uv.es/cerveron/index.html
4. El navegador abre
Internet
una sesin TCP con la
mquina cuya direccin
IP se ha obtenido.

Funcionamiento de la Web

Buscando
host:
www.uv.es

147.156.11.1

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

direccin IP
www.uv.es?

LIC. GABRIEL ALEJANDRO MAMANI TITTO - 2014

Servidor de nombres
(DNS)
7

Funcionamiento de la Web

5. El navegador solicita
al
servidor
que
le
transmita el documento.
6. El servidor web enva
el documento.

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


7. El navegador muestra
el documento.
Internet
Envame el documento
cerveron/index.html

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

LIC. GABRIEL ALEJANDRO MAMANI TITTO - 2014

Servidor de nombres
(DNS)
8

Pgina Web
Una pgina web
es un documento
electrnico escrito en
un lenguaje llamado
HTML.
Las
pginas
Web
pueden
contener
texto,
grficos,
vdeo, animaciones,
sonido y elementos
interactivos.
Cada pgina tiene
una direccin nica
que se denomina
una
URL
que
identifica
su
ubicacin
en
el
servidor.
LIC. GABRIEL ALEJANDRO MAMANI TITTO - 2014

Pgina Web Esttica


Fueron el primer tipo de
pginas que aparecieron
durante el desarrollo y
expansin de Internet.
Son
aquellas
cuya
informacin no vara en un
tiempo a medio o a corto
plazo, tambin se las
reconoce puesto que no
interactan con el usuario
o navegante, y estn
compuestas principalmente
de textos e imgenes.
Por otro lado cada vez que se
necesite modificar alguna parte de la
web es necesario conectarse al
servidor donde est alojado y subir
los documentos modificados, cosa
que conlleva tiempo y esfuerzo.
LIC. GABRIEL ALEJANDRO MAMANI TITTO - 2014

10

Pgina Web Dinmica


Son aquellas que son capaces de
interactuar con el usuario, dado
que estn conectadas conBASES
DE DATOS que permiten el
desarrollo de aplicaciones webs.

Desarrolladas
bajo
lenguajes de programacin
como PHP, ASP, JSP o
RUBY, el manejo de dichos
lenguajes
requiere
de
ciertos
conocimientos
informticos.

LIC. GABRIEL ALEJANDRO MAMANI TITTO - 2014

11

Pginas Web Pblicas y Privadas


Las pginas privadas son
aquellas que solo pueden
acceder un nmero limitado de
personas que puedan ser
identificadas y reconocidas por
el sistema de acceso,
Hoy en da dentro de un mismo sitio web
descritas.

Las pginas pblicas son


accesibles
por
cualquier
persona que disponga de una
conexin a Internet.
existen las 4 clases de pginas

Pginas web de un banco


Es una pgina privada puesto que su acceso est restringido a las
personas que puedan autentificarse mediante claves o password
El acceso a nuestra cuenta bancaria es una pgina dinmica dado a que
el saldo disponible cambia instantneamente cuando realizamos una
compra
Las pginas son estticas como: direcciones de contacto o informacin
global sobre el sitio como las polticas de uso, y a su vez estas pginas
son pblicas dado a que se requiere ningn tipo de autentificacin para
acceder a ellas
LIC. GABRIEL ALEJANDRO MAMANI TITTO - 2014

12

Sitio Web
Se compone de una o ms
pginas web referidas a un
asunto comn, como a una
persona,
un
negocio,
una
organizacin o a un tema.
La primera pgina se llama la
pgina de inicio, y hace las
funciones de un ndice, indicando
el contenido del sitio.

Una portada opgina inicial


Un ndice omen
Diferentes captulos opginas
de contenido y aplicacin web
Los datos del autor o lapgina
de contacto
As que cuando entro en la pgina
principal de unsitio web, es
como si fuera la portada de un
libro, desde donde puedo acceder
a las pginas principales de sitio
web navegando por el men.

LIC. GABRIEL ALEJANDRO MAMANI TITTO - 2014

13

Sitio Web

LIC. GABRIEL ALEJANDRO MAMANI TITTO - 2014

14

Hipervnculos
Las
pginas
Web
contienen generalmente
hiperenlaces a otras
pginas web.

LIC. GABRIEL ALEJANDRO MAMANI TITTO - 2014

Los hiperenlaces son


textos e imgenes que
hacen
referencia
a
URLs de otras pginas
web.

15

Hipervnculos
Al hacer click sobre
diferentes partes de un
grfico
vinculado,
llamado un mapa de
imagen, se desplazar a
diferentes pginas web o
a
diferentes
puntos
dentro de la misma
pgina.
Adems de apuntar a
pginas
web,
los
hipervnculos pueden
acceder
a archivos
multimedia, como clips
de sonido o video.

LIC. GABRIEL ALEJANDRO MAMANI TITTO - 2014

16

Blogs
Un blog, es un sitio web
que
recopila
cronolgicamente textos
o artculos de uno o
varios
autores,
apareciendo primero el
ms reciente.
Habitualmente, en cada
artculo,
los
lectores
pueden
escribir
sus
comentarios y el autor
darles
respuesta,
de
forma que es posible
establecer un dilogo.
El uso o temtica de cada
blog es particular, los hay
de
tipo
personal,
periodstico, empresarial
o
corporativo,
tecnolgico,
educativo,
LIC. GABRIEL ALEJANDRO MAMANI TITTO - 2014
etc.

17

Estructura bsica de una pgina web


Logo, un ttulo o eslogan,
informacin de contacto y
el men para navegar por
las pginas.

Contenido ms relevante
para
esa
pgina
en
particular

informacin de contacto,
un men a las pginas ms
relevantes, links a otras
webs
y
en
general
contenido complementario
referente a la temtica del
LIC.
GABRIEL
ALEJANDRO MAMANI TITTO - 2014
sitio
web.

18

Bloque de Navegacin a la izquierda

LIC. GABRIEL ALEJANDRO MAMANI TITTO - 2014

19

Bloque de Navegacin arriba

LIC. GABRIEL ALEJANDRO MAMANI TITTO - 2014

20

Bloque de Navegacin a la derecha

LIC. GABRIEL ALEJANDRO MAMANI TITTO - 2014

21

Estructura combinada

LIC. GABRIEL ALEJANDRO MAMANI TITTO - 2014

22

Estructura combinada

LIC. GABRIEL ALEJANDRO MAMANI TITTO - 2014

23

ACTIVIDADES EVALUATIVAS
1. DILOGO
Preguntas:
Cul es la principal ventaja o uso comn que encontramos en la web?
Cules son los elementos principales que una pgina web debe tener
para ser atractiva y llamativa para el usuario?
Qu navegador web es mas eficiente al momento de navegar por la
web?
Qu servicios de comunicacin de informacin nos proporciona la web?
Cmo identificamos las diferencias entre navegar un sitio web por
medio de un celular y una computadora?
Ser necesario desarrollar sitios y aplicaciones web que sean aptos
para la navegacin en dispositivos mviles?
LIC. GABRIEL ALEJANDRO MAMANI TITTO - 2014

24

ACTIVIDADES EVALUATIVAS
2. PROYECTO
Situacin: Al inicio del semestre los estudiantes conformaran grupos de
trabajo para disear e implementar un sitio web que permita realizar la
publicacin de noticias, eventos, actividades de una empresa, aadir
una aplicacin que permita mantener el contacto permanente entre
usuarios (chat) y una pgina en la cual se pueda compartir archivos
entre usuarios. El da de la presentacin el grupo deber explicar cmo
se desarroll el sitio web, explicando la metodologa utilizada, el nivel de
formalizacin de la base de datos, las herramientas utilizadas, adems
de mostrar las principales funciones solicitadas.
Instrucciones para el estudiante: Disear e implementar un sitio
web para la empresa, que permita al usuario en primer lugar
autentificarse, editar su perfil, publicar una actividad, comentar
publicaciones, compartir archivos y mantener comunicacin mediante
un chat con otros usuarios. La prueba funcional requiere que el sistema
desarrollado responda a los procesos mencionados, y tener una buen
diseo y administracin de la base de datos.

LIC. GABRIEL ALEJANDRO MAMANI TITTO - 2014

25

ACTIVIDADES EVALUATIVAS
2. PROYECTO
Los criterios de evaluacin se darn en dos niveles:
la calidad de la presentacin oral
la funcionalidad del sistema.

La presentacin oral ser evaluada en trminos de:

Claridad expresiva.
Conocimiento de los procesos del sistema web.

El producto ser evaluado en trminos de:

Eficacia en los tiempos de ejecucin.


Aplicacin de la Metodologa de desarrollo.
Navegabilidad del sitio web.
Creatividad.
Funcionalidad.
LIC. GABRIEL ALEJANDRO MAMANI TITTO - 2014

26