diseño web de manera muy general

1. PROGRAMACION WEB
1. Introducción a las tecnologías W

2. PROGRAMACION WEB
Arquitectura.
1.1 Evolución de las aplicaciones web.
1.2 Arquitectura de las aplicaciones
web.
1.3 Tecnologías para el desarrollo de
aplicaciones web.
1.4 Planificación de aplicaciones web.
1Analizar, diseñar y planificar aplicaciones
web.

3. Indicadores
1. Evolución de las aplicaciones web.
• Reporte de representación en forma gráfica la evolución y
arquitectura de las aplicaciones web.
• Exposición en equipo las diferentes tipos de sitios web.
• Reporte “video” de Instalación de un servidor web (Wampserver).
2. Planificación de aplicaciones web.
• Reporte Investigación previa desarrollo de proyecto.
• Reporte de modelado y planificación de la construcción de un sitio
web.
• Diagrama de navegación de un sitio web.
3. Portafolio digital de evidencias.
• Evidencias: Evolución de las aplicaciones web.
• Evidencias: Planificación de aplicaciones web.
• Evidencias: Proyecto integrador

4. 1.1 Evolución de las aplicaciones
web.
Los inicio de Internet nos remontan a los
años 60. En plena guerra fría, Estados
Unidos crea una red exclusivamente militar,
con el objetivo de que, en el hipotético caso
de un ataque ruso, se pudiera tener acceso
a la información militar desde cualquier
punto del país. Este red se creó en 1969 y
se llamó ARPANET. En principio, la red
contaba con 4 ordenadores distribuidos
entre distintas universidades del país. Dos
años después, ya contaba con unos 40
ordenadores conectados. Tanto fue el
crecimiento de la red que su sistema de
comunicación se quedó obsoleto. Entonces
dos investigadores crearon el Protocolo
TCP/IP, que se convirtió en el estándar de
comunicaciones dentro de las redes
informáticas (actualmente seguimos
utilizando dicho protocolo).

5. Internet - Historia

ARPANET siguió creciendo y
abriéndose al mundo, y
cualquier persona con fines
académicos o de investigación
podía tener acceso a la red. Las
funciones militares se
desligaron de ARPANET y
fueron a parar a MILNET, una
nueva red creada por los
Estados Unidos. La NSF
(NationalScienceFundation)crea
su propia red informática
llamada NSFNET, que más
tarde absorbe a ARPANET,
creando así una gran red con
propósitos científicos y
académicos.
El desarrollo de las redes
fue abismal, y se crean
nuevas redes de libre
acceso que más tarde se
unen a NSFNET, formando
el embrión de lo que hoy
conocemos como
INTERNET.

6. Internet - Historia


En 1985 la Internet ya era una
tecnología establecida,
aunque conocida por unos
pocos
En el Centro Europeo de
Investigaciones
Nucleares(CERN), Tim
BernersLee dirigía la
búsqueda de un sistema de
almacenamiento y
recuperación de datos.
BernersLee retomó la idea de
Ted Nelson (un proyecto
llamado "Xanadú" )de usar
hipervínculos. Robert
Caillauquien cooperó con el
proyecto, cuanta que en 1990
deciden ponerle un nombre al
sistema y lo llamarón
WorldWideWeb (WWW)o
telaraña mundial.
La nueva formula
permitía vincular
información en forma
lógica y atravésde las
redes. El contenido se
programaba en un
lenguaje de hipertexto
con "etíquetas" que
asignaban una función a
cada parte del contenido.
Luego, un programa de
computación, un
intérprete, eran capaz de
leer esas etiquetas para
despeglarla información.
Ese interprete sería
conocido como
"navegador" o "browser".

7. Internet - Historia

En 1993 Marc
Andreesenprodujo la primera
versión del navegador "Mosaic",
que permitió acceder con mayor
naturalidad a la WWW.La
interfaz gráfica iba más allá de
lo previsto y la facilidad con la
que podía manejarse el
programa abría la red a los
legos. Poco después
Andreesenencabezó la creación
del programa Netscape.

A partir de entonces Internet
comenzó a crecer más rápido
que otro medio de
comunicación, convirtiéndose
en lo que hoy todos
conocemos.

8. Internet
Internet es definido como una red global
de computadoras, cuya finalidad es
permitir el intercambio libre de
información entre todos los usuarios
conectados mediante el TCP/IP al
WWW.

9. Conceptos básicos








Internet.
Protocolos del Internet TCP/IP.
Servicios de Internet.
Sitios Web.
Hospedaje web
Navegadores
Buscadores
¿Cuáles son los principales
beneficios de tener un Sitio
Web?

10. Protocolos del Internet.
En cualquier tipo de comunicación, ya
sea entre personas o entre máquinas,
siempre hace falta una serie de normas
que regulen ese proceso, en el caso de
las máquinas, las normas las establecen
los organismos internacionales de
normalización, y son aplicados por las
computadoras de acuerdo con el
protocolo que tenga instalado; por lo que
se entiende como protocolo a un
conjunto de reglas que emplean dos
equipos de informáticos para dialogar
entre si, de tal forma que puedan
establecer una comunicación libre de
errores

11. Protocolos del Internet.

Protocolo de Internet, Internet Protocol
(IP).
IP es el protocolo que determina los
procedimientos de direccionamiento y
encaminamiento, encargándose de depositar los
datos en las direcciones correspondientes de la
manera más eficiente posible es un protocolo no
fiable y no orientado a conexión.

12. Protocolos del Internet.

Protocolo de Control de Transporte,
Transmission Control Protocol (TCP)
Es el protocolo principal del conjunto. “TCP es
un protocolo orientado a conexión que utiliza
los servicios del nivel de Internet. Al igual que
en todo protocolo orientado a conexión consta
de las tres fases”.
Establecimiento de la conexión:
Transferencia de los datos:
Liberación de la conexión:

13. Protocolos del Internet.

Transferencia de archivos,
Transfer Protocol (FTP).
File
FTP es uno de los diversos protocolos del
Internet, y es ideal para transferir datos en la
red, dentro de los usos del Internet es el poder
tener acceso a los archivos que residen en las
computadoras remotas y transferirlos directo a
la propia; estos archivos van desde
documentos de texto, imágenes, archivos de
sonido o programas.

14. Protocolos del Internet.

Protocolo de Datagrama de Usuario, User
Datagram Protocol (UDP).
El UDP es un protocolo que se basa en el
intercambio de datagramas, permitiendo su
envío a través de la red sin que se haya
establecido previamente una conexión, ya que
el propio datagrama incorpora suficiente
información de direccionamiento en su
cabecera

15. Protocolos del Internet.

Protocolo Simple de Transferencia de
Correo Electrónico, Simple Mail Transfer
Protocol (SMTP)
Parte de la familia del
TCP/IP, el SMTP define el
formato exacto que deben de
tener los mensajes de correo
electrónico y el cómo estos
mensajes han de ser
tratados en la red

16. Protocolos del Internet.

Telnet (conexiones remotas).
Telnet hace uso de la terminal virtual de red (NVT),
como apoyo para modelar la comunicación entre dos
entidades.

Protocolo de trasferencia de Noticias, Network
News Trasfer Protocol (NNTP).
Se utiliza para el intercambio de mensajes de grupos
de noticias entre los servidores de News

17. Protocolos del Internet.

Protocolo de Transferencia de Archivos
Trivial, Trivial File Transfer Protocol (TFTP).
El TFTP es utilizado para la transferencia de
pequeños archivos entre computadoras de la
red “se utiliza en casos donde no se necesita
la extensa funcionalidad y complejidad del
FTP

18. Protocolos del Internet.

Protocolo de trasferencia de hipertexto,
Hipertext transfer protocol (HTTP).
Es uno de los protocolos mas recientes. Es
utilizado para el manejo de consultas de
hipertexto y acceso de datos en el WWW.
considerado como un protocolo de Solicitudrespuesta.

19. Servicios de Internet.
Internet basa su
utilidad en los servicios
de:
WWW
E-Mail
Servicio de noticias
acceso remoto
Transferencia de
archivos

20. Sitios Web
Una Página de Internet o Página
Web es un documento que
contiene información específica
de un tema en particular y que es
almacenado en algún sistema de
cómputo que se encuentre
conectado a la red mundial de
información denominada Internet,
de tal forma que este documento
pueda ser consultado por
cualesquier persona que se
conecte a esta red mundial de
comunicaciones. Un Sitio Web es
un conjunto de páginas Web
relacionadas entre sí.

21. Hospedaje web
Para poder poner una página web en Internet, es necesario contratar a
alguna empresa con servidores que pueda alojarla y hacerla accesible
desde Internet las 24 horas del día. El precio por disponer de espacio
propio en el servidor dependerá de la empresa, del espacio en disco,
volumen de transferencia y otras opciones que podamos contratar.
Hay empresas que ofrecen este servicio
gratuitamente, pero con ciertas
limitaciones: poco espacio de disco, lentitud
y nombre de nuestra página precedido por
el de la suya. Hay que tener también en
cuenta que estas empresas deben generar
ingresos de alguna forma, por lo que se
dedican a vender espacios publicitarios
dentro de nuestras páginas, publicidad que
no podremos negarnos a incluir en ellas.

22. Navegadores

Un navegador web o explorador web (del inglés,
navigator o browser) es una aplicación software libre
que permite al usuario recuperar y visualizar
documentos de hipertexto, comúnmente descritos en
HTML, desde servidores web de todo el mundo a través
de Internet.

Los navegadores actuales permiten mostrar o ejecutar:
gráficos, secuencias de vídeo, sonido, animaciones y
programas diversos además del texto y los
hipervínculos o enlaces.

23. Buscadores

Un buscador es un tipo de software
que crea índices de bases de datos o
de sitios web en función de los títulos
de los ficheros, de palabras clave, o
del texto completo de dichos ficheros.
El usuario conecta con un buscador y
especifica la palabra o las palabras
clave del tema que desea buscar. El
buscador devuelve una lista de
resultados presentados en hipertexto,
es decir que se pueden pulsar y
acceder directamente al fichero
correspondiente.

24. ¿Cuáles son los principales
beneficios de tener un Sitio Web?

Facilitar la comunicación
entre gobierno,
instituciones educativas,
empresas, asociaciones y
personas físicas, con el
propósito de establecer
una relación aún más
estrecha entre ellos.
Particularmente en el
aspecto comercial,
fomentar una mayor
comunicación entre
clientes y empresas
estableciendo un modelo
de operación del negocio
más orientado al cliente.

25. 1.2 Arquitectura de las aplicaciones
web.

26. Funcionamiento

27. 1.2 Arquitectura de las aplicaciones
web.

28. 1.2 Arquitectura de las aplicaciones
web.

29. 1.2 Protocolo http (protocolo de
transferência de hipertexto).

Es uno de los protocolos mas
recientes. Es utilizado para el
manejo de consultas de
hipertexto y acceso de datos
en el WWW. Implementado por
primera vez en el año de 1990,
considerado como un
protocolo de Solicitudrespuesta. Estos mensajes de
solicitud son hechos a través
de un agente usuario (un
browser, navegador) o
cualquier otra herramienta del
usuario final. “El comienzo de
todas las direcciones Web
(http://)” indica al explorador
que es la dirección de un
documento compatible con
HTTP”.

30. 1.2 Protocolo http (protocolo de
transferência de hipertexto).

El HTTP es un método de diálogo estandarizado entre dos
máquinas distintas (Cliente y servidor). Su funcionamiento
es muy sencillo, el cliente establece la conexión con el
servidor, envía una petición y espera la respuesta. Cuando
el servidor recibe la petición genera la respuesta, la envía al
cliente y cierra la conexión. “Tanto el mensaje solicitado,
como el de respuesta siguen el formato genérico RFC 822”.

31. Etapas de una transacción HTTP





Para profundizar más en el funcionamiento de HTTP,
veremos primero un caso particular de una transacción
HTTP; en los siguientes apartados se analizarán las
diferentes partes de este proceso.
Cada vez que un cliente realiza una petición a un servidor,
se ejecutan los siguientes pasos:
Un usuario accede a una URL, seleccionando un enlace de
un documento HTML o introduciéndola directamente en el
campo Locationdel cliente Web.
El cliente Web descodifica la URL, separando sus diferentes
partes. Así identifica el protocolo de acceso, la dirección
DNS o IP del servidor, el posible puerto opcional (el valor
por defecto es 80) y el objeto requerido del servidor.
Se abre una conexión TCP/IP con el servidor, llamando al
puerto TCP correspondiente

32. Etapas de una transacción HTTP



Se realiza la petición. Para ello, se envía el comando
necesario (GET, POST, HEAD,…), la dirección del
objeto requerido (el contenido de la URL que sigue a
la dirección del servidor), la versión del protocolo
HTTP empleada (casi siempre HTTP/1.0) y un
conjunto variable de información, que incluye datos
sobre las capacidades del browser, datos opcionales
para el servidor,…
El servidor devuelve la respuesta al cliente. Consiste
en un código de estado y el tipo de dato MIME de la
información de retorno, seguido de la propia
información.
Se cierra la conexión TCP.

33. Etapas de una transacción HTTP



Se realiza la petición. Para ello, se envía el comando
necesario (GET, POST, HEAD,…), la dirección del
objeto requerido (el contenido de la URL que sigue a
la dirección del servidor), la versión del protocolo
HTTP empleada (casi siempre HTTP/1.0) y un
conjunto variable de información, que incluye datos
sobre las capacidades del browser, datos opcionales
para el servidor,…
El servidor devuelve la respuesta al cliente. Consiste
en un código de estado y el tipo de dato MIME de la
información de retorno, seguido de la propia
información.
Se cierra la conexión TCP.

34. conceptos


URL: es el acrónimo de (UniformResourceLocator),
localizador uniforme de recursos y permite localizar o
acceder de forma sencilla cualquier recurso de la red desde
el navegador de la WWW.
Las URL se utilizarán para definir el documento de destino de
los hiperenlaces, para referenciar los gráficos y cualquier otro
fichero que se desee incluir dentro de un documento HTML.
Cada elemento de internet tendrá una URL que lo defina, ya
se encuentre en un servidor de la WWW, FTP, gopher o las
News.
GET: se utiliza para recuperar el contenido
de un recursos estático (página HTML,
imágen, vídeo, etc), o bien ejecutar un
programa o script en el servidor (como
programas CGI, páginas ASP, JSP, PHP,
etc.). Es la operación más común, que se
lanza cada vez que pulsamos en un enlace
y navegamos a una página web. etc.

35. conceptos
HEAD: es una operación especial que tan
sólo nos recupera información del recurso,
como el tamaño, la fecha de modificación,
tipo, etc. Lo suelen utilizar los navegadores
o servidores proxy para comprobar el
estado de su caché u otras operaciones.
POST: envía información desde el cliente
al servidor web, como pueden ser los
datos de un formulario.
Los tipos MIME (MultipurposeInternet Mail
Extensions): son un estándar para el envío de
información binaria a través de caracteres
alfanuméricos. Este estándar permite que, a través del
protocolo HTTP (que maneja información en modo
texto), podamos transferir archivos no-textuales, como
pueden ser imágenes, audio, vídeo, programas

36. Tarea 2
Exposición PowerPoint.
10.Sitio de descargas
11.Sitio de juegos
12.Sitio de información
13.Sitio buscador
14. Sitio shock
Entrega próximo jueves 25
15. Sitio de subastas
16. Sitio personal
17. Sitios de videos
18. Sitios de fotos
1.Sitio de archivo
19 Sitio portal
2.Sitio weblog(o blog)
20. Sitio Web 2.0
3.Sitio de foro
21. Creador de sitios
4.Sitio de empresa
22. Wiki
5.Sitio de comercio
23. Sitio político
electrónico
6.Sitio de comunidad virtual 24. Sitio de portafolio
25. Sitide rating
7.Sitio de Base de datos
26. Sitios educativos
8.Sitio de desarrollo
27. Sitio de noticias
9.Sitio directorio

37. 1.2.2 URL’s

Las siglas URLcorresponden a las palabras inglesas Universal
ResourceLocator, que en español viene a significar algo así
como "Localizador Universal de Recursos". La URL es el modo
que tiene la Web de identificar cualquier tipo de archivo o
recurso en cualquier parte del mundo.

El formato de una URL básica (concretamente, de la URL de
estamisma página) es el siguiente:

http://www.psicobyte.com/html/taller/url.html

Que, dividido en sus partes elementales, es más o menos esto:

38. 1.2.2 URL’s
CLASES y TIPOS DE DOMINIOS
Dominios genéricos
 Pueden ser registrados por todo tipo de
personas físicas y jurídicas de cualquier parte
del mundo sin requerimientos especiales. Este
tipo de dominios son económicos y de registro
muy rápido.


39. 1.2.2 URL’s
-Dominios .com: Son los más acertados para empresas u
organizaciones con ánimo de lucro. La red está llena de .com, por lo
que registrando un dominio
este tipo, su organización adquirirá un aspecto de globalidad.
-Dominios .eu: Dominios relativos a Europa. Son asignados por
EURID.
-Dominios .org: Para todo tipo de organizaciones sin ánimo de lucro.
-Dominios .net: Usados mayoritariamente por empresas de Internet y
Telecomunicaciones.
-Dominios .edu: Usados para fines educativos
-Dominios .mil: Exclusivamente para todo tipo de organizaciones
militares.
-Dominios .gov: Para los gobiernos

40. 1.2.2 URL’s
Otros dominios
En esta categoría incluimos los nuevos dominios que se han incorporado
recientemente a Internet. También pueden ser registrados por todo tipo de
personas físicas y jurídicas de cualquier parte del mundo sin requerimientos
especiales:
Dominios genéricos Multilingües: Son dominios .com, .orgy .netque llevan
eñes, acentos, u otros caracteres especiales.
-Dominios .tv: Usados en empresas de vídeo, cine y televisión
principalmente.
-Dominios .info: Destinados principalmente para empresas de información,
periódicos, revistas, etc.
-Dominios .biz: Proviene de la pronunciación del inglés "business", por lo
que están dedicados a actividades comerciales y de negocios. Es lo mismo
que el .
com, pero para la zona de Europa.
-Dominios .cc: Esta extensión tiene un especial interés para aquellos que
pretenden conseguir un dominio global y no tienen posibilidad de conseguir
el .com
que desean.

41. 1.2.2 URL’s
Otros dominios
Dominios .ws: Las siglas .wsse identifican con Web Site, por lo que se trata
de una magnífica opción para todo tipo de sitios web. Además, debido a su
novedad, es mucho más probable conseguir el dominio deseado.
-Dominios .name: Proviene del inglés “name” que significa “nombre”, por lo
que se trata de una opción totalmente nueva para registrar nuestro nombre
propio o apodo.
-Dominios .pro: Para uso especifico reservado a profesionales de
determinadas categorías, agrupados en subdominios. Ejemplo:
.med.pro(médicos).
Deberán acreditar su pertenencia al colegio u organización profesional
correspondiente.
-Dominios .aero: De uso restringido para la industria de los servicios aéreos:
compañías aéreas, aeronáuticas, aeropuertos y servicios aéreos.
-Dominios .coop: Reservado a las cooperativas y hace falta demostrar la
cualidad de cooperativa a través de las organizaciones locales
correspondientes.
-Dominios .museum: Dominio de uso restringido para los museos. Permite
en un segundo nivel el nombre del museo que se trate. (prado.museum,

42. 1.3 Tecnologías para el desarrollo
de
aplicaciones web.






Arquitectura de las aplicaciones Web.
Lenguajes de programación del lado del cliente.
Lenguajes de programación del lado del servidor.
Ambientes para el desarrollo de aplicaciones Web
Metodologías para el desarrollo de aplicaciones
Web
Aspectos de seguridad.

43. 1.3 Tecnologías para el desarrollo
de
aplicaciones web.
Las aplicaciones web se han
convertido en pocos años en
complejos sistemas con interfaces
de usuario cada vez más parecidas
a las aplicaciones de escritorio,
dando servicio a procesos de
negocio de considerable
envergadura y estableciéndose
sobre ellas requisitos estrictos de
accesibilidad y respuesta.

44. Arquitectura de las aplicaciones
Web
La WWW está basado en el modelo Cliente / Servidor.
 Cliente principal en el WWW son los browsers o
El
navegadores que solicitan información al Servidor.
 Servidor son los Servidores Web que proporcionan
El
documentos y contenidos multimedia a los clientes a través
de la red.

Los “clientes” realizan peticiones de información a los
“servidores”.

Las peticiones de información en el Web se realizan a
través de la red (Internet / Intranet).

Las peticiones vía Web utilizan el protocolo HTTP para
realizar las transacciones dentro del modelo Cliente /
Servidor.

45. Arquitectura de las aplicaciones
Web

46. Arquitectura de las aplicaciones
Web.
Una Arquitectura
define: un conjunto de
elementos,
conectores,
restricciones y un
sistema de control que
caracterizan a un
sistema o a una
familia de sistemas.
La WWW está basado
en el modelo Cliente /
Servidor.

47. Arquitectura de las aplicaciones
Web.
SERVIDOR WEB
Un servidor web es un programa que
ejecuta de forma continua en un
ordenador, manteniéndose a la
espera de peticiones por parte de un
cliente (un navegador de internet) y
que contesta a estas peticiones de
forma adecuada, sirviendo una
página web que será mostrada en el
navegador o mostrando el mensaje
correspondiente si se detectó algún
error.
APLICACIÓN WEB
Es aquella que los usuarios usan
accediendo a un servidor web a
través de Internet o de una intranet
mediante un navegador web que
opera como cliente ligero. Se
caracteriza por la posibilidad de
actualizar y mantener aplicaciones
web sin distribuir e instalar software
en miles de potenciales clientes.

48. Arquitectura de las aplicaciones
Web.
NAVEGADOR WEB
Un navegador web es una aplicación
software que permite al usuario
recuperar y visualizar documentos de
hipertexto, comúnmente descritos en
HTML, desde servidores web de todo
el mundo a través de internet
PLUG -IN Son programas que
permiten visualizar e interpretar
ficheros de texto, de vídeo o de
sonido, de distinto formato. La
característica principal de estos
programas es que, una vez
instalados, son transparentes para
el usuario que los utiliza y están
totalmente integrados en los sitios
Web.

49. Arquitectura de las aplicaciones
Web.
Tarea:

Investigar 3 navegadores web con sus
características

Investigar 3 tipos de plug-in su aplicación
y características

Investigación

Reporte escrito: entrega lunes 30 de
agosto
5

50. Lenguajes de programación del
lado del cliente.

El navegador es una especie de aplicación capaz de interpretar las
órdenes recibidas en forma de código HTML fundamentalmente y
convertirlas en las páginas que son el resultado de dicha orden.
Cuando nosotros
pinchamos sobre un enlace
hipertexto, en realidad lo
que pasa es que
establecemos una petición
de un archivo HTML
residente en el servidor (un
ordenador que se
encuentra continuamente
conectado a la red) el cual
es enviado e interpretado
por nuestro navegador (el
cliente).

51. Lenguajes de programación del
lado del SERVIDOR.

Así pues, podemos hablar de lenguajes de lado servidor que son
aquellos lenguajes que son reconocidos, ejecutados e interpretados por
el propio servidor y que se envían al cliente en un formato comprensible
para él. Por otro lado, los lenguajes de lado cliente (entre los cuales no
sólo se encuentra el HTML sino también el Java y el JavaScriptlos
cuales son simplemente incluidos en el código HTML) son aquellos que
pueden ser directamente "digeridos" por el navegador y no necesitan un
pretratamiento.

52. 1.3 Tecnologías para el desarrollo
de
aplicaciones web.
Es un programa compuesto por un
conjunto de herramientas para un
programador.
Puede dedicarse en exclusiva a un sólo
lenguaje de programación o bien, poder
utilizarse para varios.
Consiste en un editor de código, un
compilador, un depurador y un constructor
de interfaz gráfica
Su meta es proveer un marco de trabajo
amigable para los programadores de algún
lenguaje de programación.

53. 1.3 Tecnologías para el desarrollo
de
aplicaciones web.
El desarrollo en ambiente Web se hace sobre un
lenguaje script llamado HTML. Sobre ese lenguaje
script (un lenguaje script es un lenguaje no
compilado) se apoyan todos los otros lenguajes
tratados en Web. Cuando uno programa en ASP,
ASP.NET o mismo JAVA esos scripts se apoyan
sobre el HTML para ser interpretada por un
Browser.
Una característica de la programación en Web, es
que se necesita usar un Browser de Internet como
programa cliente, es decir, el browser actuara como
el
"traductor" del código escrito por el programador y
desplegara todo el contenido en el código a la
pantalla del usuario.
El browser, por su vez, para interpretar algunos
scripts, necesita los llamados
Pluggins. Que no son nada mas que "módulos" que
le ayudaran al programa browser interpretar los

54. 1.3 Tecnologías para el desarrollo
de
aplicaciones web.
Se necesita para desarrollar y para poner a funcionar un programa en
Web, lo que se llama Web Server, que por su vez contendrá los códigos de
los scripts que los browsers de los clientes interpretaran. Un Web Server
es un servidor ordinario con algunos servicios especiales activos para
servir a los browsers clientes.
Podemos apreciar la estructura básica de un programa montado en un
Web Server con la figura abajo:

55. Ambientes para el desarrollo de
aplicaciones Web.
Wampserver
Programa para Windows que instala en un solo paso todo lo
necesario para ejecutar aplicaciones web creadas en PHP sobre un
servidor Apache y con base de datos MySQL. El programa permite
ahorrarse los pasos de configuración de PHP a menudo complejos y
ofrece un panel de control desde donde se pueden realizar muchas
tareas de administración y mantenimiento del servidor web.

56. Ambientes para el desarrollo de
aplicaciones Web.
Adobe CreativeSuite
Adobe CreativeSuite (CS) es una colección de diseño gráfico, edición de
vídeo, y aplicaciones de desarrollo Web realizado por Adobe Systems. La
colección se compone de aplicaciones de Adobe (por ejemplo, Photoshop,
Acrobat, InDesign), que se basan en diferentes tecnologías (por ejemplo,
PostScript, PDF, Flash). La última versión, Adobe CreativeSuite 5 (CS5),
fue lanzado el 30 de abril de 2010. [1]

57. Ambientes para el desarrollo de
aplicaciones Web.
Arquitectura de dos niveles:
Es la más simple, se tiene el nivel del “Cliente” y el nivel del “Servidor”.

58. 1.3 Tecnologías para el desarrollo
de
aplicaciones web.

El primer nivel
consiste en la capa
de presentación que
incluye no sólo el
navegador, sino
también el servidor
web que es el
responsable de dar
a los datos un
formato adecuado.
El segundo nivel
está referido
habitualmente a
algún tipo de
programa o script.
Finalmente, el tercer
nivel proporciona al
segundo los datos
necesarios para su
ejecución.

59. Servidor Web

Un servidor web es un
programaque implementa el
protocoloHTTP). Este protocolo
pertenece a la capa de aplicación
del modelo OSI y está diseñado
para transferir lo que se llama
hipertextos, páginas web o
páginas HTML: textos complejos
con enlaces, figuras, formularios,
botones y objetos incrustados
como animaciones o

60. Servidor Web.
Algunos ejemplos:
 CERN httpd
 Apache(Libre, servidor más usado del
mundo, según Wikipedia)
 IIS
 Resin
 Tomcat(Libre, del proyecto Jakartade
Apache)
 Geronimo(Libre, orientado a J2EE, del
proyecto Jakartade Apache, actualmente
se encuentra en desarrollo)
 Jboss
 JOnAS
 Cherokee

61. 1.3 Tecnologías para el desarrollo
de
aplicaciones web.
Los IDE (ambientes integrados de desarrollo) para
aplicaciones Web son muy numerosos.

Considerar los que permitan trabajar con los
diferentes lenguajes para Web.

Algunos son específicos para lenguajes del lado
del servidor. Por ejemplo, Visual Studio solo
soporta ASP.NET del lado del servidor.

Existen IDE’sde buena cantidad, libres y gratuitos
de buena calidad.

62. 1.3 Tecnologías para el desarrollo
de
aplicaciones web.
Algunos ejemplos de IDE para Web:

Microsoft Visual Studio.

Microsoft Web Developer Express.

Mono (para ASP.NET).

NetBeans.

Jbuilder.

Eclipse.

63. 2.5 Metodologías para el desarrollo
de aplicaciones Web.
Ciclo de vida clásico. Pressman, “adapta” esta
metodología para el desarrollo de Web, en lo que
el llama la “Ingeniería Web”:

Formulación.

Planificación.

Análisis (contenido, interacción, funcional,
configuración).

Diseño (arquitectónico, navegación, interfaz, de
base de datos).

Implementación.

Pruebas.

64. 1.4 Planificación de aplicaciones
web.



Definición de los objetivos
Diagrama de navegación.
Definición de estilo

65. Definición de los objetivos

El primer paso, para la creación de páginas
WEB bien estructuradas, es saber de
antemano el mensaje que se desea transmitir.
Las imágenes y los elementos a utilizar serán
distintos si se plantea una WEB para vender
un producto, o para dar información o para
publicar un trabajo científico. En este último
caso, la página debe dar una imagen más
formal.

66. Definición de los objetivos
Breve descripción de los contenidos de la página, su
título principal, etc.
Finalidad que persigo al hacerla (informar, hacer
negocio, entretener, etc.)
Páginas parecidas a la mía, qué puedo ofrecer yo que
no tengan ellas para atraer a mi público objetivo, etc.
Hardware, software, documentación que necesito para
realizarla y de qué dispongo realmente.
Describir cuál es mi publico objetivo, nivel informático,
idiomas, intereses, problemas físicos, etc. para adaptar la
página a sus características.
Dónde se va a visualizar la web; navegadores más
utilizados, plugins, elementos específicos, etc

67. Actividad: Definir el objetivo del
sitio
Redacte el objetivo del sitio
Especifique el tipo de audiencia
Busque 3 sitios web que sean parecidos al
que quiere realizar.

68. Diagrama de navegación.


A continuación debes planificar cómo van a
desplazarse los usuarios por ellas. Se debe
realizar un diagrama de flujo claro para definir los
índices principales, las páginas secundarias y las
ramificaciones de todos los documentos.
Si utilizas una sola página WEB y esta es muy
extensa deberás poner enlaces a las diferentes
partes del documento al principio y al final de tu
página y de esta forma facilitar la lectura de la
misma, sin tener que depender tanto de las
barras de desplazamiento.

69. Diagrama de navegación.
En árbol: Esta estructura está compuesta por
una página principal que enlaza con otras
páginas, las cuales, a su vez, enlazan con
otras páginas de nivel inferior.
En lista: Esta estructura es la opuesta a la
anterior. En ella no existe página principal
ya que todas están en el mismo nivel. Para
llegar a la última página hay que recorrer
todas las anteriores.

70. Diagrama de navegación.
Mixta: Esta estructura es una combinación de
las dos anteriores. Las páginas están
jerarquizadas en niveles, los cuales a su vez
están conectados entre sí en forma de lista.
En red: Esta estructura supone que todas
las páginas de la web están conectadas
entre sí, por lo que es una estructura más
compleja y menos ordenada.

71. Actividad: Definir la estructura
Dibuje un diagrama de las paginas que
contendrá el sitio
Tome en cuenta los enlaces obligatorios
Inicio
Acerca de
Contacto
Mapa

72. Definición de estilo


Una vez creada la estructura básica del WEB,
se debe definir el estilo de las páginas.
Resulta práctico crearse una página de estilo
para aplicar a todas las páginas que vayamos
generando, incluyendo los logotipos,
encabezados y pies.

73. Definición de estilo
Para empezar, que NO es aconsejable hacer:
Largos textos en negativo (texto claro sobre fondo oscuro)
Imágenes de fondo estridentes o con colores vivos
Incluir demasiados tipos de letra diferentes
Representar el texto muy grande o muy pequeño
Gran profusión de GIFs animados o imágenes “robadas” de
otras webs
Tablas con “Border”
Textos corridos “<Marquee>:” o "flashes"
Abusar de los anglicismos (ej: “link” por “enlace”)

74. Definición de estilo
Y lo que sí es recomendable:
 Aplicar márgenes a izquierda y derecha
 Utilizar negritas para destacar textos (con mesura, ¿eh?)
 Utilizar la etiqueta <P> para separar párrafos: así, ganamos en
legibilidad
 Maquetar siempre con tablas: esto a veces puede complicar el
código, pero es el mejor modo de representar correctamente los
distintos elementos, y de contrarrestar el efecto “cross-browsing”, o
cambio de navegador
 CSS: las Hojas de estilo son una ayuda insustituible
 Por norma general (no siempre), JPGs para fotografías y GIFs para
dibujos
 Variar los colores, aunque sin pasarse
 Menú de navegación en todas las páginas: esto evitará perder en
un laberinto de enlaces a nuestros visitantes

75. Teoría del Color: Estudio de
algunos colores

Es bien sabido por los psicólogos la influencia
emocional que desencadenan los colores en el
espíritu humano. Las respuestas emocionales
varían enormemente dependiendo del color y
de la intensidad de éste, así como de las
diferentes combinaciones de colores que se
pueden dar.

76. Teoría del Color: Estudio de
algunos colores

Normalmente cada color individual lleva
asociado un conjunto de emociones y
asociaciones de ideas que le es propio. Hay
que destacar que estas emociones asociadas
corresponden a la cultura occidental, ya que en
otras culturas los colores pueden expresar
sentimientos totalmente opuestos a los arriba
indicados (por ejemplo, en Japón el color blanco
simboliza la muerte).

77. Teoría del Color: Estudio de
algunos colores

Las sensaciones que producen
los colores dependen de
factores culturales y
ambientales, y muchas veces de
los propios prejuicios del
usuario. Además hay que sumar
a esto que no todas las
personas ven los colores de la
misma forma, ya que hay
personas que sólo pueden ver
bien la gama azul / naranja,
otras la roja / verde y otras
degeneran a la gama blanco /
negro. Incluso se perciben los
colores de forma diferente con
el ojo derecho que con el
izquierdo.

78. Teoría del Color: Estudio de
algunos colores Rojo
El rojo es el único color brillante de verdad y
puro en su composición. es exultante y
agresivo. Es el símbolo de la pasión ardiente y
desbordada, de la sexualidad y el erotismo.
Es un color cálido, asociado con el sol y el
calor, de tal manera que es posible sentirse
más acalorado en un ambiente pintado de
rojo, aunque objetivamente la temperatura no
haya variado. Su nombre procede del latín
"russus“. El rojo es el color de la sangre, de la
pasión, de la fuerza bruta y del fuego Color
fundamental, ligado al principio de la vida,
sugiere vitalidad, entusiasmo, pasión,
agitación, fuerza, sexo, calor, fuego, sangre,
amor, audacia, valor, coraje, cólera, crueldad,
intensidad y virilidad, estando asociado con
sentimientos enérgicos, con la excitación
apasionada o erótica. Es el color más sensual
de todo el círculo cromático.

79. Teoría del Color: Estudio de
algunos colores Verde
El verde es el color más tranquilo y sedante
de todos.
Es el color de la calma indiferente: no
transmite alegría, tristeza o pasión.
Está asociado a conceptos como Naturaleza,
salud, dinero, frescura, crecimiento,
abundancia, fertilidad, plantas, bosques,
vegetación, primavera, frescor, esmeralda,
honor, cortesía, civismo y vigor. El verde que
tiende al amarillo cobra fuerza activa y
soleada; si en él predomina el azul resulta
más sobrio y sofisticado.

80. Teoría del Color: Estudio de
algunos colores- Azul
El color azul es el símbolo de la profundidad.
Inmaterial y frío, suscita una predisposición favorable.
La sensación de placidez que provoca el azul es
distinta
de la calma o reposo terrestres, propios del verde.
Es un color reservado y entra dentro de los colores
fríos. Expresa armonía, amistad, fidelidad, serenidad,
sosiego, verdad, dignidad, confianza, masculinidad,
sensualidad y comodidad. Su nombre es de origen
incierto, pero parece que procede del sánscrito
"rajavarta" (rizo del rey).
Este color se asocia con el cielo, el mar y el aire. El
azul claro puede sugerir optimismo. Combina muy bien
con su complementario, el naranja, y con las
variaciones de éste, siendo típicos los fondos azules

81. Teoría del Color: Estudio de
algunos colores- Azul


El color amarillo es el color más luminoso,
más cálido, ardiente y expansivo.
Es un color optimista, moderno, y denota
alegría, entusiasmo, pasión, fuerza, sexo,
calor, primavera, inocencia, infancia, juventud.
También se usa para expresar peligro y precaución. Es
el color del sol, de la luz y del oro, y como tal es
violento, intenso y agudo.
Si es muy brillante puede indicar peligro, y si es muy
suave puede sugerir delicadeza. Un entorno amarillo
medio o pálido hace a la gente sentirse cómoda,
caliente.
El amarillo llama mucho la atención en un entorno o
composición, utilizándose a menudo en elementos que
conviene hacer visibles. Es el color que fatiga mas a la
vista humana, porque causa una estimulación
visual excesiva, pudiendo originar sensación de
irritabilidad
en las personas.

82. Actividad: Definir el estilo
Especifique la paleta de colores que utilizara en
el sitio web.
Busque imágenes en internet para incluirlas en el
sitio.
Defina los tipos de letra.
Busque textos interesantes y cópielos en el block
de notas.