G:\diseño web
- 1. INSTITUTO SUPERIOR TECNOLOGICO PUBLICO NUEVA ESPERANZA Integrantes: asmat samIllan Karen esthefany ledesma fernández Paola lIlIbeth fernández muños brenda madeleyne dIseño Web I. Introducción Web o la web, la "red" o www de "World Wide Web", es básicamente un medio de comunicación de texto, gráficos y otros objetos multimedia a través de Internet, es decir, la web es un sistema de hipertexto que utiliza Internet como su mecanismo de transporte o desde otro punto de vista, una forma gráfica de explorar Internet. La web se basa en buscadores y el protocolo de transporte de hipertexto (hypertext transport protocol (http)). La mayoría de los documentos de la web se crean utilizando lenguaje HTML (hypertext markup language). Es importante saber que web o www no son sinónimo de Internet, la web es un subconjunto de Internet que consiste en páginas a las que se puede acceder 1
- 2. INSTITUTO SUPERIOR TECNOLOGICO PUBLICO NUEVA ESPERANZA usando un navegador. Internet es la red de redes donde reside toda la información. Tanto el correo electrónico, como FTPs (Abreviatura de File Transfer Protocol, el protocolo para intercambiar archivos en internet), juegos, etc. son parte de Internet, pero no de la Web. Para buscar hipertexto se utilizan programas llamados buscadores web que recuperan trozos de información (llamados "documentos" o "páginas web") de los servidores web y muestran en la pantalla del computador de la persona que está buscando la información gráfica, textual o video e incluso audio. Después se pueden seguir enlaces o hyperlinks en cada página a otros documentos o incluso devolver información al servidor para interactuar con él. Al acto de seguir un enlace tras otro a veces se le llama navegar en Internet. La web se ha convertido en un medio muy popular de publicar información en Internet, y con el desarrollo del protocolo de transferencia segura (secured server protocol (https)), la web es ahora un medio de comercio electrónico donde los consumidores pueden escoger sus productos on-line y realizar sus compras utilizando la información de sus tarjetas bancarias de forma segura. II. Diseño de Páginas WEB Dentro del proceso de creación de un sitio web, el diseño de páginas web es uno de los pasos . En general para la creación de un a página web se debe realizar el siguiente proceso: 1. Registrar el dominio . www.-------.com, uk, fr.... 2. Buscar alojamiento. WebHosting, servidor; fijándose en la conectividad del servidor (velocidad), espacio en disco, servicios que ofrece, volumen de transferancia (Gb/ mes). 3. Elegir un editor de páginas web. Es un software (FrontPage, Composer, Dreamweaver), y es necesario conocer el lenguaje html. 4. Estructura de la página web 5. Diseñar la página web 6. Colgar la página web de internet. Subir 7. Dar de alta en Buscadores 8. Control y Mantenimiento 1. Introducción al diseño de una página Web A la hora de diseñar la página web hay dos conceptos que conviene tener en cuenta y que son la accesibilidad y la usabilidad. 1.1 Accesibilidad 2
- 3. INSTITUTO SUPERIOR TECNOLOGICO PUBLICO NUEVA ESPERANZA La página web se hace con la idea de que sea vista por el mayor número de personas y en múltiples países, pero cada uno de los visitantes va a acceder a ella con un equipo y una forma de navegar que, si no lo tenemos en cuenta, le impida apreciar el diseño o que no lo vea en absoluto. Los factores técnicos y de navegación que afectan a la visualización correcta de una página web son: • Conexiones lentas a internet. • Computadoras que no tienen flash ni plug-ins instalados, muchas veces sencillamente porque su propietario no quiere. • Computadoras con tarjetas gráficas que sólo permiten 256 colores. • Computadoras con pocas fuentes instaladas. • Usuarios con equipos portátiles. • Monitores de baja resolución. • Distintos tipos de exploradores o navegadores. • Usuarios que tienen desactivada la carga de imágenes en su explorador. • Versiones antiguas de los exploradores. • Usuarios con deficiencias visuales que activarán las fuentes más grandes y aumentarán el contraste del texto y los fondos. • Usuarios con deficiencias motrices que les impiden manejar el ratón y usarán sobre todo el teclado. Como es casi imposible contemplar todos estos factores en el diseño de la web, es conveniente tener presente estos 3 principios para lograr que su accesibilidad sea lo mayor posible: 1. La web debe adaptarse al equipo del visitante transformando su aspecto de forma correcta. 2. El texto es siempre lo más accesible para cualquier usuario. Por ello se debe poner siempre un texto alternativo a las imágenes. 3. El contenido debe ser navegable. Hay que colocar elementos de navegación claros y correctamente situados que permitan moverse por la web en todas direcciones. 1.2. Usabilidad Una web muy lograda desde el punto de vista del diseño, pero con una baja usabilidad será un fracaso seguro de visitantes. Se podría dar infinidad de recomendaciones en este sentido: • Diseñar la web pensando en el punto de vista del visitante 3
- 4. INSTITUTO SUPERIOR TECNOLOGICO PUBLICO NUEVA ESPERANZA • La mayoría de los internautas se cansa de esperar a que cargue una página lenta. Debe ser lo más rápida posible. • Navegación fácil e intuitiva. • No agobiar con complejas y pesadas presentaciones. Ir al grano. • Contenidos rigurosos y escuetos. Las páginas cargadas de texto suelen cansar. Si no hay más remedio, dar la opción al visitante mediante un archivo de texto, de imprimir el texto para leerlo en papel que es mucho más cómodo. • No abusar de los colores chillones, de la negrita y, mucho menos, de los mensajes parpadeantes que a muchas personas molestan y no son, en el fondo, necesarios. • Evitar si se puede la aparición de barras de desplazamiento horizontal a partir de una resolución de 800x600. No merece la pena diseñar pensando en resoluciones menores que ya casi no se encuentran. 2. Diseño de página web Como vimos anteriormente, para diseñar un sitio web hay que tomar varios aspectos como el contenido, tamaño de las imágenes, resolución y estructura ya que estos influirán en la aceptación o rechazo del usuario. Cualquier persona puede crear su propio sitio web en un par de días. Pero el hecho de que cumpla su objetivo y sea interesante para los cibervisitantes es el gran reto de todo webmaster (diseñador). Gran parte del éxito de un sitio depende principalmente de su contenido y presentación. Por ejemplo, en el caso de que alguien esté interesado en buscar información sobre su artista preferido, en el ciberespacio hay cientos o miles de webs que hablan de lo mismo. Pero aquel sitio que ofrezca mayor información, un diseño más agradable, buen contenido de fotos y que sea actualizada periódicamente con cierta asiduidad, será con seguridad la preferida por la mayoría. Es por ello que se dice que, para que una página web tenga éxito, es necesario que cumpla tres requisitos fundamentales: informe, entretenga y eduque. Siguiendo el ejemplo anterior, una web dedicada a un artista podría "informar", por ejemplo, al dar referencia sobre los últimos conciertos del mismo, "entretener" con una sala de chat de su club de fans y "educar" al dar las letras del cantante con sus distintos acordes. Cumpliendo estos requisitos básicos y otros más, es casi seguro que el sitio tendrá un gran flujo de visitas. Otros de los puntos que influyen en el éxito de una web son: ▪ Facilidad de navegación 4
- 5. INSTITUTO SUPERIOR TECNOLOGICO PUBLICO NUEVA ESPERANZA Para simplificarle la vida al cibernauta, se aconseja utilizar un índice con el contenido del sitio. Hay que procurar también que las interrelaciones sean de fácil acceso y que estén presentes en cada página, desde el principio al final de la web. ▪ Rapidez al cargar las páginas Como la mayoría de los cibernautas no tienen equipos que les permitan navegar con gran velocidad en Internet, es vital reducir al máximo el tamaño del sitio. Una de las formas es utilizando la menor cantidad posible de imágenes o, en todo caso, que éstas ocupen el menor espacio posible. Cuando una web tiene muchos gráficos y tarda en cargarse, puede ocasionar que el visitante decida no volver más. Es por ello que se aconseja que no tenga más de 120 KBs por página, ya que superando esta cantidad la descarga supera los 60 segundos, tiempo máximo promedio de espera por parte de un internauta. No es recomendable utilizar Java como lenguaje de programación para la web, ya que en este caso la página se pone muy “pesada”. ▪ Tomar en cuenta las actualizaciones Un sitio nunca está realmente terminado. 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. ▪ Estructura clara Asegúrese de que proporciona un camino cómodo para recorrer todas las páginas web que componen su sitio. Si no tiene en cuenta esto perderá la mayoría de los lectores tras las primeras páginas. Antes de empezar a diseñar el sitio web hay que organizarlo y para ello hay que tener claro cuál va a ser el propósito del sitio web, sus contenidos y la audiencia potencial de la que dispondrá. Lo que va a determinar la estructura de la web van a ser en gran medida los contenidos; ellos nos deben indicar cual de los siguientes tres tipos de estructura es el más adecuado: • Estructura de árbol o jerárquica: A partir de una página de bienvenida o portal (raiz) se abren unas secciones (ramas) que a su vez contienen múltiples páginas web (hojas) • Estructura lineal: a partir de una página de bienvenida o portal se suceden las siguientes páginas una tras otra como si se tratara de un libro. • Estructura en red: Las páginas que forman el sitio web se enlazan unas con otras según sus contenidos en una especie de red en la que no se aprecia ningún tipo de jerarquía. Por ejemplo, para la página web de un centro educativo parece más conveniente una estructura en árbol, con una presentación, unas secciones (administración, departamentos, alumnos, etc.) que darían paso a las páginas que elabore cada 5
- 6. INSTITUTO SUPERIOR TECNOLOGICO PUBLICO NUEVA ESPERANZA sección. Esta organización permite al visitante conocer en qué lugar de la web se encuentra y se le facilita la navegación mediante botones que ascienden o descienden en la estructura del árbol para alternar entre secciones. 3. Mas de diseño 3.1. El texto Si la página tiene textos largos es necesario dejar espacios en blanco entre párrafo y párrafo para facilitar la lectura. De utilizar un fondo oscuro, el texto debe ser claro para que pueda leerse y viceversa. También es conveniente evitar fondos con colores irregulares (muchos colores de diversas tonalidades) debido a que pueden ocasionar confusión en el texto. Para el diseño deben utilizarse fuentes populares, como Arial o Times. De nada sirve emplear letras “raras” que sólo pueden verse en la PC del usuario. 3.2. El título Colocar títulos que puedan orientar al usuario sobre el tema que habla la web (“Historia de Chile” por ejemplo). Todo sitio depende del contenido, según sea el tema, será el diseño, así como los colores y su espacio dedicado. COLORES CARACTERÍSTICA BLANCO Pureza, inocencia, optimismo. Purifica la mente a los más altos niveles LAVANDA Equilibrio. Ayuda a la curación espiritual. Cansado y desorientado PLATA Paz, tenacidad. Quita dolencias y enfermedades GRIS Estabilidad. Inspira la creatividad. Simboliza el éxito Inteligencia, alentador, tibieza, precaución, innovación. Ayuda a la estimulación mental. AMARILLO Aclara una mente confusa. Produce agotamiento. Genera demasiada actividad mental. ORO Fortaleza. Fortalece el cuerpo y el espíritu. Demasiado fuerte para muchas personas Energía. Tiene un agradable efecto de tibieza. Aumenta la inmunidad y la potencia. NARANJA Aumenta la ansiedad. Energía, vitalidad, poder, fuerza, apasionamiento, valor, agresividad, impulsivo. Usado ROJO para intensificar el metabolismo del cuerpo con efervescencia y apasionamiento. Ayuda a superar la depresión, Ansiedad de aumentos, agitación, tensión PÚRPURA Serenidad. Útil para problemas mentales y nerviosos. Pensamientos negativos. Verdad, serenidad, armonía, fidelidad, sinceridad, responsabilidad. Tranquiliza la AZUL mente. Disipa temores, depresión, aflicción, pesadumbre. Ecuanimidad inexperta, acaudalado, celos, moderado, equilibrado, tradicional. Útil para VERDE el agotamiento nervioso. Equilibra emociones. Revitaliza el espíritu. Estimula a sentir compasión. NEGRO Silencio, elegancia, poder Paz. Silencio. Distante, intimidatorio. 4. Notas importantes sobre páginas Web: 6
- 7. INSTITUTO SUPERIOR TECNOLOGICO PUBLICO NUEVA ESPERANZA 1. El contenido es definitivamente el componente más importante de una página Web. 2. Los sitios se deben diseñar pensando en las necesidades de nuestros clientes, no en nuestros propios intereses. 3. Existe más de una metodología para diseñar Sitios Web. Investigue y seleccione la que Usted considere más conveniente de acuerdo a sus fines de negocio. 4. Es recomendable que las funciones especiales como búsquedas, chat en línea y foros de discusión sean implementadas en una segunda o tercera versión cuando el sitio esté ya produciendo un tráfico significativo. 5. Las páginas Web deben ser actualizadas al mismo ritmo de los cambios en su negocio. El mantenimiento de un sitio es una actividad muy fácil de ejecutar cuando existe un verdadero compromiso por parte del equipo de trabajo responsable. 6. Tenga especial cuidado con los sitios desarrollados en animación gráfica (formato tipo película), ya que el tiempo de acceso por lo general es mucho más lento, la información no es legible en algunos casos y esta técnica inhibe el posicionamiento en buscadores. 7. Quizá para Usted resulte atractivo, pero los clientes no desean esperar 5 minutos a que comience a rodar la película de su página Web. Ellos esperan ver la información a los pocos segundos de dar un clic sobre su dirección en Internet. 8. El diseño Web basado en marcos (frames) facilita el desarrollo del sitio, sin embargo en la actualidad no se recomienda ya su aplicación en el diseño de páginas Web de negocios por los problemas técnicos que ocasiona tanto en la operación como en el posicionamiento en buscadores. 9. Los sitios en construcción, siempre están en construcción. 10. Es muy conveniente que Usted esté registrado como dueño de su dominio. Esto le evitará enormes dificultades en un futuro. 11. El nombre de su dominio debe ser definido junto con un especialista, ya que esto tiene más relevancia y consecuencias de lo que Usted se puede imaginar. 12. Para generar más oportunidades de negocio a través de su página Web, es necesario producir el máximo tráfico posible. 13. Su Sitio Web competirá contra más de 5 mil millones de páginas, así es que si Usted está interesado en hacer negocios en Internet está obligado entonces a implementar un sitio diseñado profesionalmente. 7
- 8. INSTITUTO SUPERIOR TECNOLOGICO PUBLICO NUEVA ESPERANZA 14. Su página Web no necesita estar en 1000 motores de búsqueda, sólo en los 5 más importantes. 15. El posicionamiento en motores de búsqueda es complejo, laborioso y costoso, pero muy redituable en términos del retorno de inversión. 16. Muchas de las estrategias que siguen las empresas en su intento de posicionar su página Web terminan en fracaso porque no son efectivas. 17. Si su página Web no fue diseñada desde un principio con el objetivo de lograr posicionamiento en motores de búsqueda, es muy probable que tenga que ser rediseñada enteramente para lograr el posicionamiento que Usted desea. 18. Para saber qué tan efectiva es una página Web, no la evalúe en términos de cómo luce visualmente sino mas bien en cómo se desempeña al usarla. 19. El costo de una falla en el servicio de hospedaje y/o correo electrónico es mucho mayor que el costo anual del propio servicio, por lo mismo, es muy importante seleccionar una compañía que nos garantice un alto desempeño en sus comunicaciones y la continuidad en la operación. 20. Vender en línea es mucho más complejo que simplemente incorporar un carrito de compras a su página Web. 5. Consejos para diseñar páginas web 1. LO MAS SIMPLE. El poder de un buen diseño esta en su simplicidad. Defina la esencia. 2. SALGA DE SU MUNDO INTERIOR: COMUNÍQUESE. Aprenda a comunicarse y colaborar con todos los miembros de las profesiones web claves: programación, marketing, comerciales. 3. MENOS GLAMOUR Y MAS ORDEN. No se vea seducido por la forma en detrimento del contenido. Un diseño web comprometido con el contenido contribuye en mayor medida que uno que hace prevalecer las formas. 4. DISEÑE PARA CONEXIONES VÍA MODEM. La consideración estética mas importante a tener en cuenta es LA VELOCIDAD DE TRANSMISION. Si su trabajo tarda demasiado en bajar, deje todo de lado y vuelva al papel y al lápiz 5. TEXTOS. Cuando le toque diagramar textos, primero léalos. Piense en como alguien, con menos interés que el suyo, podría echarles un vistazo. Otra cosa que es de gran ayuda es el ancho de 8
- 9. INSTITUTO SUPERIOR TECNOLOGICO PUBLICO NUEVA ESPERANZA los textos. Mejor trate de que sus textos se mantengan en un ancho de 400 pixeles, o, al menos, un tercio de su pantalla. 6. MAS COLOR Y GRAFICOS, MENOS IMAGENES Y EFECTOS. El arte lineal, las formas vectoriales y el color plano ayudan a la velocidad de la web. Para ser más claros, si sus diseños usan más Freehand que Photoshop, es seguro de que su página cargará mucho mas rápido. 7. GRAFICOS Y TEXTOS: Nunca, jamás, inserte texto en un gráfico. El texto es texto. Los gráficos son gráficos. No los confunda. 8. ATRAIGA. Con las fluctuaciones en las conexiones a la web, su carácter de "lenta" y demás afectaciones, usted tiene 3 SEGUNDOS para convencer a un usuario de no usar el botón ATRAS del navegador. Entonces, ponga todos sus esfuerzos para que aquello que desea mostrar en una página web aparezca inmediatamente, y de forma interesante. 9. ENFÓQUESE EN LO QUE INTERESA. A los usuarios no les interesa en absoluto como funciona y se navega dentro de su sitio web, solo llegaron allí por el contenido. DÉSELOS en forma rápida y simple. 10.INFÓRMESE-APRENDA. Manténgase al tanto de las nuevas tecnologías. La web jamás se queda quieta, así que dedique su tiempo libre a aquello que es nuevo. 11.DEFINA SU PROBLEMA. El diseño trata sobre la resolución de problemas, sobre enfrentar una cuestión de comunicación con un objetivo. Defina cual es el suyo y ya tendrá la mitad del problema resuelto. 12. APRENDA LOS PRINCIPIOS DE NAVEGACION a) La gente odia esperar b) La gente odia hacer scroll (escribir en internet, escribir en campos, llenar fomularios, o contestar algunas preguntas) c) La gente odia leer d) La gente prefiere hacer scroll antes que esperar e) La gente prefiere esperar a leer. f) La gente no es necesariamente racional o coherente, pero a veces si. 9
- 10. INSTITUTO SUPERIOR TECNOLOGICO PUBLICO NUEVA ESPERANZA 13.BUSQUE INSPIRACION. Hable con gente que esta fuera de su campo de acción. Los arquitectos, por ejemplo, pueden darle una perspectiva completamente nueva del diseño web, quizá pueden cambiar su forma de imaginar como se conceptualiza un sitio, transformando las paginas web en "espacios web" 10