![Page 1: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/1.jpg)
DISEÑO WEB
Msc. Ramiro Gareca
![Page 2: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/2.jpg)
¿QUE ES UNA PAGINA WEB?
Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio Web. Su principal característica son los hipervínculos de una página, siendo esto el fundamento de la Web.
![Page 3: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/3.jpg)
CARACTERISTICAS DE UNA PAGINA WEB
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 datos de estilo para especificar cómo debe visualizarse, y también aplicaciones embebidas para así hacerla interactiva.
Las páginas web son escritas en un lenguaje de marcado que provee la capacidad de manejar e insertar hiperenlaces, generalmente HTML.
![Page 4: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/4.jpg)
PAGINA WEB ESTATICALas páginas web estáticas son aquellas realizadas en HTML que pueden mostrar en alguna parte de la página objetos en movimiento tales como banners, gifs animados, videos, etc.
![Page 5: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/5.jpg)
![Page 6: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/6.jpg)
TIPOS DE PAGINAS WEB
• PAGINA WEB DINAMICA: Las páginas dinámicas que se generan al momento de la visualización, se especifican a través de algún lenguaje interpretado, generalmente Java Script, y la aplicación encargada de visualizar el contenido es la que realmente debe generarlo. Las páginas dinámicas que se generan, al ser solicitadas, son creadas por una aplicación en el servidor web que alberga las mismas.
![Page 7: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/7.jpg)
![Page 8: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/8.jpg)
DISEÑO EN PHPPHP es un lenguaje de programación interpretado, diseñado originalmente para la creación de páginas web dinámicas. Se usa principalmente para la interpretación del lado del servidor (server-side scripting) pero actualmente puede ser utilizado desde una interfaz de línea de comandos o en la creación de otros tipos de programas incluyendo aplicaciones con interfaz gráfica usando las bibliotecas Qt o GTK+.
![Page 9: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/9.jpg)
DISEÑO EN HTMLHTML, siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.
![Page 10: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/10.jpg)
¿QUE ES UN BLOG?Un blog, (también se conocen como weblog o bitácora), es un sitio web que recopila cronológicamente textos o artículos de uno o varios autores, apareciendo primero el más reciente.
Habitualmente, en cada artículo, los lectores pueden escribir sus comentarios y el autor darles respuesta, de forma que es posible establecer un diálogo.
El uso o temática de cada blog es particular, los hay de tipo personal, periodístico, empresarial o corporativo, tecnológico, educativo, etc.
![Page 11: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/11.jpg)
![Page 12: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/12.jpg)
PRINCIPIO Un buen diseño gráfico busca el equilibrio óptimo
entre la sensación visual y la información textual o gráfica.
![Page 13: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/13.jpg)
INTEGRIDAD DEL DISEÑO EN WWW Consistencia y predicción son dos
atributos esenciales de cualquier sistema de información, ayudando a los usuarios a identificar el origen y relación de las páginas en el World Wide Web
![Page 14: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/14.jpg)
NOTAS PARA EL DISEÑO WEB Necesidades o metas que desea cubrir por medio de
la página. Coherencia entre el diseño de la página y el
mensaje. Pensar es la clase de audiencia. No utilizar todas las herramientas para el diseño, ya
que en lugar de ayudar a captar atención, hace que la página sea muy pesada, y a la hora de que alguien desea entrar a ella se aburrirá de tanto esperar a que baje la misma.
Y en cuanto a colores se refiere, es importante recordar que en entre mas discretos sean los colores mejor, y nunca se debe de sobresaturar una página con color.
![Page 15: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/15.jpg)
NOTAS PARA EL DISEÑO WEB Las personas que por primera vez entran en
una web, no saben se les ofreces, ni entienden la estructura de la navegabilidad de la web.
Los usuarios normalmente otorgan 5 segundos para la oferta.
No se debe mantener la información muy lejos demás de dos clic.
![Page 16: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/16.jpg)
INTERACCIÓN EN LOS SITIOS DE WEB Interacción, permite la seguridad y
confianza al usuairio. De que no es difícil extraer la información. Se le llama poder de convencimiento.
La facilidad de interacción hace que aumente la experiencia y aprendizaje de los usuarios, se debe hacer que ellos tomen el control
Los usuarios disponen de poco tiempo, hay que agradecerles que dediquen de su tiempo a la web.
![Page 17: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/17.jpg)
RELACIÓN ENTRE EL TAMAÑO DEL DOCUMENTO Y LA PANTALLA
Numerosos estudios han demostrado el efecto desorientador de las pantallas de ordenador desplazables
La mayoría de quienes accederán a sus páginas lo harán en condiciones de pantalla y ordenador inferior a él.
La largas páginas de WWW requieren por parte del usuario un esfuerzo por recordar mucha más información de la que ve en pantalla, olvidando fácilmente el contexto en que se enmarca la misma:
![Page 18: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/18.jpg)
ENCABEZAMIENTOS DE DOCUMENTOS
La correcta titulación de un documento WWW permite al lector conocer de forma inmediata la materia principal de la que trata el mismo.
![Page 19: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/19.jpg)
TIPOGRAFÍA Una buena tipografía depende del contraste
entre una fuente y otra, así como entre la caja de texto y el espacio en blanco que lo rodea. Nada atrae más al ojo y al cerebro que los fuertes contrastes, lo que sólo se consigue con un cuidadoso diseño de las páginas.
![Page 20: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/20.jpg)
LOS PIES DE PÁGINA: VALIDAR EL ORIGEN Y EL AUTOR Origen del documento Autor o autoridad responsable del
mismo Contacto con la persona o sección
para más información Copyright o derechos de autor de la
página Fecha de creación o última
actualizacióny fecha de caducidad del documento
Otros links a la página principal de la institucion, etc..
![Page 21: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/21.jpg)
URL Todas las páginas en sistemas World
Wide Web poseen un único "Uniform Resource Locator" (URL) que funciona como la dirección "Internet" de la página.
![Page 22: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/22.jpg)
Dirección URL: la forma de escribir las direcciones de los distintos servicios Internet.
La estructura de una dirección URL, se compone de tres partes:
http://www.anayamultimedia.es/catalogo/index.htm
Metodode
Acceso
Dirección del ordenador Es opcional
![Page 23: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/23.jpg)
DOMINIOS Y SU REGISTRO Los dominios son une manera sencilla de identificar ordenadores en
Internet, están conformados por un nombre y terminación, la cual indica la procedencia o el ramo al que pertenecen.
Existen diversas terminaciones de dominio o dominios de primer nivel: .org, .com, .es, .mx, etcétera; e indican el grupo al que pertenecen. Los principales grupos son genéricos y territoriales.
Dominios GENERICOS:
com.- Para empresas o cualquier página con carácter comercial. org.- A organizaciones, asociaciones etc. gov.- Para páginas del gobierno de los Estados Unidos. .net.- De proveedores de servicios. .mil.- Instituciones militares de Estados Unidos. .edu.- Instituciones que tengan relación con la educación. .int.- Pertenece a la Unión Internacional de Telecomunicaciones, y va dirigida a los
Organismos creados en acuerdos internacionales.
Dominios TERRITORIALES:
Son otorgados a personas o empresas relacionadas con un país determinado, e indican el origen de la página y son señalados con respecto al país.
DX GUIA DE DISENO WEB - diseño eXperimental http://www.dx.com.mx/
![Page 24: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/24.jpg)
DOMINIOS Y SU REGISTRO NIC es el organismo que se encarga de la regularización del
registro de dominios a nivel mundial, y ella indica el uso de cada dominio y autoriza el registro y el registrador de un dominio.
El registro de un dominio se puede hacer a través de alguna de las diversas empresas que, a nivel mundial se encargan de realizar este trabajo y cuestan entre 6 y 35 dólares por año.
Para el registro de un dominio territorial, se tiene que hacer con el NIC del país de procedencia de la página, quien es el encargado de indicarnos como realizar esta labor y también llevan el registro de este tipo de dominios.
En la actualidad, además de ser riesgoso, es muy difícil conseguir un dominio de forma gratuita, ya que existen muy pocas empresas que ofrezcan este servicio sin ningún costo, y la gran mayoría de las que lo hacen reserva para si los derechos del dominio.
![Page 25: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/25.jpg)
ALOJAMIENTO WEB
Para publicar se necesita colocar en algún servidor, que son ordenadores conectados a la red, y envían la página cuando un explorador la pide.
Existen dos tipos diferentes de servidores, servidores gratuitos y servidores de pago.
![Page 26: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/26.jpg)
REGISTRO EN LAS BUSCADORES Un de las maneras mas efectivas para conseguir que una
página web sea visitada, es registrándola en uno de los tantos buscadores que existan en la red.
Para esto, se tiene que llenar un formulario, el cuál es ofrecido por el buscador al que uno se desea inscribir, pero generalmente son iguales, o tienen bastante similitud entre si.
Procedimientos básicos para el registro en cualquier buscador:
*Índices.- Cada buscador tiene diversas categorías en las que clasifica las páginas dependiendo de su contenido, se navega a la categoría a la que se va a añadir, y se busca nueva dirección, o algo similar, y después aparecerá el formulario.
*Motores de búsqueda,- Son lo buscadores que no tienen un índice, y que mantiene una búsqueda constante de las nuevas páginas, para así incluirlas en su buscador.
Herramientas de multiregistro: Para registrarse en distintos buscadores a la vez.
![Page 27: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/27.jpg)
CONSEJOS EN EL DISEÑO WEB 1: Se deben de plantear metas y objetivos. 2: La simplicidad sin extravagancia (sobrio) 3: Comunicación 4: Velocidad (tiempo que tarda en bajar la página) 5: Entretenido e interesante (llenar con letras y más letras) 6: Usar formas lineales, color plano (son más fáciles de
cargar que las imágenes y los efectos) 7: Separar gráficos y textos (estos dos jamás deben de
mezclarse, nunca intente insertar texto en gráficos). 8: Dedicar el tiempo libre para la búsqueda y conocimiento
de las nuevas tecnologías, es de lo más eficaz para mantenerse siempre en el gusto del público.
9: Aprender a ver sus diseños desde la perspectiva del usuario, para cubrir sus necesidades y demandas mas fácilmente.
10: Aprender a ver el diseño desde otros ángulos del mismo, por ejemplo desde la perspectiva de un arquitecto.
11: Acompañar el trabajo con música, puede resultar placentero, relajante y de mucha efectividad.
![Page 28: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/28.jpg)
ETAPAS DEL PROYECTO
Análisis
Elección de solución
Ejecución
Mantenimiento
![Page 29: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/29.jpg)
ANÁLISIS DEL SITIO WEB
Ventajas
• Internet.
• Alcance potencialmente global.
• Sistema de información.
Desventajas
• Hosting.
• Mantenimiento.
• Capacitación.
• Riesgos de seguridad.
![Page 30: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/30.jpg)
SOLUCIONES DISPONIBLES
Solución a la medida• Programación desde cero.• - Desarrolladores de software.• El sistema final se adapta por completo
a su modelo de negocio.• -El costo de análisis y tiempo de
desarrollo es alto.
CMS (Content Management System)• Poca o nula programación.• - Limitación en las capacidades del
sistema final.• Rápida implementación y
mantenimiento relativamente sencillo.• - Nunca se adaptará por completo a las
reglas del negocio.
![Page 31: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/31.jpg)
ESTRUCTURA TECNOLÓGICA
Del lado del Servidor
Sistema Operativo
Software servidor
Lenguaje
Del lado del Cliente
HTML/XML/CSS/JavaScript
Navegadores: Vista final
![Page 32: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/32.jpg)
HOSTING
![Page 33: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/33.jpg)
ARQUITECTURA DE ALTO NIVEL
![Page 34: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/34.jpg)
ARQUITECTURA DE ALTO NIVEL
Página Ppal.
Introd. (Descripc.)
Noticias
Discusiones o Comentarios
Buscar o Navegar
Contenidos
Preescolar
EGB
Polimodal
Terciarios
Directivos
Profesional
ChatsComentarios Foros
Buscador
Nav. p/tema
Nav. juegos
Nav. p/curso
![Page 35: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/35.jpg)
DESCRIPCIONES DE PÁGINAS
Página EGB
AlumnosTests VocacionalesCursosLibrería
DocentesCursosLibrerías
BúsquedasBúsquedas avanzadas
Recorrido del sitioPor temaPor cursoJuegos
Salas de reuniónComentariosChatsForos
![Page 36: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/36.jpg)
DIAGRAMAS DETALLADOS DE LA ARQUITECTURA
EGB
Alumnos
Docentes
Buscar o Navegar
Discusiones o Comentarios
Tests Vocac.
Cursos
Librería
Cursos
Clase
Recreo
MateriasMateriasMaterias
Juegos
Torneos
Tema
Ejerc.
Clase
Recreo
MateriasMateriasMaterias
Tema
Ejerc.
Juegos
Elab. Guias PrácticasTareas admi-nistrativas
![Page 37: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/37.jpg)
DISEÑO DE WWW Conocer a los usuarios
Usuarios de la Web en general GVU Survey of WWW users
(http://www.gvu.gatech.edu/user_surveys/) Usuarios del sitio particular
ej. Usuarios del sitio de Sun (www.sun.com)Pantalla gráfica de tamaño grande: 78%Pantalla gráfica pequeña: 13%Conexión rápida: 82 %Módem: 9%Acceso en sólo texto: 8%
![Page 38: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/38.jpg)
CRITERIOS DE DISEÑO DE WWW Criterios locales
LayoutNavegaciónLinksGráficosCalidadSubjetividad
Criterios globalesNavegaciónCalidadSubjetividad
![Page 39: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/39.jpg)
CRITERIOS DE DISEÑO DE WWW Criterios locales: layout
Largo de página Los usuarios no desean efectuar scrolling
El largo de cada página no debe exceder 1½ pantallas
La Home Page no debe superar el largo de una pantalla
Colocar elementos de navegación al comienzo de cada página
Barras de scroll horizontales Su uso dificulta la interacción a los usuarios
![Page 40: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/40.jpg)
CRITERIOS DE DISEÑO DE WWW Criterios Locales: layout
Porcentaje de texto Por claridad, el % de texto de una página no
debiera superar el 30% (resto: imágenes, blancos, etc.)
Párrafos cortos El usuario prefiere escanear la página, no leer Deben utilizarse párrafos cortos
La longitud de los párrafos debiera ser menor a 80/120 palabras
![Page 41: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/41.jpg)
CRITERIOS DE DISEÑO DE WWW Criterios locales: navegación
Cantidad de links en una página La cantidad de links de un párrafo depende de la
longitud del párrafo10 % (párrafos cortos)5 % (párrafos largos)
Links textuales En lo posible, todos los links debieran tener una
representación textual Los links gráficos (imágenes) deben tener un link
textual alternativo
![Page 42: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/42.jpg)
CRITERIOS DE DISEÑO DE WWW
Criterios locales: navegaciónLinks inadecuados
En lo posible debe evitarse la presencia de links tales como “volver”, “regresar”, “adelante”, “atrás”El texto debe ser más significativoLa navegación del sitio por el visitante no
necesariamente sigue la estructura del sitio
Tabla de links (barras de navegación) La presencia de los links de navegación en una barra
o tabla facilita la navegación del visitante
Links al comienzo de la página La presencia de un link al comienzo de la página es
importante, especialmente en páginas largas
![Page 43: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/43.jpg)
CRITERIOS DE DISEÑO DE WWW Criterios locales: links
Links con sustantivos Los links deben contener al menos un sustantivo
(significativo)
Longitud de los links Los links deben ser cortos para posibilitar la
lectura rápidaHasta 3/4 palabras
Link “click here” No proporciona información acerca de la página
destino
![Page 44: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/44.jpg)
CRITERIOS DE DISEÑO DE WWW Criterios locales: gráficos
Imágenes con texto alternativo El usuario puede desactivar la carga de
imágenes (por motivos de performance)Tamaño de las imágenes en una página
Debe acotarse el tamaño total destinado a imágenes en una páginaMayor cantidad de imágenes producen mayor
tiempo de descarga La Home Page puede tener una mayor cantidad
de imágenes
![Page 45: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/45.jpg)
CRITERIOS DE DISEÑO DE WWW Criterios locales: gráficos
Utilizar recursos para reducir el tiempo de descarga de imágenes Ej. Imágenes interlazadas
Indicador del tamaño de la imagen La provisión del tamaño de la imagen permite al
browser determinar exactamente su localización El texto de la página aparece rápidamente en
su posición finalEl usuario puede leer el texto mientras se
carga la página
![Page 46: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/46.jpg)
CRITERIOS DE DISEÑO DE WWW Criterios locales: calidad
Link a la Home Page Permite al visitante regresar al comienzo del sitio
Intenta evitar la desorientaciónNunca se conoce de donde proceden los
visitantes
Dirección del sitio al cual pertenece la página Similar al criterio anterior:
DesorientaciónDesconocimiento del origen de los visitantes
![Page 47: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/47.jpg)
CRITERIOS DE DISEÑO DE WWW
Dirección del Webmaster Recolección de comentarios, quejas,
sugerencias, etc. de los visitantes
Copyright Indicar a los visitantes los derechos de
propiedad de las páginas
Fecha de última actualización Indicador de la actualidad y calidad de los datos
contenidos
![Page 48: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/48.jpg)
CRITERIOS DE DISEÑO DE WWW Criterios locales: subjetividad
Home Page representativa del contenido del sitio El visitante debe obtener una idea rápida del
objetivo y contenido del sitio
Claridad en los conceptos contenidos en la página Facilitar la comprensión del visitante
Distribución de los elementos visuales y textuales Balance entre los elementos contenidos en la
página
![Page 49: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/49.jpg)
CRITERIOS DE DISEÑO DE WWW Criterios locales: subjetividad
Combinación adecuada de caracteres No producir fatiga visual al visitante No dificultar la comprensión de la información
Tipo y forma de los caracteres Utilizar caracteres fáciles de leer
Ej. las letras cursivas son más dificiles de leer
Animaciones Evitar la presencia de animaciones que
distraigan al visitante
![Page 50: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/50.jpg)
CRITERIOS DE DISEÑO DE WWW Criterios globales: navegación
Numero promedio de links desde la Home Page a cada página 2 a 4 Links
Links desactualizados Evitar la presencia de links “cortados”
Páginas sueltas Evitar la existencia de páginas aisladas (o semi-
aisladas)
![Page 51: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/51.jpg)
CRITERIOS DE DISEÑO DE WWW Criterios globales: navegación
Consistencia en los links principales Asegurar la misma colocación y presentación de
los links de navegación, en todas las páginas del sitio
Indicador del camino Es conveniente mostrar al usuario el camino
desde la home page a su página actualEvitar desorientación
![Page 52: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/52.jpg)
NAVEGADORES Interpreta el código HTML de la página. Internet Explorer y Netscape Navigator
![Page 53: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/53.jpg)
EDITORES
• Programa que permite redactar documentos. Editores visuales. Evitan la escritura de
código HTML (la pagina se construye). Editores de texto. La pagina se crea a través del
código HTML.
![Page 54: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/54.jpg)
Editores Visuales: (generan basura)Macromedia Dreamweaver, Microsoft Frontpage,
Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia
Editores de texto.(solo lo necesario)Wordpad o el Bloc de notas
![Page 55: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/55.jpg)
Color Hexadecimal Nombre
#FFFFFF white
#000000 black
#000080 navy
#0000FF blue
#008000 green
#008080 teal
#00FF00 lime
#00FFFF aqua
#800000 maroon
#800080 purple
#808000 olive
#808080 gray
#C0C0C0 silver
#FF0000 red
#FF00FF fuchsia
#FFFF00 yellow
Colores en hexadecimal
![Page 56: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/56.jpg)
CREACIÓN DE LA PRIMERA PAGINA Crear un directorio de trabajo para la pagina.(ejm. mipagina) en
“mis documentos” Con el bloc de notas escribir el siguiente codigo:
<html><head><title>pagina de inicio</title></head><body bgcolor="99CC99" ></body></html>
• Guardar el archivo “guardar como” con el nombre inicio.html en la carpeta “mipagina”
![Page 57: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/57.jpg)
La pagina resultante es como sigue:
![Page 58: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/58.jpg)
TEXTO Se requiere dar formato al texto
Carácter Representación
< <
> >
á á
Á Á
é é
É É
í í
Í Í
ó ó
Ó Ó
ú ú
Ú Ú
ñ ñ
Ñ Ñ
™ ™
Algunos caracteres
especiales
• < y > indican inicio y fin de etiqueta
Se puede escribir directamentesin la representación en HTML
  espacio en blanco
![Page 59: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/59.jpg)
algunos atributos de la regla horizontal:
AtributoSignificado Posibles valores
alignalineación de la
regla dentro de la página
left (izquierda)right (derecha)center (centro)
width ancho de la reglaun número, acompañado de % cuando se desee
que sea en porcentaje
size alto de la regla un número
noshadeeliminar el
sombreado de la regla
no puede tomar valores
Inicio<hr align="left" width=“50%" size=“10" noshade>Bienvenidos a mi página.
![Page 60: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/60.jpg)
Ejemplos de buen diseño: Google y Yahoo!
¿Gran diseño gráfico? ¿Propuesta atractiva y seductora?
¿Utiliza la última tecnología? ¿el último plugin de flash etc.?
Simplicidad, facilidad de uso, mejores resultados, fácil descarga.
En Yahoo! (y en Google) se realizan estudios de campo, entrevistas con usuarios, se hacen evaluaciones de usabilidad, etc.
En líneas generales el diseño está orientado a satisfacer las necesidades de los clientes.
![Page 61: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/61.jpg)
![Page 62: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/62.jpg)
![Page 63: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/63.jpg)
![Page 64: Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio](https://reader035.vdocuments.pub/reader035/viewer/2022062500/5665b4b71a28abb57c9376f2/html5/thumbnails/64.jpg)