Internet y páginas web

Facultad de Ingeniería y Arquitectura
Fundamentos de Diseño Web (FDW)
2010 - II

Contenido:
Objetivos:
SEMANA 1
• Introducción a WWW y Diseño Web. Herramientas de
Comunicación en Internet. Puntos para definir nuestra Web.
Análisis del Sitio Web. Introducción al Diseño Web. Elementos
de un Website. Tipos de lenguajes. Herramientas para la
creación de Webs.
Fundamentos de Diseño Web
• Brindar los conocimientos teóricos y prácticos orientados al proyecto,
diseño y desarrollo de sitios web.
Específicos:
• Conocer los conceptos básicos de Internet.
• Conocer los medios de comunicación en internet.
• Conocer las limitaciones web, fundamentos y herramientas del diseño web.
• Dar a conocer los tipos de lenguajes empleados para la creación de páginas y
aplicaciones web.
• Brindar los criterios para la planificación de Sitios Web.

TEMA:
– Introducción a WWW y Diseño Web.

Historia del Internet
Ya finalizando la década del 50, el Departamento de Defensa de los Estados
Unidos comenzó a preocuparse por lo que podría ocurrir con el sistema de
comunicación nacional si se desataba una guerra nuclear ya que una de las
armas más importantes en una guerra son las comunicaciones y es uno de los
primeros objetivos que el enemigo intentaría destruir.
• 1969 En respuesta a este hecho, Estados Unidos crea el ARPA (Organismo
de Proyectos de Investigación Avanzada).
• Crece la red interconectando varias Universidades americanas.
• Ray Tomlison, en 1971, crea un programa capaz de enviar mensajes entre
ordenadores (e-mail).
• 1982 el protocolo TCP-IP fue adoptado como estándar en las
comunicaciones de Internet y se utiliza por 1ra. vez el término Internet.
• 1980-85 Se desarrolla el Sistema de Denominación de Dominios (Domain
Name System) .
• 1992 nace la World Wide Web como sistema de intercambio de información.
• 1993 se crea el primer web browser.
Video

Historia del Internet
• 1994 se difunde la versión comercial del navegador Netscape Navigator.
• Centros comerciales y empresas comercializan sus productos en Internet:
Pizza Hut, Ciberbanco, Amazon.
• Nace el buscador Yahoo.
Internet en el Perú
Internet llegó al Perú en 1991. Ha transcurrido más de una década de
experiencias, anécdotas y descubrimientos fascinantes. En este tiempo, hemos
utilizado la red de redes para buscar información, entretenernos, y en especial,
para comunicarnos.

Internet
Conjunto de computadoras conectados en una red de redes mundial, que
comparten un mismo protocolo de comunicación, y que prestan servicio a los
ordenadores que se conectan a esa red.
El territorio operativo de Internet es el ciberespacio y esta generosamente
abierto a todos los que deseen participar dentro de él, Tanto pequeños
protagonistas o grandes corporaciones.
Internet hace posible una comunicación más sencilla, más rápida y más
económica.

¿Qué necesito para navegar en
Internet?
– Una PC conectada a Internet.
– Un Navegador o Browser
– Conocer las direcciones Web
(URL) que deseo visitar.

¿Qué es un Browser?
• Un Browser es un programa que va a permitir
cargar las páginas web´s para visualizarlas y
poder navegar por Internet, también son llamados
Navegadores.
• Entre los más utilizados están Internet Explorer,
(IE) y Chrome.

¿Qué es un Dominio?
El dominio es la dirección URL, que apunta al servidor Web.
Nombres de dominio
Los dominios de nivel superior:
Territoriales: .es, .pe
Genéricos:
.edu – sites educacionales
.com – sites comerciales
.gob – sites gubernamentales
.mil - sites militares
.net - sites de administración de red
.org – organizaciones sin ánimo de lucro
Los criterios para nombrar ordenadores son flexibles, sólo se exige que al final
esté un dominio de nivel superior. Ejm: www.usmp.edu.pe

¿Qué es un Servidor Web?
• Un servidor Web es un ordenador que se encuentra encendido las 24 horas
del día y conectado a Internet.
• En el caso de una página Web, los servidores son los encargados de
mandarla cuando se la solicita.
• Nuestras páginas tienen que estar alojadas en un servidor Web para que
puedan estar accesibles desde Internet.
• Puede ser gratuito o pagado.
– Pagado: http://peruhost.com/
– Gratuito: http://www.000webhost.com

World Wide Web (WWW)
La WWW puede definirse básicamente como tres cosas:
• Hipertexto, que es un sistema de enlaces que permite saltar de una
página a otra.
• Multimedia, que hace referencia al tipo de contenidos que puede
manejar (texto, gráficos, vídeo, sonido y otros).
• Internet, la base sobre la que se transmite la información.
El aspecto exterior de la WWW son las conocidas "páginas Web".

Sitio Web
Un sitio web es un conjunto de páginas Web relacionadas a través de una
estructura de navegación, con el objetivo de hacer pública y universalmente
accesible una cierta cantidad de información.
Para alcanzar dicho objetivo, los sitios deben concebirse con un criterio
arquitectónico y construirse desde los cimientos, con una visión sistémica y
una lógica adecuada a su función específica. La unidad de información de
la web es un documento (archivo) llamado página Web.

Página Web
Una página web, también conocida como página de Internet, es un
documento adaptado para la Web y normalmente forma parte de un sitio
web. Su principal característica son los hiperenlaces a otras páginas web,
siendo esto el fundamento de la Web.
Una página está compuesta principalmente por información (sólo texto o
multimedia) e hiperenlaces; además puede contener o asociar datos de
estilo para especificar cómo debe visualizarse o aplicaciones incrustadas
para hacerla interactiva.

La World Wide
Web se llama
también en la
Web, WWW o w3
La World Wide Web es parte de la
Internet. En la Web consiste en una
enorme colección de documentos de
almacenados en la computadora en
todo el mundo
Un sitio Web es una colección
de páginas Web en una
computador central, de una
universidad, organismo
público, empresa o persona
Un Web Server es una
computadora conectado
a Internet que hace que
las páginas Web estén a
disposición del mundo
Una página Web es un
documento de la Web.
Páginas Web pueden
incluir texto, imágenes
y sonido de vídeo
Video

W3C
El World Wide Web Consortium, abreviado W3C, es un consorcio
internacional que produce recomendaciones para la World Wide Web y
establece directivas con la intención de normalizar el diseño para facilitar y
simplificar la visualización e interpretación del contenido.
Está dirigida por Tim Berners-Lee, el creador original de URL (Uniform
Resource Locator, Localizador Uniforme de Recursos), HTTP (HyperText
Transfer Protocol, Protocolo de Transferencia de HiperTexto) y HTML
(Lenguaje de Marcado de HiperTexto) que son las principales tecnologías
sobre las que se basa la Web.

Herramientas de Comunicación en Internet
1. Sitio Web.
2. Correo electrónico y boletines electrónicos.
3. Buscadores
4. Marketing viral.

1. Sitio Web
• El Sitio Web es un elemento muy importante dentro del desarrollo de la
empresa en Internet. Por ello, su desarrollo no es una tarea trivial
debido a que cada vez los usuarios de la Web son más exigentes.
• El tiempo del usuario es el elemento crítico: los usuarios no dan una
segunda oportunidad.
Según un estudio de K&R, como
media, tras hacer 5 clicks y no
encontrar la información que
buscaban, los usuarios se sienten
frustrados y en ese caso, un 83%
se va a otro sitio Web.

Según IFOCCOM las razones por las que un usuario abandona un site
es:
Video

2. Correo electrónico y boletines electrónicos
Las ventajas del correo electrónico en acciones de comunicación son las
siguientes:
• Bajo coste, prácticamente nulo. Además, a diferencia de
prácticamente todas las herramientas de comunicación, el costo no es
proporcional al número de envíos. Prácticamente el costo es el mismo
para enviar 10 unidades que para enviar 100.000 unidades.
• Marketing directo a segmentos definidos: Uniendo la inteligencia de
clientes con el correo electrónico, se pueden hacer llegar ofertas
concretas para segmentos determinados muy ajustadas a sus
características y expectativas.
• Seguimiento exacto y en tiempo real de los resultados de las
acciones pudiendo hacer test.

2. Correo electrónico y boletines electrónicos
El boletín electrónico es una herramienta de la estrategia de marketing
relacional y por tanto, de generación de negocio.
Las características que debería tener el boletín electrónico son:
• Gratuito ya que su objetivo es la fidelización de clientes y por tanto ha
de ser un valor añadido.
• Contenidos útiles para los suscriptores.
• Periódico.

3. Buscadores
El posicionamiento en buscadores es la herramienta menos conocida y
más interesante para la adquisición de visitantes a los sitios Web.
En la situación actual en la que hay billones de páginas web en Internet,
los buscadores y directorios son los únicos medios que permiten al usuario
encontrar el servicio o información que buscan.
Sin los buscadores y directorios, sería virtualmente imposible encontrar la
información en Internet. Son la "puerta de entrada" del usuario a Internet y
es el canal por el que los usuarios buscan nuevos sitios.

4. Marketing Viral
El marketing viral consiste en fenómenos en los que se busca expandir un
mensaje de forma en la que cada persona que lo recibe, lo transmite a su
vez a x personas más y así sucesivamente se produce una comunicación
que se extiende de forma piramidal.
Video

Puntos para definir nuestra web
1 ¿Por qué la creación de una página Web favorece mis emprendimientos?
Estar presente en la Web equivale a tener un espacio para decir lo que usted es,
lo que piensa, lo que hace, a una audiencia casi incalculable. La historia de
Internet reúne relatos acerca de éxitos inmediatos, crecimientos vertiginosos y
reconocimientos de alcances inusitados para aquellos que publicaron sus
páginas en la Red de redes.
La Web es la herramienta privilegiada en Internet, debido a la posibilidad que
ofrece de mostrar, vender, anunciar, cualquier cosa, durante las 24 horas, los 365
días del año, pudiendo acceder a la misma desde cualquier lugar del mundo al
costo de una llamada local.
Ninguna herramienta hasta el presente ha logrado, a tan bajo costo, estos
objetivos.

2 Algunas recomendaciones para organizar y realizar su Web con más
comodidad.
Cuando usted se propone estar en la Web, debe encarar el diseño de un sitio.
Es decir, crear documentos o archivos que se encuentran relacionados entre sí.
Aunque tenga propósitos concretos y haya pensado exponerlos en sus páginas
de manera más o menos agradable y clara, será conveniente que evalúe otros
elementos que son ineludibles al construir un sitio. Por eso bien vale la pena que
se detenga unos minutos para considerar algunas ideas claves que facilitarán su
posterior realización.

3 Lo que tenemos que tener en cuenta con la creación de un sitio Web
• Defina el propósito del sitio (objetivo).
• Establesca el alcance de su sitio.
• Piense en la estructura del sitio.
• Cree las página o documentos.
• Personalice el sitio.
• Organice el material.
• Cree espacios interactivos.
• El toque final.

Análisis del Sitio Web
¿Cuántas empresas están obteniendo resultados con
su Web?

1. ¿El sitio Web está desarrollado pensando en el usuario?
El sitio web ha de tener contenidos interesantes gratuitos para los
potenciales usuarios. Si el sitio web simplemente tiene la información
corporativa y una tienda, difícilmente se conseguirá fidelizar a los
usuarios.
2. ¿Tiene una serie de indicadores (cuantos visitantes) y objetivos
para su sitio Web?
Indicadores como el número de páginas vistas, el ratio de conversión,
el número de usuarios únicos, la duración de las visitas, etc. Son
parámetros que deberían ser controlados teniendo objetivos para ellos.
Con las sucesivas comparaciones y evolución de estos parámetros se
podrán tomar decisiones que afecten a cada uno de ellos.
3. ¿Tiene su sitio Web más de 40 Kb en alguna página?
El tiempo de carga es un elemento crítico como ya ha sido comentado.
Si su sitio web tiene páginas de más de 40Kb tiene un serio problema.
La solución es rediseñar esas páginas.

4. ¿Está creando una lista de correo pidiéndole a sus visitantes su
correo electrónico?
Como se ha comentado en el área de correo electrónico, es muy
importante crear un boletín electrónico a partir de los usuarios del Sitio
Web.
5. ¿Tiene su propio nombre de dominio y es de fácil recuerdo?
Es sencillo, el nombre de dominio es la dirección de su empresa en
Internet y cuanto más fácil sea asociarlo a su nombre, mejores
resultados obtendrá.
6. ¿Invita a los usuarios a que se comuniquen con usted
(INTERACTIVO) para contactos comerciales, sugerencias,
comentar alguna información, artículos, novedades, etc.?
Se debe aprovechar la interactividad del medio dando todas las
posibilidades: correo electrónico, correo, teléfono, fax, etc. Esta
información de contacto debe estar en todas las páginas de una manera
clara.

7. ¿Abusa del flash?
El uso de flash es muy "goloso“ pero es muy fácil hacerlo mal debido a los
tiempos de carga y a los problemas de navegación. Sólo está justificado
para casos muy concretos.
8. ¿Emplea una solución escalable?
Es importante que se haya planteado que la solución tecnológica que
emplee, pueda crecer a medida que crezcan los requerimientos de los
clientes en cuanto a visitas, información descargada, ancho de banda
necesario, etc.
9. ¿Se ha planteado quién y cómo va a hacer el mantenimiento del sitio
Web?
Es usual hacer sitios web con muchos contenidos y valor añadido y luego
dejarlos en un cajón porque no se les ha dado la continuidad necesaria. Un
proyecto ambicioso requiere de recursos tras su lanzamiento.

10 ¿Es coherente el Sitio Web con el resto de acciones de
comunicación desarrolladas en otros medios?
El Sitio Web debe tener los mismos objetivos de comunicación que el
resto de acciones, aspecto que muchas veces no se cumple debido a
que el Sitio Web no es supervisado por los coordinadores de marketing.
11. ¿Analiza el comportamiento de sus usuarios en la Web?
Si no conoce cuántos visitantes tiene su Sitio Web, ni cómo se
comportan, ni cuál es la duración de su visita, cuántas páginas ven, etc.
Está desperdiciando una de las posibilidades más importantes de
Internet.
12. Está claramente definido en cada una de sus páginas cuál es la
misión de su empresa?
Los usuarios no siempre sabrán a qué se dedica. Tenga en cuenta que
sólo un 40% de sus usuarios harán el esfuerzo de ir a ver el texto que
se encuentra debajo de la pantalla que están viendo. Deje claro desde
un principio quién es, qué hace y qué ofrece.

13. ¿Es su sitio Web fácil de usar y aprender a navegar en él?
Piense en sus usuarios. Pregúnteles. Piense "¿encuentran fácilmente lo
que buscan?", "¿tienen dificultades de navegación?“
14. ¿Tiene su sitio Web un "toque" de humanidad?
A los usuarios les gusta comunicarse con personas, no con máquinas.
Por ello, unas fotos del equipo, un mensaje del presidente, fotos de las
personas en el organigrama, etc. Son elementos interesantes.
15. ¿Son claros sus contenidos (en tamaño, estructura y mensaje)?
Los dos consejos para los contenidos en la web son: ser claros en
cuanto a redacción y breves, ya que los textos largos no son leídos. Si
es necesario, se pueden emplear enlaces para ampliar los conceptos.

16. ¿Tiene un diseño sencillo?
Como ya ha sido comentado, en muchos sitios se emplean diseños
complejos pero poco funcionales.
Los sitios de más éxito en Internet tienen sencillos diseños (como por
ejemplo Yahoo!).
17. ¿Ha definido el proceso deseado del usuario a través del sitio
Web?
Todos los sitios web tienen distintos objetivos: aportar información a los
clientes, suscripción a un boletín electrónico, venta, etc. Para conseguir
estos objetivos, los usuarios deben comportarse de una determinada
manera y el sitio web ha de ser definido para ello.
Esto significa también que los contenidos deben ser realizados para
incitar al usuario a la acción.
Realmente este test es sólo un comienzo, pero si tiene fallos en más de
3 de estos aspectos, no dude en solucionarlos lo antes posible. Está
perdiendo oportunidades de negocio.
Video

Introducción al Diseño Web
El Diseño Web va más allá del diseño tradicional pues existen muchos
limitadores relacionados con el medio donde se presentan las páginas:
Internet.
El diseño gráfico de una página Web es tan solo una parte del diseño de la
misma, ya que, además, hay que considerar un conjunto más o menos
extenso de condicionantes que van a limitar la libre creatividad del diseñador.
En primer lugar, las páginas Web se deben descargar de un servidor Web
remoto por medio de Internet, por lo que el ancho de banda de las
conexiones de los usuarios va a ser un factor clave en la velocidad de
visualización. La mayoría de los usuarios se conectan todavía a Internet con
un módem, con velocidades teóricas que oscilan entre 1 Mbps a 10 Mbps.

Otro aspecto a tener en cuenta es que las páginas Web son visualizadas en
unas aplicaciones específicas, los navegadores Web, que imponen grandes
limitaciones al diseño de las mismas.
Los navegadores existentes en el mercado tienen una forma particular de
presentar el contenido de las páginas. Internet Explorer interpreta en muchas
ocasiones una página Web de forma muy diferente a Netscape Navigator.
La importancia de la resolución de pantalla sobre la forma de ser visualizadas
las páginas Web en la ventana del navegador es muy importante. A mayor
resolución se dispone de más puntos de información para presentar los
elementos en pantalla, pero estos puntos son más pequeños, con lo que los
elementos de la interfaz (textos, imágenes, objetos de formulario, etc.) se ven
más pequeños.

 Pagina base 800x600
 Ventajas y desventajas
¿Porcentajes?
1024 x 768
800 x 600
Ejemplos
• http://www.usmp.edu.pe/
• http://www.ibm.com/pe/
• http://www.hotmail.com/
• http://www.yahoo.com/
• http://www.pclandia.net/linuxcom
paq/
168
224
 Las paginas se construyen con una resolución base, la mas usada en la actualidad
es 800x600.
 No es frecuente encontrar páginas con anchuras en %, con lo que se consigue que
al ser visualizadas en monitores de más resolución se “abran”, ocupando todo el
espacio de pantalla disponible.

A esto hay que sumar que las páginas diseñadas deben luego construirse en
un lenguaje específico, el HTML, que por sí mismo es muy limitado, lo que
hace que el diseñador Web tenga que estar siempre pensando si la interface
que está diseñando gráficamente va a poder ser luego construida.
Por último, una página Web suele ocultar, en la mayoría de los casos, una
serie de procesos complejos que se ejecutan sin que el usuario sea
consciente de ellos (ejecución de códigos de lenguajes de programación
tanto en cliente como en servidor, acceso a bases de datos en servidores
remotos, etc.), procesos que añaden tiempo a la presentación de las páginas
y que muchas veces suelen afectar de forma importante al diseño de estas,
ya que el diseñador no sabe de antemano qué contenidos concretos van a
tener.
Resumiendo: El diseño Web va más allá del diseño gráfico, al influir en él
multitud de factores que limitan las posibilidades del diseño, pero también
otros que añaden interactividad y funcionalidades a una página Web que no
tiene un cartel, folleto o revista.

Elementos de un Web Site
1. Anticipación, el sitio Web debe anticiparse a las necesidades del
usuario.
2. Autonomía, los usuarios deben tener el control sobre el sitio Web.
3. Los colores han de utilizarse con precaución para no dificultar el
acceso a los usuarios.
4. Consistencia, las aplicaciones deben ser consistentes con las
expectativas de los usuarios, es decir, con su aprendizaje previo.
5. Eficiencia, los sitios Web se deben centrar en la productividad del
usuario, no en la del propio sitio Web.
6. Reversibilidad, un sitio Web ha de permitir deshacer las acciones
realizadas.

7. Ley de Fitts indica que el tiempo para alcanzar un objetivo con el ratón
esta en función de la distancia y el tamaño del objetivo. A menor
distancia y mayor tamaño más facilidad para usar un mecanismo de
interacción.
8. Reducción del tiempo. Optimizar el tiempo de espera del usuario,
informando del tiempo pendiente para la finalización de la tarea.
9. Aprendizaje, los sitios Web deben requerir un mínimo proceso de
aprendizaje.
10. El uso adecuado de metáforas facilita el aprendizaje de un sitio Web,
pero un uso inadecuado de estas puede dificultar enormemente el
aprendizaje.

11. La protección del trabajo de los usuarios es prioritario, se debe
asegurar que los usuarios nunca pierden su trabajo como
consecuencia de un error.
12. Legibilidad, el color de los textos debe contrastar con el del fondo, y
el tamaño de fuente debe ser suficientemente grande.
13. Seguimiento de las acciones del usuario. Conociendo y
almacenando información sobre su comportamiento.
14. Interfaz visible. Se deben evitar elementos invisibles de navegación
que han de ser inferidos por los usuarios, menús desplegables,
indicaciones ocultas, etc.
Video

Tipos de Lenguajes
• Lenguajes de Lado servidor: Es aquel lenguaje cuyas sentencias se
ejecutan en el servidor Web, el resultado de esta programación es enviado
al browser del navegante.
Entre estos tenemos:
– PHP
– ASP (Active Server Pages)
– ASP.NET
– PERL JSP (Java Server Pages)
Estos lenguajes son usados generalmente
para programar manejo de sesiones, manejo
de base de datos, etc.

Tipos de Lenguajes
• Lenguaje del lado cliente: Son los lenguajes que se ejecutan en el
browser del navegante (cliente), usados para el manejo de eventos,
entre estos tenemos: Javascript: VBScript:

Tipos de Lenguajes

Herramientas para la Creación de Webs
 Dreamweaver. Editor de páginas Web
 Fireworks. Programa que crea, edita y optimiza imágenes
 Flash. Programa para el diseño de animaciones Web basados en vectores.
 Adobe Photoshop. Aplicación especializada en la composición de fotografías
e imágenes digitales.
 Flax. Programa muy útil para crea animaciones de texto.
 Swish. Programa para hacer animaciones, muy sencillo y fácil de usar.
 Frontpage. Editor de páginas Web de Microsoft.
 Adobe Illustrator. Programa de diseño vectorial con él se pueden crear y
diseñar logotipos, anuncios, ilustraciones para libros, revistas o páginas web.
 CorelDraw. Es una aplicación completa de diseño gráfico que facilita la
creación de trabajos gráficos profesionales.
 Xara. Es un software de dibujo e ilustración rápido y con interesantes
funcionalidades. Puede sustituir a Corel o IIlustrator.
Video

PREGUNTAS
¿?

Internet y páginas web

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Internet y páginas web

Similaire à Internet y páginas web (20)

Dernier

Dernier (20)

Internet y páginas web