fdw clase1 2010-i

Facultad de Ingeniería y ArquitecturaFundamentos de Diseño Web (FDW)

2010 - I

Contenido:

Objetivos:

SEMANA 1

• Introducción a WWW y Diseño Web. Herramientas de Comunicación en Internet. Puntos para definir nuestra Web. Análisis del Sitio Web. Introducción al Diseño Web. Elementos de un Website. Tipos de lenguajes. Herramientas para la creación de Webs.

Fundamentos de Diseño Web

• Brindar los conocimientos teóricos y prácticos orientados al proyecto, diseño y desarrollo de sitios web.

Específicos• Conocer los conceptos básicos de Internet.• Conocer los medios de comunicación en internet.• Conocer las limitaciones web, fundamentos y herramientas del diseño web.• Dar a conocer los tipos de lenguajes empleados para la creación de páginas y

aplicaciones web. • Brindar los criterios para la planificación de Sitios Web.

TEMA:

Introducción a WWW y Diseño Web.


Historia del Internet


Ya finalizando la década del 50, el Departamento de Defensa de los Estados Unidos comenzó a preocuparse por lo que podría ocurrir con el sistema de comunicación nacional si se desataba una guerra nuclear ya que una de las armas más importantes en una guerra son las comunicaciones y es uno de los primeros objetivos que el enemigo intentaría destruir.

• 1969 En respuesta a este hecho, Estados Unidos crea el ARPA (Organismo de Proyectos de Investigación Avanzada).

• Crece la red interconectando varias Universidades americanas.• Ray Tomlison, en 1971, crea un programa capaz de enviar mensajes entre

ordenadores (e-mail).• 1982 el protocolo TCP-IP fue adoptado como estándar en las

comunicaciones de Internet y se utiliza por 1ra. vez el término Internet.• 1980-85 Se desarrolla el Sistema de Denominación de Dominios (Domain

Name System) .• 1992 nace la World Wide Web como sistema de intercambio de información.• 1993 se crea el primer web browser.

Historia del Internet


• 1994 se difunde la versión comercial del navegador Netscape Navigator.• Centros comerciales y empresas comercializan sus productos en Internet:

Pizza Hut, Ciberbanco, Amazon.• Nace el buscador Yahoo.

Internet en el Perú

Internet llegó al Perú en 1991. Ha transcurrido más de una década de experiencias, anécdotas y descubrimientos fascinantes. En este tiempo, hemos utilizado la red de redes para buscar información, entretenernos, y en especial, para comunicarnos.

Internet


Conjunto de computadoras conectados en una red de redes mundial, que comparten un mismo protocolo de comunicación, y que prestan servicio a los ordenadores que se conectan a esa red.

El territorio operativo de Internet es el ciberespacio y esta generosamente abierto a todos los que deseen participar dentro de él, Tanto pequeños protagonistas o grandes corporaciones.

Internet hace posible una comunicación más sencilla, más rápida y más económica.


¿Qué necesito para navegar en Internet?

– Una PC conectada a Internet.– Un Navegador o Browser– Conocer las direcciones Web

(URL) que deseo visitar.


¿Qué es un Browser?

• Un Browser es un programa que va a permitir cargar las páginas web´s para visualizarlas y poder navegar por Internet, también son llamados Navegadores.

• Entre los más utilizados están Internet Explorer, (IE) y Chrome.


¿Qué es un Dominio?El dominio es la dirección URL, que apunta al servidor Web.

Nombres de dominio

Los dominios de nivel superior:

Territoriales: .es, .peGenéricos:.edu – sites educacionales.com – sites comerciales.gob – sites gubernamentales.mil - sites militares.net - sites de administración de red.org – organizaciónes sin ánimo de lucro Los criterios para nombrar ordenadores son flexibles, sólo se exige que al finalesté un dominio de nivel superior. Ejm: www.usmp.edu.pe


¿Qué es un Servidor Web?

• Un servidor Web es un ordenador que se encuentra encendido las 24 horas del día y conectado a Internet.

• En el caso de una página Web, los servidores son los encargados de mandarla cuando se la solicita.

• Nuestras páginas tienen que estar alojadas en un servidor Web para que puedan estar accesibles desde Internet.

• Puede ser gratuito o pagado.– Pagado: http://peruhost.com/– Gratuito: http://www.000webhost.com


World Wide Web (WWW)

La WWW puede definirse básicamente como tres cosas:• Hipertexto, que es un sistema de enlaces que permite saltar de una

página a otra.• Multimedia, que hace referencia al tipo de contenidos que puede

manejar (texto, gráficos, vídeo, sonido y otros). • Internet, la base sobre la que se transmite la información.

El aspecto exterior de la WWW son las conocidas "páginas Web".


Sitio Web

Un sitio web es un conjunto de páginas Web relacionadas a través de una estructura de navegación, con el objetivo de hacer pública y universalmente accesible una cierta cantidad de información. Para alcanzar dicho objetivo, los sitios deben concebirse con un criterio arquitectónico y construirse desde los cimientos, con una visión sistémica y una lógica adecuada a su función específica. La unidad de información de la web es un documento (archivo) llamado página Web.


Página Web

Una página web, también conocida como página de Internet, es un documento adaptado para la Web y normalmente forma parte de un sitio web. Su principal característica son los hiperenlaces a otras páginas web, siendo esto el fundamento de la Web. Una página está compuesta principalmente por información (sólo texto o multimedia) e hiperenlaces; además puede contener o asociar datos de estilo para especificar cómo debe visualizarse o aplicaciones incrustadas para hacerla interactiva.


La World Wide Web se llama también en la

Web, WWW o w3

La World Wide Web es parte de la Internet. En la Web consiste en una

enorme colección de documentos de almacenados en la computadora en

todo el mundo

Un sitio Web es una colección de páginas Web en una

computador central, de una universidad, organismo

público, empresa o persona

Un Web Server es una computadora conectado a Internet que hace que las páginas Web estén a disposición del mundo

Una página Web es un documento de la Web. Páginas Web pueden incluir texto, imágenes y sonido de vídeo


W3C

El World Wide Web Consortium, abreviado W3C, es un consorcio internacional que produce recomendaciones para la World Wide Web y establece directivas con la intención de normalizar el diseño para facilitar y simplificar la visualización e interpretación del contenido. Está dirigida por Tim Berners-Lee, el creador original de URL (Uniform Resource Locator, Localizador Uniforme de Recursos), HTTP (HyperText Transfer Protocol, Protocolo de Transferencia de HiperTexto) y HTML (Lenguaje de Marcado de HiperTexto) que son las principales tecnologías sobre las que se basa la Web.

Herramientas de Comunicación en Internet


1. Sitio Web.2. Correo electrónico y boletines electrónicos.3. Buscadores4. Marketing viral.

1. Sitio Web


• El Sitio Web es un elemento muy importante dentro del desarrollo de la empresa en Internet. Por ello, su desarrollo no es una tarea trivial debido a que cada vez los usuarios de la Web son más exigentes.

• El tiempo del usuario es el elemento crítico: los usuarios no dan una segunda oportunidad.

Según un estudio de K&R, como media, tras hacer 5 clicks y no encontrar la información que buscaban, los usuarios se sienten frustrados y en ese caso, un 83% se va a otro sitio Web.


Según IFOCCOM las razones por las que un usuario abandona un site es:

2. Correo electrónico y boletines electrónicos


Las ventajas del correo electrónico en acciones de comunicación son las siguientes:

• Bajo coste, prácticamente nulo. Además, a diferencia de prácticamente todas las herramientas de comunicación, el costo no es proporcional al número de envíos. Prácticamente el costo es el mismo para enviar 10 unidades que para enviar 100.000 unidades.

• Marketing directo a segmentos definidos: Uniendo la inteligencia de clientes con el correo electrónico, se pueden hacer llegar ofertas concretas para segmentos determinados muy ajustadas a sus características y expectativas.

• Seguimiento exacto y en tiempo real de los resultados de las acciones pudiendo hacer test.

2. Correo electrónico y boletines electrónicos


El boletín electrónico es una herramienta de la estrategia de marketing relacional y por tanto, de generación de negocio. Las características que debería tener el boletín electrónico son: • Gratuito ya que su objetivo es la fidelización de clientes y por tanto ha

de ser un valor añadido. • Contenidos útiles para los suscriptores. • Periódico.

3. Buscadores


El posicionamiento en buscadores es la herramienta menos conocida y más interesante para la adquisición de visitantes a los sitios Web. En la situación actual en la que hay billones de páginas web en Internet, los buscadores y directorios son los únicos medios que permiten al usuario encontrar el servicio o información que buscan. Sin los buscadores y directorios, sería virtualmente imposible encontrar la información en Internet. Son la "puerta de entrada" del usuario a Internet y es el canal por el que los usuarios buscan nuevos sitios.

4. Marketing Viral


El marketing viral consiste en fenómenos en los que se busca expandir un mensaje de forma en la que cada persona que lo recibe, lo transmite a su vez a x personas más y así sucesivamente se produce una comunicación que se extiende de forma piramidal.

Puntos para definir nuestra web


1 ¿Por qué la creación de una página Web favorece mis emprendimientos?

Estar presente en la Web equivale a tener un espacio para decir lo que usted es, lo que piensa, lo que hace, a una audiencia casi incalculable. La historia de Internet reúne relatos acerca de éxitos inmediatos, crecimientos vertiginosos y reconocimientos de alcances inusitados para aquellos que publicaron sus páginas en la Red de redes.

La Web es la herramienta privilegiada en Internet, debido a la posibilidad que ofrece de mostrar, vender, anunciar, cualquier cosa, durante las 24 horas, los 365 días del año, pudiendo acceder a la misma desde cualquier lugar del mundo al costo de una llamada local.

Ninguna herramienta hasta el presente ha logrado, a tan bajo costo, estos objetivos.



2 Algunas recomendaciones para organizar y realizar su Web con más comodidad.

Cuando usted se propone estar en la Web, debe encarar el diseño de un sitio.

Es decir, crear documentos o archivos que se encuentran relacionados entre sí.

Aunque tenga propósitos concretos y haya pensado exponerlos en sus páginas de manera más o menos agradable y clara, será conveniente que evalúe otros elementos que son ineludibles al construir un sitio. Por eso bien vale la pena que se detenga unos minutos para considerar algunas ideas claves que facilitarán su posterior realización.



3 Lo que tenemos que tener en cuenta con la creación de un sitio Web

• Defina el propósito del sitio (objetivo). • Establesca el alcance de su sitio. • Piense en la estructura del sitio. • Cree las página o documentos. • Personalice el sitio. • Organice el material.• Cree espacios interactivos.• El toque final.

Análisis del Sitio Web


¿Cuántas empresas están obteniendo resultados con su Web?



1. ¿El sitio Web está desarrollado pensando en el usuario?El sitio web ha de tener contenidos interesantes gratuitos para los potenciales usuarios. Si el sitio web simplemente tiene la información corporativa y una tienda, difícilmente se conseguirá fidelizar a los usuarios.

2. ¿Tiene una serie de indicadores (cuantos visitantes) y objetivos para su sitio Web?Indicadores como el número de páginas vistas, el ratio de conversión, el número de usuarios únicos, la duración de las visitas, etc. Son parámetros que deberían ser controlados teniendo objetivos para ellos. Con las sucesivas comparaciones y evolución de estos parámetros se podrán tomar decisiones que afecten a cada uno de ellos.

3. ¿Tiene su sitio Web más de 40 Kb en alguna página? El tiempo de carga es un elemento crítico como ya ha sido comentado.

Si su sitio web tiene páginas de más de 40Kb tiene un serio problema. La solución es rediseñar esas páginas.



4. ¿Está creando una lista de correo pidiéndole a sus visitantes su correo electrónico?Como se ha comentado en el área de correo electrónico, es muy importante crear un boletín electrónico a partir de los usuarios del Sitio Web.

5. ¿Tiene su propio nombre de dominio y es de fácil recuerdo?Es sencillo, el nombre de dominio es la dirección de su empresa en Internet y cuanto más fácil sea asociarlo a su nombre, mejores resultados obtendrá.

6. ¿Invita a los usuarios a que se comuniquen con usted (INTERACTIVO) para contactos comerciales, sugerencias, comentar alguna información, artículos, novedades, etc.?Se debe aprovechar la interactividad del medio dando todas las posibilidades: correo electrónico, correo, teléfono, fax, etc. Esta información de contacto debe estar en todas las páginas de una manera clara.



7. ¿Abusa del flash?El uso de flash es muy "goloso“ pero es muy fácil hacerlo mal debido a los tiempos de carga y a los problemas de navegación. Sólo está justificado para casos muy concretos.

8. ¿Emplea una solución escalable?Es importante que se haya planteado que la solución tecnológica que emplee, pueda crecer a medida que crezcan los requerimientos de los clientes en cuanto a visitas, información descargada, ancho de banda necesario, etc.

9. ¿Se ha planteado quién y cómo va a hacer el mantenimiento del sitio Web?Es usual hacer sitios web con muchos contenidos y valor añadido y luego dejarlos en un cajón porque no se les ha dado la continuidad necesaria. Un proyecto ambicioso requiere de recursos tras su lanzamiento.



10 ¿Es coherente el Sitio Web con el resto de acciones de comunicación desarrolladas en otros medios?El Sitio Web debe tener los mismos objetivos de comunicación que el resto de acciones, aspecto que muchas veces no se cumple debido a que el Sitio Web no es supervisado por los coordinadores de marketing.

11. ¿Analiza el comportamiento de sus usuarios en la Web?Si no conoce cuántos visitantes tiene su Sitio Web, ni cómo se comportan, ni cuál es la duración de su visita, cuántas páginas ven, etc. Está desperdiciando una de las posibilidades más importantes de Internet.

12. Está claramente definido en cada una de sus páginas cuál es la misión de su empresa?Los usuarios no siempre sabrán a qué se dedica. Tenga en cuenta que sólo un 40% de sus usuarios harán el esfuerzo de ir a ver el texto que se encuentra debajo de la pantalla que están viendo. Deje claro desde un principio quién es, qué hace y qué ofrece.



13. ¿Es su sitio Web fácil de usar y aprender a navegar en él?Piense en sus usuarios. Pregúnteles. Piense "¿encuentran fácilmente lo que buscan?", "¿tienen dificultades de navegación?“

14. ¿Tiene su sitio Web un "toque" de humanidad?A los usuarios les gusta comunicarse con personas, no con máquinas. Por ello, unas fotos del equipo, un mensaje del presidente, fotos de las personas en el organigrama, etc. Son elementos interesantes.

15. ¿Son claros sus contenidos (en tamaño, estructura y mensaje)?Los dos consejos para los contenidos en la web son: ser claros en cuanto a redacción y breves, ya que los textos largos no son leídos. Si es necesario, se pueden emplear enlaces para ampliar los conceptos.



16. ¿Tiene un diseño sencillo?Como ya ha sido comentado, en muchos sitios se emplean diseños complejos pero poco funcionales.Los sitios de más éxito en Internet tienen sencillos diseños (como por ejemplo Yahoo!).

17. ¿Ha definido el proceso deseado del usuario a través del sitio Web?Todos los sitios web tienen distintos objetivos: aportar información a los clientes, suscripción a un boletín electrónico, venta, etc. Para conseguir estos objetivos, los usuarios deben comportarse de una determinada manera y el sitio web ha de ser definido para ello.Esto significa también que los contenidos deben ser realizados para incitar al usuario a la acción.Realmente este test es sólo un comienzo, pero si tiene fallos en más de 3 de estos aspectos, no dude en solucionarlos lo antes posible. Está perdiendo oportunidades de negocio.

Introducción al Diseño Web


El Diseño Web va más allá del diseño tradicional pues existen muchos limitadores relacionados con el medio donde se presentan las páginas: Internet.

El diseño gráfico de una página Web es tan solo una parte del diseño de la misma, ya que, además, hay que considerar un conjunto más o menos extenso de condicionantes que van a limitar la libre creatividad del diseñador.

En primer lugar, las páginas Web se deben descargar de un servidor Web remoto por medio de Internet, por lo que el ancho de banda de las conexiones de los usuarios va a ser un factor clave en la velocidad de visualización. La mayoría de los usuarios se conectan todavía a Internet con un módem, con velocidades teóricas que oscilan entre 1 Mbps a 10 Mbps.



Otro aspecto a tener en cuenta es que las páginas Web son visualizadas en unas aplicaciones específicas, los navegadores Web, que imponen grandes limitaciones al diseño de las mismas.

Los navegadores existentes en el mercado tienen una forma particular de presentar el contenido de las páginas. Internet Explorer interpreta en muchas ocasiones una página Web de forma muy diferente a Netscape Navigator.

La importancia de la resolución de pantalla sobre la forma de ser visualizadas las páginas Web en la ventana del navegador es muy importante. A mayor resolución se dispone de más puntos de información para presentar los elementos en pantalla, pero estos puntos son más pequeños, con lo que los elementos de la interfaz (textos, imágenes, objetos de formulario, etc.) se ven más pequeños.



Pagina base 800x600 Ventajas y desventajas

¿Porcentajes?

1024 x 768

800 x 600

Ejemplos• http://www.usmp.edu.pe/• http://www.ibm.com/pe/• http://www.hotmail.com/• http://www.yahoo.com/• http://www.pclandia.net/linuxcom

paq/

168

224 Las paginas se construyen con una resolución base, la mas usada en la actualidad

es 800x600. No es frecuente encontrar páginas con anchuras en %, con lo que se consigue que

al ser visualizadas en monitores de más resolución se “abran”, ocupando todo el

espacio de pantalla disponible.

http://www.usmp.edu.pe/

http://www.ibm.com/pe/

http://www.hotmail.com/

http://www.yahoo.com/

http://www.pclandia.net/linuxcompaq/

http://www.pclandia.net/linuxcompaq/



A esto hay que sumar que las páginas diseñadas deben luego construirse en un lenguaje específico, el HTML, que por sí mismo es muy limitado, lo que hace que el diseñador Web tenga que estar siempre pensando si la interface que está diseñando gráficamente va a poder ser luego construida.

Por último, una página Web suele ocultar, en la mayoría de los casos, una serie de procesos complejos que se ejecutan sin que el usuario sea consciente de ellos (ejecución de códigos de lenguajes de programación tanto en cliente como en servidor, acceso a bases de datos en servidores remotos, etc.), procesos que añaden tiempo a la presentación de las páginas y que muchas veces suelen afectar de forma importante al diseño de estas, ya que el diseñador no sabe de antemano qué contenidos concretos van a tener.

Resumiendo: El diseño Web va más allá del diseño gráfico, al influir en él multitud de factores que limitan las posibilidades del diseño, pero también otros que añaden interactividad y funcionalidades a una página Web que no tiene un cartel, folleto o revista.

Elementos de un Web Site


1. Anticipación, el sitio Web debe anticiparse a las necesidades del usuario.

2. Autonomía, los usuarios deben tener el control sobre el sitio Web.

3. Los colores han de utilizarse con precaución para no dificultar el acceso a los usuarios.

4. Consistencia, las aplicaciones deben ser consistentes con las expectativas de los usuarios, es decir, con su aprendizaje previo.

5. Eficiencia, los sitios Web se deben centrar en la productividad del usuario, no en la del propio sitio Web.

6. Reversibilidad, un sitio Web ha de permitir deshacer las acciones realizadas.



7. Ley de Fitts indica que el tiempo para alcanzar un objetivo con el ratón esta en función de la distancia y el tamaño del objetivo. A menor distancia y mayor tamaño más facilidad para usar un mecanismo de interacción.

8. Reducción del tiempo. Optimizar el tiempo de espera del usuario, informando del tiempo pendiente para la finalización de la tarea.

9. Aprendizaje, los sitios Web deben requerir un mínimo proceso de aprendizaje.

10. El uso adecuado de metáforas facilita el aprendizaje de un sitio Web, pero un uso inadecuado de estas puede dificultar enormemente el aprendizaje.



11. La protección del trabajo de los usuarios es prioritario, se debe asegurar que los usuarios nunca pierden su trabajo como consecuencia de un error.

12. Legibilidad, el color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser suficientemente grande.

13. Seguimiento de las acciones del usuario. Conociendo y almacenando información sobre su comportamiento.

14. Interfaz visible. Se deben evitar elementos invisibles de navegación que han de ser inferidos por los usuarios, menús desplegables, indicaciones ocultas, etc.

Tipos de Lenguajes


• Lenguajes de Lado servidor: Es aquel lenguaje cuyas sentencias se ejecutan en el servidor Web, el resultado de esta programación es enviado al browser del navegante.

Entre estos tenemos:– PHP– ASP (Active Server Pages)– ASP.NET– PERL JSP (Java Server Pages)

Estos lenguajes son usados generalmente para programar manejo de sesiones, manejo de base de datos, etc.

Tipos de Lenguajes


• Lenguaje del lado cliente: Son los lenguajes que se ejecutan en el browser del navegante (cliente), usados para el manejo de eventos, entre estos tenemos: Javascript: VBScript:

Tipos de Lenguajes


Herramientas para la Creación de Webs


Dreamweaver. Editor de páginas Web Fireworks. Programa que crea, edita y optimiza imágenes Flash. Programa para el diseño de animaciones Web basados en vectores. Adobe Photoshop. Aplicación especializada en la composición de fotografías

e imágenes digitales. Flax. Programa muy útil para crea animaciones de texto. Swish. Programa para hacer animaciones, muy sencillo y fácil de usar. Frontpage. Editor de páginas Web de Microsoft. Adobe Illustrator. Programa de diseño vectorial con él se pueden crear y

diseñar logotipos, anuncios, ilustraciones para libros, revistas o páginas web. CorelDraw. Es una aplicación completa de diseño gráfico que facilita la

creación de trabajos gráficos profesionales. Xara. Es un software de dibujo e ilustración rápido y con interesantes

funcionalidades. Puede sustituir a Corel o IIlustrator.


PREGUNTAS

¿?

fdw clase1 2010-i

Education