Diseño de
Sitios Web
Fundamentación
Web
Mgs. David Leonardo Guevara
Web
Internet
Navegadores
Alojamiento Dominios index
• Hosting • Organizacionales • Página Web
• Housing • Geográficos • Sitio Web
• Portal Web
Mgs. David Leonardo Guevara
Internet
El nombre Internet procede de las
palabras en inglés ”Interconnected
Networks”, que significa “redes
interconectadas”. Internet es la unión de
todas las redes y computadoras
distribuidas por todo el mundo, por lo que
se podría definir como una red global en
la que se conjuntan todas las redes que
utilizan protocolos TCP/IP y que son
compatibles entre sí.
El internet tiene sus inicios en la década de los sesenta, en un
esfuerzo por el Departamento de Defensa de Estados Unidos para
hallar una alternativa a una posible incomunicación que se
produjera por una guerra atómica. Para 1972 fue llevada a cabo la
primera demostración al público del sistema que se creó, gracias a
la colaboración de un grupo de la universidad de Utah con tres
universidades del estado de California, a dicha conexión se le
denominó ARPANET (Advanced Research Projects Agency Network).
Internet, Concepto Definicion, extradido el 11/10/2021 desde [Link]
Mgs. David Leonardo Guevara
Conexión a Internet
Internet hacia
Del Proveedor
En el Hogar el Proveedor
al Hogar
ISP
Wifi o Fibra óptica
Fibra óptica
inalámbrico
Adsl
Radio enlace
Cable utp Radio enlace
Por datos
Satelital
Datos Satelital
Energía Eléctrica
Mgs. David Leonardo Guevara
Servicios a Internet
Servicios de un Servicios de un ISP
Servicios del Internet
Servidor Internet
•FTP •De archivos. •ISP de Acceso
•Gopher •De Directorio •ISP de Buzón de
•News Activo/Dominio. correo
•Telnet •De impresión. •ISP de Servidores
•Mail •De correo. •ISP de Tránsito
•Finger •De Proxy. •ISP de Antivirus
•Talk •De web
•IRC •De DNS.
•WWW •De DHCP.
•Busqueda •De FTP.
•Streaming •De Juego
•Telefonia VoIP
•Chat
•Foros
Mgs. David Leonardo Guevara
Modelo OSI Red
Mgs. David Leonardo Guevara
Modelo OSI Red
Niveles OSI orientados a red
Estos niveles se encargan de gestionar el apartado físico de la conexión, como el establecimiento de la
comunicación, el enrutamiento de ésta y el envío
Capa 1: Física Se encarga directamente de los elementos físicos de la conexión. Gestiona los procedimientos a
nivel electrónico para que la cadena de bits de información viaje desde el transmisor al receptor sin alteración
alguna. Define el medio físico de transmisión: cables de pares trenzados, cable coaxial, ondas y fibra óptica
Capa 2: Enlace de datos Se encarga de proporcionar los medios funcionales para establecer la comunicación de
los elementos físicos. Los elementos típicos que todos conocemos para servir de ejemplo a esta capa son el switch
o también el router de red.
Capa 3: Red Esta capa se encarga de la identificación del enrutamiento entre dos o más redes conectadas. Este
nivel hará que los datos puedan llegar desde el transmisor al receptor siendo capaz de hacer las conmutaciones y
encaminamientos necesarios para que el mensaje llegue. El protocolo más conocido que se encarga de esto es
el IP.
Capa 4: Transporte Se encarga de realizar el transporte de los datos que se encuentran dentro del paquete de
transmisión desde el origen al destino. Esto se realiza de forma independiente al tipo de red que haya detectado
el nivel inferior. Los protocolos más conocidos son UDP y TCP.
Niveles OSI orientados a aplicación
En el segundo grupo están los niveles que trabajan directamente de cara a aplicaciones que solicitan servicios de
los niveles inferiores. Adecuan la información modelándola para que sea entendible desde el punto de vista del
usuario.
Capa 5: Sesión Mediante este nivel se podrá controlar y mantener activo el enlace entre las máquinas que están
transmitiendo información. De esta forma se asegurará que una vez establecida la conexión, esta e mantengas
hasta que finalice la transmisión.
Capa 6: Presentación Como su propio nombre intuye, esta capa se encarga de la representación de la
información transmitida. Asegurará que los datos que nos llegan a los usuarios sean entendibles a pesar de los
distintos protocolos utilizados tanto en un receptor como en un transmisor. Traducen una cadena de caracteres en
algo entendible, por así decirlo.
Capa 7: Aplicación Este es el último nivel, y en encargado de permitir a los usuarios ejecutar acciones y comandos
en sus propias aplicaciones como por ejemplo un botón para enviar un email o un programa para enviar archivos
mediante FTP. Permite también la comunicación entre el resto de capas inferiores.
Mgs. David Leonardo Guevara
Modelo OSI Red
Mgs. David Leonardo Guevara
Navegadores
Un navegador o navegador web (del inglés, web browser) es una
aplicación que opera a través de Internet, interpretando la
información de archivos y sitios web para que éstos puedan ser
leídos (ya se encuentre esta red mediante enlaces o hipervínculos)
La funcionalidad básica de un navegador web es permitir la
visualización de documentos de texto, posiblemente con recursos
multimedia incrustados. Los documentos pueden estar ubicados en
la computadora en donde está el usuario, pero también pueden
estar en cualquier otro dispositivo que esté conectado en la
computadora del usuario o a través de Internet,
Navegador Web, Wikipedia, extradido el 21/02/2013 desde [Link]
Mgs. David Leonardo Guevara
Alojamiento
Es una colección de servidores "web servers", que no son otra cosa que
computadoras con características propias, que llegan a ser poderosas
equipos, en las que se tienen respaldos de energía eléctrica, respaldos diarios
de la información configurado servicio de Internet (www, email, ftp, etc.) y
con conexiones permanentes al Internet las 24 horas los 365 días del año a
través de líneas de alta velocidad, almacenan la información que compone
las páginas de Internet de un sitio web, sus aplicaciones y cuanta con un
monitoreo permanente de personal calificado
Hosting
El hosting consiste en alquilar espacio en un web servers que
esté en línea. De este modo se obtiene determinada cantidad
de bytes para “subir” los sitios y es allí a donde envía su página
para que cualquier persona la pueda requerir.
Housing
El housing, es la instalación de un servidor propio dentro de una
empresa. Este servidor debe estar en línea constantemente
para poder responder a las peticiones de los clientes
Mgs. David Leonardo Guevara
Dominios
Cada ordenador que se conecta a Internet se identifica por medio de una
dirección IP. Ésta se compone de 4 números comprendidos entre el 0 y el 255
ambos inclusive y separados por puntos.
Así, por ejemplo un dirección IP podría ser: [Link]. Un usuario de
Internet, no necesita conocer ninguna de estas direcciones IP. Las manejan
los ordenadores en sus comunicaciones por medio del Protocolo TCP/IP de
manera invisible para el usuario. Esto se logra por medio de los
DNS
Dominios Organizacionales
.com Empresas (Compañías)
. edu Instituciones Educativas
.org Organizaciones sin fines de lucro
.gov Entidades del Gobierno.
.mil Instalaciones Militares.
Dominios Geográficos
ec Ecuador es España
fr Francia it Italia
jp Japón au Australia
ch Suiza ir Irlanda
(todo país cuenta con su propio dominio)
Mgs. David Leonardo Guevara
Web
Página Web
Es un documento electrónico que contiene información y que
esta almacenado en algún sistema de cómputo que se
encuentre conectado a la red mundial Una página Web es la
unidad básica del World Wide Web
Sitio Web
Es un conjunto de páginas Web referentes a un tema en
particular, ([Link]), con un nombre de dominio específico.
Los Sitios Web pueden ser de diversos géneros, destacando los
sitios de negocios, servicio, comercio electrónico en línea,
imagen corporativa, entretenimiento y sitios
informativos, E-learning
Portal Web
Es un término, sinónimo de puente, para referirse a un Sitio Web
que sirve o pretende servir como un sitio principal de partida
para las gentes que se conectan a el. Los portales tienen
granreconocimiento en Internet por el poder de influencia que
tienen sobre grandes comunidades. La idea es emplear estos
portales para localizar la información y los sitios que nos interesan
y de ahí comenzar nuestra actividad en Internet.
Mgs. David Leonardo Guevara
Diseño de
Sitios Web
Planificación
Web
Mgs. David Leonardo Guevara
Objetivos
Objetivo
Este es uno de los elementos más importantes, hay que responder a
la pregunta: ¿para qué se pública este sitio en el Internet? Estar en
Internet no es una respuesta válida. Se pueden usar como presencia
institucional, como un medio para ofrecer información, para la
realización de ventas directas o bien como centro de consultas.
Un buen comienzo implica un Sitio con una actitud clara.
Ideas claras
• Contenido: Generar el interés de los usuarios.
• Diseño: Crear un Sitio que sea fácil de leer y navegar.
• Credibilidad: Ganar la confianza de los visitantes.
• Imagen: Respetar las características de la empresa.
• Dominio: Elegir el nombre del dominio adecuado.
Mgs. David Leonardo Guevara
Contenido
Desarrollar un Sitio no es solamente publicar en la Web los materiales impresos de
la compañía. Para atraer visitantes se debe dar algo más, aprovechando los
múltiples recursos que Internet ofrece.
Hay que generar el interés de los usuarios para que de esa manera se conecten al
Sitio y tengan información precisa y de interés, y no solamente lo que pueden ver
en un fax o una carpeta de presentación. Internet es una herramienta interactiva,
que permite crear un vínculo de ida y vuelta con los usuarios y/o clientes
independientemente de dónde ellos estén. No hay que desaprovechar esta
oportunidad usando el espacio en la Red como un depósito de documentos.
El contenido dependerá directamente de la temática del Web. La gran mayoría
de los usuarios que acuden a un Sitio Web lo hacen en busca de información. Da
igual como se presente dicha información (texto, imágenes, vídeo, audio) pero
una Web debe aportar contenido. Es importante tener en cuenta que WWW es un
medio de comunicación distinto a los que hasta ahora conocíamos (televisión,
radio, prensa, etc.); el navegante pasa de página en página Web a ritmo de clic
de ratón, y generalmente pasa poco tiempo en una misma página. Por lo tanto no
se debe abusar de la información textual, ya que son muy pocos los visitantes que
se leen completamente una página Web. Siempre se ha dicho que una imagen
vale mas que mil palabras, y aunque una página Web no es un programa de
televisión, las imágenes siempre son importantes.
Mgs. David Leonardo Guevara
Credibilidad
Para que el Sitio sea más creíble y gane la confianza de las personas que lo
visitan, es recomendable incluir el nombre de la Empresa o de la persona
responsable con la dirección física e información acerca de los contactos
por otras vías como número de teléfono y fax. Es algo muy tranquilizador para
quienes visitan saber que existe detrás de nuestro Sitio una empresa o una
persona real aún cuando se trate de un negocio que solamente funciona en
Internet.
Donde más se nota que estos datos son fundamentales es en los Sitios en los
cuales se vende a través de la Red. Para dejar los datos personales y en
especial el número de tarjeta de crédito, es imprescindible que quienes
visiten el Sitio tengan la absoluta certeza de que la empresa existe y es
responsable. El primer paso de un sitio exitoso es ganar la confianza de
quienes nos visita
Mgs. David Leonardo Guevara
Imagen del Sitio
Al definir el diseño y el contenido del Sitio, es muy importante respetar todas
las características con las cuales se identifica la empresa o Institución.
Por ejemplo, si las personas asocian McDonald's con los colores rojo, amarillo
y blanco, el Sitio también debe tener estos colores.
De igual manera hay que respetar los logotipos sus formas, para que la gente
al entrar a un sitio genere una ambiente real al ingresar al sitio y no confundir
a los navegantes
Hay que establecer que el sitio web es original de una marca, puede existir
muchos sitios de aficionados a la marca, esto debe permitir a los navegantes
identificar un sitio oficial de una Empresa o una Institución
Mgs. David Leonardo Guevara
Público
Al hablar de público no nos referimos a cualquier persona que recorriendo la
red llegue a nuestra página, sino a aquella parte de la población a la que
pretendemos alcanzar e influir con el mensaje. Esto esta estrechamente
vinculado con los objetivos establecidos y la naturaleza del sitio que nos
proponemos.
Necesitamos construir un identikit de nuestro público, tratando de definir, en
general sus intereses, inclinaciones, gustos, preferencias, etc., y en particular,
como usuarios de Internet. Tenemos que dar una respuesta lo más concreta
y específicamente posible a la pregunta “esa gente, ¿qué busca de mi
página?”. Porque la Web debería dar respuesta a esa pregunta. Todo lo
que sepamos y supongamos sobre el público-target (el que nos interesa)
servirá, además, para establecer parte de los criterios de diseño de
contenidos, lenguajes, estética.
Mgs. David Leonardo Guevara
Competencia
Cualquiera sea el rubro o negocio en el que queramos incursionar, es más
factible que en Internet existan diversos Sitios ubicados en el mismo
segmento, es decir, que busquen el mismo público.
Ya sea de acá o de cualquier parte del mundo, es una muy buena práctica
visitar y analizar esos Sitios y fundamentalmente estudiar a fondo los más
exitosos. Es una práctica muy recomendable ingresar a un buscador y pedir
Sitios que desarrollen actividades similares a las que estamos realizando
nosotros y queremos publicitar en Internet. En Internet hay mucho material y,
seguramente, haciendo una recorrido exhaustivo por Sitios del mismo rubro,
va a tener una fuente de ideas inagotables para potenciar no sólo la
presencia on-line sino también off-line.
Mgs. David Leonardo Guevara
Estructura
El otro tema es que los usuarios reconocen las páginas de la Web utilizando como guía
palabras clave colocadas en botones, barras de control, gráficos mapeados, o
utilizadas como marcas de hipertexto; palabras que por su significado indican o
sugieren el contenido de páginas a las que derivan. Es sabido que los significados de las
palabras no son unívocos, y la ambigüedad puede ser un problema. El conocimiento de
la cultura y usos lingüísticos del público nos será sin duda, de gran utilidad a la hora de
elegir las palabras que se titularán nuestros botones o identificarán los links de derivación
a otras páginas del sitio.
Hay que tener en cuenta que el usuario no tiene cómo saber la manera en que sigue la
cadena de links más allá de las páginas a las que puede entrar directamente desde el
lugar donde se encuentra. Que el usuario no encuentre la información buscada
después de recorrer cuatro o cinco páginas encadenadas puede significar que el
mismo abandone el sitio o la indeseada sensación de frustración que nos interesa evitar.
Un tema relacionado a éste es el de los mecanismos de identificación y de recorrido del
sitio. Estos deberían permitir al usuario saber en todo momento el lugar o zona del sitio
donde se encuentra, así como desplazarse hacia cualquier otra página sin necesidad
de recorrer toda la cadena en sentido inverso. Los paneles de control son una buena
ayuda. Un Sitio es más creíble y legible cuando presenta consistencia en aspectos tales
como tipo de letra utilizado, fondos y, en general, la distribución de los distintos
elementos en la pantalla. En cada una de las pantallas debe haber una presencia
sólida. Todo lo que ayude a una coherencia visual y de trabajo será en beneficio del
navegante y, por ende, del Sitio.
Mgs. David Leonardo Guevara
Estructura
Cabecera
Menú
Contenido
Pie
Cabecera
Menú
Contenido
Pie
Mgs. David Leonardo Guevara
Navegación
Un punto de vital importancia en relación al Sitio es que el mismo sea fácil de
leer desde su página de inicio. Diseños muy cargados resultan sumamente
incómodos y, por lo general lentos, lo cual es contraproducente si queremos
atraer visitantes. Los Sitios más frecuentados son precisamente muy sencillos
de visualizar y, por ende, de recorrer. Hay que evitar el uso de elementos
pesados que no se necesiten ver, como fotos o sonidos y si, en cambio,
utilizar estos recursos cuando se convierten en elementos de información.
Es muy importante incluir todos los links internos dentro de cada página en el
mismo lugar siempre. Si la barra de navegación está compuesta por
imágenes, es muy importante agregar otra barra de navegación que
contenga los mismos enlaces pero en forma de texto. De esta manera las
personas que tengan configurado el navegador para no mostrar imágenes
van a poder navegar por el Sitio sin problema. Esto también puede agilizar la
navegación, ya que estamos dando a conocer los enlaces del Sitio antes de
que se descarguen la imágenes.
Otro punto muy importante es el tamaño de las páginas, por lo general se
recomienda que no superen la pantalla y media. De esta manera no se
satura al lector con tanta información y se evita que se produzca el "scroll
infinito".
Mgs. David Leonardo Guevara
Diseño de
Sitios Web
Diseño Web
Mgs. David Leonardo Guevara
Diseño
Tipografía
El tamaño de la tipografía debe ser adecuado para ser leído sin
dificultad aun en computadoras configuradas con altas resoluciones
de pantalla. Es importante jerarquizar los títulos, subtítulos,
manteniendo la coherencia de los estilos en todo el sitio. Para eso es
una buena ayuda escribir una pequeña norma que establezca el
tamaño relativo de la tipografía para cada categoría de títulos y
subtítulos, así como si éstos van centrados, alineados, etc. El color del
texto no debe confundirse con el fondo de la página como así
tampoco debe cansar a la vista.
Mgs. David Leonardo Guevara
Diseño
Textura de fondo
Evitar el uso de imágenes de fondo en las páginas. Si se
usan hay que tener mucho cuidado. No deben tener un
dibujo excesivamente nítido que perjudique la lectura.
Tampoco es conveniente que sean motivos muy
contrastados (contornos claros y oscuros), ya que se
verán mal tanto los textos oscuros como los claros.
Diseño monótono
Algunos expertos recomiendan re-diseñar el Sitio cada
seis meses. Esto proyecta una imagen de cambio y da la
sensación de que el Sitio se encuentra en constante
actualización.
Mgs. David Leonardo Guevara
Diseño
Imágenes
Las imágenes deben ocupar el menor tamaño posible. Es
muy importante reducir al mínimo la cantidad de colores
de los gráficos. Hay que tratar de repetir los iconos y las
imágenes tantas veces sea posible, esto se debe a que el
browser lee los gráficos de la memoria caché cuando se
ingresa a una página. Muy importante: El tamaño de las
imágenes influye en la velocidad en que se carga la
página.
Coherencia visual
La coherencia visual ayuda en ese sentido. Un sitio en el
que cada página tiene un fondo diferente, varían los
iconos y cambian otros componentes de la composición
visual, desconcierta al usuario, que no sabe si está en el
mismo Sitio o si el último enlace lo llevó al otro extremo del
mundo.
Mgs. David Leonardo Guevara
Compatibilidad
Compatibilidad de Navegadores (Browsers)
Toda página web tiene que poder ser visualizada con las
más recientes versiones de Netscape, Internet Explorer,
Opera, Mozilla Firefox etc. Y con lo de mas recientes
versiones no me refiero a que hay que cargarlas de
efectos de los últimos navegadores.
Compatibilidad de Resoluciones
Hay una gran incomodidad al tener que desplazar la
ventana de nuestro navegador hacia la derecha. Para
evitar esto es necesario adaptar nuestras páginas para
cualquier monitor por medio de tablas que ocupen el
100% de la pantalla o tomar en cuenta la resolución
promedio que utilizarán los visitantes. Actualmente la
mayoría de monitores tienen una resolución de
800x600,por lo que en si trabajamos en este formato,
monitores más grandes podrán verla sin problema. Hay
que tomar en cuenta que aún existen computadoras
con resoluciones de 640x480, pero ya es una minoría
menor al 5% de los navegantes.
Mgs. David Leonardo Guevara
Compatibilidad
Diseño de Interfaz
La interfaz de usuario de una web es la primera
impresión, independientemente del valor del
contenido. La interfaz debe arrastrar inmediatamente
al usuario. Una interfaz bien diseñada mejora la
percepción del contenido o de los servicios de los
usuarios que proporciona un sitio web
Facilidad de Navegación
Todo sitio debe contar con un menú de navegación
o estructura bien elaborado para que el visitante no
se pierda. Es recomendable incluir en todas las
paginas links hacia la página principal y hacia las
principales secciones del sitio. De ser posible también
un link hacia el email para enviar comentarios y un
link para ir al inicio de página. Una recomendación
es incluir un Mapa del Sitio para sitios muy extensos.
Mgs. David Leonardo Guevara
Compatibilidad
Rapidez al cargar páginas y gráficas
Lastimosamente Internet aun no ofrece gran velocidad
a la mayoría de usuarios. Ayude nuevamente al visitante
reduciendo los contenidos de las páginas, evitando usar
muchas gráficas y de ser posible reduzca a lo máximo el
tamaño de sus gráficas. En la sección de Editores
Gráficos del área de Referencia de este sitio encontrara
algunos links hacia excelentes herramientas para este
trabajo.
Tomar en cuenta las actualizaciones
Un sitio o página de Internet nunca está realmente
terminado. Simplemente dejas de trabajar en el por un
rato. Tomando esta frase muy en cuenta hay que
diseñar todo sitio pensando en el futuro y dejando
espacio para agregar nueva información o secciones.
Un diseño inicial flexible es un factor importante para
mantener la apariencia de un sitio y su funcionalidad
luego de varios meses y actualizaciones.
Mgs. David Leonardo Guevara
Mapas de Navegación
Lineal
Es la más familiar de todas las estructuras, porque la información impresa tradicional
tiende a seguir este tipo de organización . La presentación de la información de una
forma lineal es con frecuencia, muy útil cuando se analiza un procedimiento paso a
paso, pero hay ocasiones en lasque se puede necesitar algún tipo de información
suplementaria
Lineal Básica Una organización lineal pura facilita la progresión ordenada a través del
cuerpo de la información, esta forma asegura que el usuario reciba la información en el
orden adecuado. La única opción es moverse hacia delante o hacia atrás
Lineal con Alternativas Simula la interactividad proporcionando dos o más opciones
para salir de una página que finalmente, lleva al usuario a otra página dentro de la
secuencia. El poder elegir opciones, la estructura lineal con alternativas conserva el
camino lineal a través de un documento
Mgs. David Leonardo Guevara
Mapas de Navegación
Lineal con opciones Es adecuada cuando se tiene que conservar el camino general,
pero hay que dar cabida a ligeras variaciones, tales como saltarse determinadas
páginas
Lineal con caminos Laterales. Permite algunos desvíos controlados, la estructura obliga
Mgs. David Leonardo Guevara
Mapas de Navegación
Rejilla
Es una estructura lineal doble, en la que
sus elementos se relacionan tanto
vertical como horizontalmente, Puesto
que una rejilla tiene una organización
espacial. Una estructura en rejilla es muy
regular y su exploración puede resultar
muy sencilla para el usuario, no hay
muchos tipos de información que sean lo
suficientemente regulares como para
adaptarse bien a este tipo de
Organización
Jerarquía
Jerárquica o árbol, está estructura
puede esconder o mostrar tanta
información como se desee. Esta
estructura comienza con una página
principal o raíz , se presentan varias
opciones que permite ir visualizando
páginas más especificas
Mgs. David Leonardo Guevara
Mapas de Navegación
Malla Completa
La estructura de un sitio en el que cada una de sus páginas está vinculada a
todas las demás se denomina malla completa.
En una malla completa, el número de vínculos es igual al número de páginas
por el número de páginas menos una.
Mgs. David Leonardo Guevara
Diseño de
Sitios Web
Lic. Mgs. David Leonardo Guevara
