Embed Size (px)
Citation preview
DISEÑO WEB
Msc. Ramiro Gareca
¿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.
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.
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.
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.
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+.
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.
¿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.
PRINCIPIO Un buen diseño gráfico busca el equilibrio óptimo
entre la sensación visual y la información textual o gráfica.
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
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.
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.
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.
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:
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.
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.
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..
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.
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
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/
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.
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.
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.
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.
ETAPAS DEL PROYECTO
Análisis
Elección de solución
Ejecución
Mantenimiento
ANÁLISIS DEL SITIO WEB
Ventajas
• Internet.
• Alcance potencialmente global.
• Sistema de información.
Desventajas
• Hosting.
• Mantenimiento.
• Capacitación.
• Riesgos de seguridad.
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.
ESTRUCTURA TECNOLÓGICA
Del lado del Servidor
Sistema Operativo
Software servidor
Lenguaje
Del lado del Cliente
HTML/XML/CSS/JavaScript
Navegadores: Vista final
HOSTING
ARQUITECTURA DE ALTO NIVEL
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
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
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
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%
CRITERIOS DE DISEÑO DE WWW Criterios locales
LayoutNavegaciónLinksGráficosCalidadSubjetividad
Criterios globalesNavegaciónCalidadSubjetividad
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
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
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
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
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
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
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
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
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
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
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
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)
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
NAVEGADORES Interpreta el código HTML de la página. Internet Explorer y Netscape Navigator
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.
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
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
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”
La pagina resultante es como sigue:
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
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.
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.
