El documento describe los objetivos y conceptos básicos del diseño de páginas web y portales educativos. Los objetivos incluyen manejar herramientas web para desarrollar páginas web y portales educativos, usar entornos virtuales de aprendizaje, e identificar la diferencia entre páginas web y portales educativos. Explica conceptos como protocolos, dominios, subdominios y elementos de diseño como punto, línea, forma, color y textura.

1. DISEÑO DE PÁGINAS WEB Y
PORTALES EDUCATIVOS

2.  OBJETIVOS A LOGRAR
 Manejar las distintas herramientas web, mediante la
experimentación en el desarrollo de páginas web y portales
educativos.
 Usar entornos virtuales de aprendizaje como soporte a sus
proyectos.
 Identificar la diferencia entre páginas web y portales educativos
proporcionando la comprensión de las mismas, otorgando un
valor significativo a la educación.
DISEÑO DE PÁGINAS WEB Y
PORTALES EDUCATIVOS
O

3. WorldWide Web (WWW): Es un sistema de información, propio de Internet.
Sus características son:
Información por hipertexto: Diversos elementos (texto o imágenes) de la información que
vemos en pantalla tiene vínculos con otras informaciones que pueden ser de otras fuentes.
Para acceder a esta otra información bastará con hacer clic sobre dichos vínculos.
Gráfico: En la pantalla aparece simultáneamente texto, imágenes e incluso sonidos.
Navegador: Es el programa que nos ofrece acceso a Internet. Debe ser capaz de
comunicarse con un servidor y comprender el lenguaje de todas las herramientas que
manejan la información deWeb. Ejemplo Internet Explorer.
Servidor: Se encarga de proporcionar al navegador los documentos y medios que este
solicita. Utiliza un protocolo HTTP para atender las solicitudes de archivos por parte de un
navegador.
HTTP: Es el protocolo de transferencia de hipertexto, es decir, el protocolo que los servidores
deWorldWideWeb utilizan para mandar documentos HTML a través de Internet.
URL (Uniform Resources Locator): Localizador Uniforme de Recursos, o dicho más
claramente, es la dirección que localiza una información dentro de Internet.
CONCEPTOS BÁSICOS

4. PROTOCOLO
 ES UN CODIGO DE SOTFWARE QUE PERMITE LA
COMUNICACIÓN ENTRE REDES.
 UTILIZAN (HTTP) PROTOCOLO DE HIPERTEXTO DE
TRANSFERENCIA.
 TCP/IP=CONJUNTO DE TRANSMISION DE
CONTROL PROTOCOLO/ INTERNET PROTOCOLO
 URL=ES LA DIRECCION O LOS DOCUMENTOS QUE SE
EMPLEAN EN HTTP.
 W W W =WORLDWIDEWEB

5. DOMINIO
 INDICA EL SERVIDOR FISICO DE LA INFORMACION REQUERIDA.
 SIGLAS DEL SERVICIO WEB
 NOMBRE DEL SERVIDOR
 ORGANIZACIÓN
 CODIGO O SUFIJODEL PAIS.
www.filosofia.ec
WEB SERVIDOR ORGANIZACION

6. DOMINIO
EXTENSION ORGANIZACIÓN
.COM COMERCIAL
.EDU EDUCACION
.GOV GOBIERNO
.NET SERVICIOS DE RED
.ORG NOCOMERCIALES
.EC PAIS
www.filosofia.ec
WEB SERVIDOR ORGANIZACION

7. SUB-DOMINIO
SE ENCUENTRA DESPUES DEL DOMINIO.
SEPARADO POR UN / SLASH.
www.filosofia.ec
WEB SERVIDOR ORGANIZACION

15. DISEÑO WEB
Para el diseño web (sitios web o páginas web) se debe definir una estrategia
muy clara con 3 elementos fundamentales para lograr los objetivos del mismo:
•Mercado meta (público meta al que va dirigida la página)
•Elementos que van a formar parte del sitio web (Ejemplo: galería de fotos)
•Estructura del sitio (mapa del sitio web)

16. PASOS DEL DISEÑO WEB
1. Reunión Inicial de definición del proyecto
Se efectuará una reunión entre los responsables de toma de decisión del proyecto
para determinar los alcances del proyecto y sus requerimientos.
Además se determinará la estructura del sitio web (mapa)
2. Entrega de los contenidos:
Se deberá de entregar toda la información necesaria para la creación del sitio web.
Lo recomendado es que la información sea entregada en
formatos estándar como son:
• Textos en Documento Word o compatible
• Tablas: en word o excel.
• Imágenes en archivo digital (jpg ó psd)
• Videos formatos wav, mov o mpeg

17. PASOS DEL DISEÑO WEB
3. Estructuración de contenidos
Se efectuará un ordenamiento y análisis de los contenidos entregados,
para determinar todo el contenido y la organización del mismo.
4. Diseño
Una vez que se tienen todos los contenidos listos se realiza un análisis
determinar los aspectos gráficos del proyecto, como animaciones, logos,
colores y estilo que se desea.

18. PASOS DEL DISEÑO WEB
5. Prototipo
Se realiza un prototipo (boceto) en pantalla de la forma de navegación,
los contenidos, y la estética en formato imagen. Con éste prototipo se realizan
cambios acorde a los gustos y preferencias hasta llegar a un diseño que cumpla
con los requerimientos.
6. Montaje del Diseño
Se realizará el montaje del diseño aprobado en la tecnología seleccionada.
Este diseño estará conformado por el HOME y las páginas internas

19. PASOS DEL DISEÑO WEB
7. Revisión y corrección de propuesta en línea:
Se revisa el sitio web con el cliente y revisar ajustes finales previos a la
aprobación para su puesta en línea.
8. Publicación:
se publica el sitio aprobado para que esté disponible en internet.

20. PASOS DEL DISEÑO WEB
9. Optimización:
es la etapa que una vez publicado, se enfoca en mercadear el sitio web
para que tenga visitas.

21. ¿CUÁNDO INICIAR?
ArquitecturadelainformaciónWeb
Objetivos del
sitio basado en
necesidades
Requerimientos
de contenido
Arquitectura de
la información
Diseño de la
información:
navegación
Diseño visual
Brief del sitio web Mapa del sitio web Bocetos/Wireframes Diseño del sitio
web
Entregables
Aquí

22. ¿CÓMO?
ArquitecturadelainformaciónWeb
1. Agrupar y
Etiquetar el
Contenido
2. Identificar
Requerimien
tos
Funcionales
3. Análisis de
Sitios
Similares
(Benchmark)
R.
Arquitectura
de
Contenidos:
Mapa del
Sitio
Documentos de referencia:
• Brief del sitio web
• Personas y Escenarios (buyer persona)
• Pauta de comparación de sitios web

23. AGRUPARY ETIQUETAR EL CONTENIDO (1/2)
Una de las técnicas más populares
utilizadas por los arquitectos de
información, es la conocida como
card sorting u ordenamiento de
tarjetas.
Se generan tarjetas con
categorías, subcategorías y
contenidos individuales de las
distintas secciones que tendría el
sitio web.
ArquitecturadelainformaciónWeb
1
Mapa del Sitio

24. AGRUPARY ETIQUETAR EL CONTENIDO (2/2)
 La técnica de 'card sorting' se basa en la observación de cómo
los usuarios agrupan y asocian entre sí un número
predeterminado de tarjetas etiquetadas con las diferentes
categorías temáticas del sitio web.
 De esta forma, partiendo del comportamiento de los propios
usuarios, es posible organizar y clasificar la información de un
sitio web conforme a su modelo mental.
ArquitecturadelainformaciónWeb
1
Producto de trabajo:
Mapa del sitio preliminar

25. IDENTIFICAR LOS REQUERIMIENTOS
FUNCIONALES
Definición de lo que se busca que el sitio haga, es decir, los tipos de interacción que se
busca incluir, tales como:
 Formulario de Contacto para envío de mensajes electrónicos
 Sistema de envío de una noticia por mail a un amigo o compartir en redes sociales
 Chat
 Registro de usuarios
 Galerías fotográficas
 Descarga de archivos
 Carrito de compras y pagos en línea
 Etc.
ArquitecturadelainformaciónWeb
2
Producto de trabajo:
Lista de requerimientos funcionales

26. ANÁLISIS DE SITIOS SIMILARES: BENCHMARK
Buscar sitios en Internet que sean similares
en contenidos, funcionalidad o incluso de
nuestra competencia, con el fin de revisar
de qué manera han resuelto los mismos
problemas que deberemos atender.
ArquitecturadelainformaciónWeb
3
Documento:
Pauta de comparación de sitios web

27. MAPA DEL SITIO
ArquitecturadelainformaciónWeb
R
Documento:
Mapa del sitio web consolidado
Buscar sitios en Internet que sean similares
en contenidos, funcionalidad o incluso de
nuestra competencia, con el fin de revisar
de qué manera han resuelto los mismos
problemas que deberemos atender.

28. Elementos
De Diseño
Punto
Línea
Forma
Color
Textura
Valor
ELEMENTOS DE DISEÑO

29. EL PUNTO
 Es el primero y más simple
 Sirve como foco de énfasis para llamar la atención a información
importante.
 La combinación de puntos representan ideas más complicadas.
 Un serie de puntos atrae la atención en especial si encuentran
cercanos entre sí.

30. LA LÍNEA
 Se define como una serie de puntos.
 Dirigen la atención hacia un punto.
 Actúan como bordes entre ideas o pasos de una secuencia.
 Permite visualizar rápidamente un objeto o idea.
 Puede ser recta, curva o irregular.
 Las líneas:
 Verticales: detiene el movimiento del ojo. simbolizan poder y
fuerza.
 Horizontales: simbolizan descanso y relajación.
 Diagonales: son dinámicas y orientadas a la acción.

31. LA FORMA
 Es un área que sobresale del espacio alrededor, dando un borde
definido o una diferencia.
 Se compone de líneas que encierran un área.
 Pueden dirigir el movimiento del ojo.
 Las formas simples son mas fáciles de recordar
 Definen una relación entre una figura o el fondo.

32. VALOR
 Es el grado de luz u
oscuridad
 Todos los elementos de
diseño lo requieren un valor
de contraste para ser vistos.
 Es utilizado para describir
objetos, formas y espacio.
 Las áreas:
 oscuras: denotan misterio,
drama, amenaza.
 Luminosas: denotan
felicidad, cercanía, calidez

33. TEXTURA
 Es la apariencia de la
superficie de un objeto:
aspereza, suavidad,
profundidad.
 Se utilizan para acentuar un
área.

34. COLOR
 Es la parte de luz que se refleja en los objetos.
 Los colores primarios, no son mezclas de otros colores y son:
Rojo, Amarillo, Azul.
 Color secundario: se obtiene al mezclar dos colores primarios.
 El color puede ayudar a mejorar o demeritar la composición

35. LA RUEDA DEL COLOR
Azul
Morado
Rojo
Naranja
Amarillo
Verde
 Se crea cuando los colores
primarios y secundarios se
colocan en círculo
 Los colores directamente
enfrentados se llaman
complementarios y crean
un gran contraste
 Cuando se utilizan colores
cercanos en la rueda se
crean armonías

36. COLOR
Características y aplicaciones

37. DEFINICIÓN DE COLOR
 Es una percepción visual que se genera en el cerebro al
interpretar las señales nerviosas que le envían los
fotorreceptores de la retina del ojo y que a su vez
interpretan y distinguen las distintas longitudes de onda
que captan de la parte visible del espectro
electromagnético.
 Es un atributo que percibimos de los objetos cuando
hay luz
 En las artes es el medio que una obra transmita las
mismas sensaciones que el artista experimentó

38. CIRCULO CROMÁTICO
 El ojo humano distingue unos 10.000 colores.

39. PROPIEDADES DEL COLOR
 Tono (matiz): es el término utilizado para la característica
llamada color. Es el color mismo

40. PROPIEDADES DEL COLOR
 Valor (luminosidad): es el claro obscuro de unTono, el tono
más obscuro se conoce como Sombra y el más claro como
Tinte.

41. PROPIEDADES DEL COLOR
 Saturación(intensidad): Indica la medida de la pureza de un
color. Cuanto más saturado esté un color, más intenso y vivo
aparece. Cuando un color pierde saturación, se va
aproximando al gris neutro.

43. ¿QUÉ NOS SUGIEREN LOS COLORES?
 Los colores transmiten sensaciones particulares tales como calidez,
frialdad, vitalidad, Frescura, descanso y los clasificamos como ,
cordiales, dinámicos, tiernos, terrosos, maduros, etc.
¿Para qué combinamos los colores?
 Se combinan para complementar la sensación y adaptarla a situaciones
particulares de jóvenes, niños, adultos, ejecutivos, etc.
 Su aplicación en carteles, anuncios, páginasWeb, fachadas, interiores,
objetos, ropa, etc.
¿Cómo se combinan los colores?
 Normalmente se elige un color predominante o base, y otros
que lo apoyen y se subordinen a él

44. GRUPOS DE COLORES
 Colores acromáticos : aquellos situados en la zona
central del círculo cromático, próximos al centro de este,
que han perdido tanta saturación que no se aprecia en
ellos el matiz original.

45. GRUPOS DE COLORES
 Colores cromáticos grises : situados cerca del centro del
círculo cromático, pero fuera de la zona de colores
acromáticos, en ellos se distingue el matiz original,
aunque muy poco saturado.

46. GRUPOS DE COLORES
 Colores monocromáticos : variaciones de saturación de
un mismo color (matiz), obtenidas por desplazamiento
desde un color puro hasta el centro del círculo
cromático.

47. MONOCROMÍA
 El uso de diferentes tintes o sombras de un mismo tono

48. FORMAS COMPOSITIVAS DEL
COLOR Armonizar, significa coordinar los diferentes valores que
el color adquiere en una composición.

49. ARMONÍA
 En todas las armonías cromáticas se pueden observar
tres colores
Dominante: Es el mas neutro y de mayor extensión,
sirve para destacar los otros colores que conforman
nuestra composición gráfica, especialmente al
opuesto.
El tónico: Es el complementario del color de
dominio, es el mas potente en color y valor, y el que
se utiliza como nota de animación o audacia en
cualquier elemento (alfombra, cortina , etc.)
El de mediación: Actúa como conciliador y modo de
transición entre cada uno de los dos anteriores, suele
tener una situación en el circulo cromático cercano a
la de color tónico.

50. COLORES ANÁLOGOS
 son colores que están uno al lado del otro en el círculo
cromático.

51. COLORES COMPLEMENTARIOS
 son color que se encuentra en posición opuesta en el círculo
cromático.

52. CONTRASTE
 se produce cuando en una composición los
colores no tienen nada en común no guardan
ninguna similitud.
 De tono: Cuando utilizamos diversos tonos
cromáticos, es el mismo color de base pero en
distinto nivel de luminosidad y saturación.
Contraste de claro/oscuro o contraste de
grises: El punto extremo está representado
por blanco y negro, observándose la
proporción de cada uno
Contraste de color: Se produce por la
modulación de saturación de un tono puro con
blanco, con negro, con gris, o con un color
complementario).

53. CONTRASTE
 Contraste entre complementarios: Se
colocan un color y otro opuesto en el
círculo de color. Para conseguir algo más
armónico, es recomendable que uno de
ellos sea un color puro y el otro esté
modulado con blanco o con negro.
Contraste entre tonos cálidos y fríos: Es
la unión de un color frío y otro cálido.

54. COLORES FRÍOSY CÁLIDOS
 Se llaman colores cálidos aquellos que van del rojo al amarillo y los
colores fríos son los que van del azul al verde. La calidez y la frialdad
atienden a sensaciones térmicas subjetivas.

55. COLORES FRÍOS

56. COLORES CÁLIDOS

57. COLORES FRESCOS

58. INTERACCIÓN DEL COLOR
 Ningún color puede ser evaluado al margen de su entorno
 Josef Albers afirma que "un mismo color permite
innumerables lecturas
 Un mismo tono puede parecer diferente cuando se coloca
sobre diferentes fondos, y diferentes colores pueden
parecer casi el mismo cuando se asocian a distintos fondos.

59. EFECTOS DEL COLOR
 Tamaño: El círculo central parece más pequeño si está rodeado de
círculos de mayor tamaño y más grande si por el contrario lo rodean
círculos más pequeños.

60. EFECTOS DEL COLOR
 Transparencia: Se visualiza el efecto de
transparencia por la aparente mezcla de
tonos.
 Peso y masa del Color: El color actúa por
gravitación y extensión de una superficie
cromática. Los tonos fríos y claros
parecen más livianos y menos
sustanciales, los cálidos y oscuros
parecen más pesados y densos.

61. PSICOLOGÍA DEL COLOR
 El color genera influencia en la personalidad y conducta de los
individuos, forma parte de su percepción, en donde la relaciona
con su entorno en donde interpreta todo lo que ve.
 La psicología de los colores ha sido estudiada por grandes
maestros a lo largo de la historia, como por ejemplo Johann
Wolfgang von Goethe yWassily Kandinsky

62. PSICOLOGÍA DEL COLOR
 Blanco: Es el que mayor sensibilidad posee frente a la luz. Es la
suma o síntesis de todos los colores, y el símbolo de lo
absoluto, de la unidad y de la inocencia, significa paz o
rendición. Los cuerpos blancos nos dan la idea de pureza y
modestia. El blanco crea una impresión luminosa de vacio,
positivo infinito.
 Negro Símbolo del error, del mal, el misterio y en ocasiones
simboliza algo impuro y maligno. Es la muerte, es la ausencia
del color.También transmite nobleza y elegancia.
 Gris: Es el centro de todo ya que se encuentra entre la
transición entre el blanco y el negro, y el producto de la mezcla
de ambos. Simboliza neutralidad, indecisión y ausencia de
energía. Muchas veces también expresa tristeza, duda y
melancolía. El color gris es una fusión de alegrías y penas, del
bien y del mal.

63. LA RUEDA DE COLOR (CONT.)
• Otra palabra para colorHue
• Intensidad o pureza del colorChroma
• Color mezclado con blancoTinte
• Color mezclado con grisTono

64. Rojo Verde Azul
Color
RGB
COLOR EN LAWEB
• Cada color se representa con la combinación de
tres canales: rojo, verde, azul
• Esta forma de representación del color se le
llama RGB

65. UN COLOR EN CIFRAS DECIMALES
 Cada color se representa utilizando 3 cifras para cada canal
0 a 255 0 a 255 0 a 255
• Cada cifra representa el grado de intensidad de
cada canal
• Cero es la menor intensidad y 255 es la máxima
intensidad

66. UN COLOR EN CIFRAS
HEXADECIMALES
 Cada color se representa utilizando 3 cifras para cada canal
00 a FF 00 a FF 00 a FF
• Cada cifra (de dos dígitos) representa el grado
de intensidad de cada canal
• 00 es la menor intensidad y FF es la máxima
intensidad

67. PALETA DE COLORES
16.7
Millones de
colores
Componen una
paleta completa de
colores usando
dígitos
hexadecimales

68. PRIMERA PALETA DE COLORES
SEGUROS
Black Maroon Green Navy
Silver Red Lime Blue
Gray Purple Olive Teal
White Fucsia Yellow Aqua
Estos 16 colores son reconocidos en todos los navegadores.
Su nombre equivale a su representación numérica.

69. SEGUNDA PALETA DE COLORES SEGUROS
 Se compone de 216 colores.
 El sistema operativo reserva
40 para uso interno
 Un color seguro (Websafe) se
muestra por igual en
cualquier navegador en modo
de 256 colores

70. La Imagen
Por su uso
Por su
origen
Por su
abstracción
manualdigital
analógica
webimprimirpantalla
visibleidealizada
dibujo pintura
paisajístico
retrato
bodegón
ilustración
caricatura
figura
icono
vectorialMapa bits
fotografía
Por su
estado
Fija
En
movimient
o
película video
bmp
TIF
2D 3D
ilustraciónfotografía
jpg
jpg
TIF
pcx
jpg
gif
png
targa