fundamentos del diseño web

2. ¿Porqué son importantes las páginas WEB?

3. Alcance mundial de un producto o servicio
• Posicionarnose en la mente del consumidor.
• Posibilidad de actualizar la información de manera inmediata.
• Elevar el número de clientes potenciales y mantener los fijos.
Prestigio empresarial
• Se compra por necesidad, preferencia, impulso o atracción a un producto o servicio.
• Al momento de tomar la decisión, la calidad y el prestigio influyen.
• Ventaja competitiva.
• 24 hours open - 24 hours sales.
Tarjeta de presentación empresarial
• Con las TIC muchos buscan información en la WEB y aparecer en los motores de
búsqueda es una ventaja frente a los competidores.
Excelente relación costo-beneficio
• Bajo costo comparado con otros medios publicitarios que no alcanzan el meta mercado.
• Costos de mantenimiento bajos vs. beneficios.

4. Historia de la WEB
(Red, telaraña o malla)

5. 1945
Vannevar Bush propuso que las
computadoras deberían usarse
como soporte del trabajo intelectual
de los humanos. Diseño una
máquina llamada MEMEX (MEMory
EXtension) que permitiría el registro,
la consulta y la manipulación
asociativa de ideas y eventos
acumulados en nuestra cultura.
Memex, se quedó en una idea
visionaria y nunca se desarrollo
pero influyó definitivamente en el
concepto de hipertexto e internet.
Vannevar Bush
y el prototipo
MEMEX

6. Las primeras computadoras electrónicas, construidas en la
década de 1940, utilizaron tubos de vacío.

7. El Transistor
El transistor bipolar fue inventado en
los Laboratorios Bell de EE. UU. en
diciembre de 1947 por John Bardeen,
Walter Houser Brattain y William
Bradford Shockley, quienes fueron
galardonados con el Premio Nobel
de Física en 1956. Fue el sustituto
de la válvula termoiónica de tres
electrodos, o triodo.
En la década de 1960, los transistores discretos reemplazaron
los tubos, lo cual llevó a una mayor velocidad y a un menor
consumo de energía

8. El Circuito Integrado (IC)
La mayoría de los circuitos necesitan un componente activo
capaz de conmutar o amplificar corrientes eléctricas. En la
primera mitad del siglo XX, los tubos de vacío llevaron a cabo
esa tarea. Mientras que algunas aplicaciones siguen utilizando
los tubos de vacío, los transistores los han reemplazado casi
todos.
Ahora se puede mantener la potencia de cálculo de las viejas
computadoras del tamaño de una habitación en la punta de tu
dedo, gracias a los circuitos integrados.

9. 1965
Ted Nelson, acuñó el concepto de
“hipertexto”al crear un sistema de
almacenamiento y recuperación de
datos al que llamo “Xanadú”.
Nelson concebía las computadoras
como máquinas de “media”, y
buscó una generación de media
que superara las limitaciones del
papel. Proponía cruzar y conectar
toda la información disponible y
almacenada mediante enlaces
de texto.

10. El PC
El primer registro que se conoce del
término, en inglés, personal computer
apareció en la revista New Scientist
en 1964, en una serie de artículos
llamados «El mundo en 1984». En un
artículo titulado «The Banishment of
Paper Work», Arthur L. Samuel, del
Centro de Investigación Watson de
IBM escribió: «Hasta que no sea viable
obtener una educación en casa, a
través de nuestra propia computadora
personal, la naturaleza humana no
habrá cambiado».

11. Internet
Red mundial de computadoras interconectadas entre sí, internet transporta
y almacena gran cantidad de datos a los cuales podemos acceder mediante
páginas web o correo electrónico.

12. Sir Timothy “Tim” John Berners-Lee
(Londres, Reino Unido, 8 de junio de 1955) es un científico de la computación británico,
conocido por ser el padre de la Web. Estableció la primera comunicación entre un cliente y
un servidor usando el protocolo HTTP en noviembre de 1989. En octubre de 1994 fundó el
Consorcio de la World Wide Web (W3C) con sede en el MIT, para supervisar y estandarizar
el desarrollo de las tecnologías sobre las que se fundamenta la Web y que permiten el
funcionamiento de Internet.

15. Una página web, página electrónica o ciberpágina, es un documento o información
electrónica capaz de contener texto, sonido, vídeo, programas, enlaces, imágenes, y
muchas otras cosas, adaptada para la llamada World Wide Web (WWW) y que puede ser
accedida mediante un navegador. Esta información se encuentra generalmente en formato
HTML HyperText Markup Language
o
XHTML eXtensible HyperText Markup Language
y puede proporcionar navegación (acceso) a otras páginas web mediante enlaces de
hipertexto. Las páginas web frecuentemente también incluyen otros recursos como pueden
ser hojas de estilo en cascada, guiones (scripts), imágenes digitales, entre otros.

16. Las páginas web pueden estar almacenadas en un equipo local o en un servidor web
remoto. El servidor web puede restringir el acceso únicamente a redes privadas, por
ejemplo, en una intranet corporativa, o puede publicar las páginas en la World Wide Web.
El acceso a las páginas web es realizado mediante una transferencia desde servidores,
utilizando el protocolo de transferencia de hipertexto
HTTP HyperText Transfer Protocol

17. Una página web está compuesta principalmente por información (sólo texto y/o módulos
multimedia) así como por hiperenlaces; además puede contener o asociar hoja de estilo,
datos de estilo para especificar cómo debe visualizarse, y también aplicaciones embebidas
para así permitir interactividad.
Es frecuente ver a personas referirse con “página web” a un sitio web completo. Siendo
rigurosos, esto es incorrecto ya que “página web” se refiere a una página concreta, con
una URL específica y no a un sitio completo compuesto por múltiples páginas web con
diferentes URLs
URL Uniform Resource Locator
(identificador de recursos uniforme)

18. Páginas estáticas y páginas dinámicas
El contenido de una página web puede ser predeterminado (página web estática) o
generado al momento de visualizarla, o solicitarlo a un servidor web (página web
dinámica).
Páginas estáticas
Al acceder el usuario, el servidor descarga simplemente un simple fichero con un contenido
condificado en HTML que se visualiza a continuación en su navegador. Un proceso muy
similar a la descarga de cualquier fichero, por ejemplo un documento PDF. No permiten
la interacción con el usuario, es como una colección de documentos invariables, como un
libro, en la web.

19. Páginas dinámicas
Se generan al momento de la visualización. No son un simple documento HTML, sino
que se están creadas en algún lenguaje interpretado. El ejemplo más popular es PHP, el
lenguaje en el que están programadas aplicaciones muy populares como WordPress o
MediaWiki. Esto permite la creación de aplicaciones muy complejas. Un ejemplo típico
serían las tiendas online como Amazon.
Aquí la web interactúa con el usuario y es necesario que componga las páginas de manera
dinámica. Por ejemplo: cuando un usuario busca determinados productos, la aplicación
realiza una consulta a su base de datos, obtiene los resultados y compone con ellos “sobre
la marcha” el HTML que corresponde a la lista de los productos. Una vez compuesto
dinámicamente el HTML de la página entera, se devuelve al navegador exactamente igual
que si hubiese sido una página HTML estática.

20. Hipertexto
Sistema de organización y presentación de datos que se basa en la vinculación de
fragmentos textuales o gráficos a otros fragmentos, lo cual permite al usuario acceder a la
información no necesariamente de forma secuencial sino desde cualquiera de los distintos
ítems relacionados.

21. Dreamweaver es una aplicación que permite a
personas que conozcan el lenguaje HTML y a las que
no, crear páginas y sitios WEB, permitiendo incluir
imágenes, textos, animaciones y videos y el estilo de
las páginas con CSS (Cascading Style Sheets).

22. WEBSITE
index.html products.html promo.html contact.htmlproducts.html promo.html

23. WEBSITE SERVERSERVER

24. SERVER
Hosting
(Alojamiento)
Domein
(Dominio)

25. Dominios de nivel superior
Cuando se creó el Sistema de Nombres de Dominio en los años 1980, el espacio de nombres
se dividió en dos grupos. El primero incluye los dominios territoriales, basados en los dos
caracteres de identificación de cada territorio (.co.mx.es) denominados ccTLD (country
code top level domain o «dominio de nivel superior geográfico»).
El segundo grupo incluye dominios de nivel superior genéricos (gTLD), que representan
una serie de nombres y multiorganizaciones. Inicialmente, estos dominios fueron: COM,
NET, ORG, EDU, GOB y MIL, a los que posteriormente se unieron otros.

26. The server is all
time connected to
WWW

27. “Lo que hemos visto es que las herramientas que están disponibles para que los diseñadores
creen experiencias digitales requieren saber código. Pero la mayoría de los diseñadores o no lo
quieren o no están interesados en aprenderlo o lo han hecho y no es la manera en que funciona
su mente. Lo que nos dicen es que quisieran diseñar una web tan fácilmente como trabajan con
InDesign, Illustrator o Photoshop”.
Jane Brady, Senior Marketing Manager

28. Diseño del Website
¿Para que
necesito el
sitio WEB?
¿Cuantas páginas
debe tener?
¿Que elementos
va a contener
cada página?
Elaboración del
mapa del sitio y la
navegación

29. Etapas de diseño
Requerimientos
del cliente
Mapa de
navegación
Diseño gráfico
(Retícula)
Maquetación,
construcción del sitio
Publicación
del sitio Web
1 2
3 4
5

30. La navegación debe ser intuitiva
wireframe, sitemap, mapa del sitio
mapa de navegación
Página de inicio
About us Products Oferts
Products Oferts
Products Oferts
Products
Products
Nutrition Contact

31. Header - cabecera
inicio
Footer - pie de página
Navegación
de la página
Contenido
Navegación del sitio
Estructura del sitio WEB