DISEÑO WEB Msc. Ramiro Gareca.

Presentación del tema: "DISEÑO WEB Msc. Ramiro Gareca."— Transcripción de la presentación:

1 DISEÑO WEB Msc. Ramiro Gareca

2 ¿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.

3 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.

4 PAGINA WEB ESTATICA Las 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.

5

6 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.

7

8 DISEÑO EN PHP PHP 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+.

9 DISEÑO EN HTML HTML, 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.

10 ¿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.

11

12 Principio Un buen diseño gráfico busca el equilibrio óptimo entre la sensación visual y la información textual o gráfica. 

13 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

14 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.

15 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.

16 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.

17 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:

18 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.

19 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.  

20 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.. 

21 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.

22 La estructura de una dirección URL, se compone de tres partes:
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: Metodo de Acceso Dirección del ordenador Es opcional

23 Dominios y su registro DX GUIA DE DISENO WEB - diseño eXperimental 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.

24 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.

25 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.

26 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.

27 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.

28 Etapas del Proyecto Análisis Elección de solución Ejecución
18/04/2017 Etapas del Proyecto Análisis Elección de solución Ejecución Mantenimiento El proceso consiste (o sería bueno que consistiera) en estas etapas, que se analizarán a fondo a lo largo de esta presentación.

29 Análisis Del sitio web 18/04/2017 Ventajas Internet.
Alcance potencialmente global. Sistema de información. Desventajas Hosting. Mantenimiento. Capacitación. Riesgos de seguridad.

30 Soluciones disponibles
18/04/2017 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.

31 Estructura tecnológica
18/04/2017 Del lado del Servidor Sistema Operativo Software servidor Lenguaje Del lado del Cliente HTML/XML/CSS/JavaScript Navegadores: Vista final Ambos Hardware -> Sistema Operativo -> Servidor -> DBMS (Sistema Gestor de Bases de Datos). ->Lenguaje -> HTML Solución a la medida Linux/Unix/MacOS/Windows Apache/Tomcat/CGI PHP/JSP/ASP/Ruby/Perl/Python/C/C++ CMS Drupal Joomla! Wordpress Moodle

32 Hosting

33 Arquitectura de alto nivel

34 Arquitectura de alto nivel
Preescolar EGB Polimodal Terciarios Directivos Profesional Introd. (Descripc.) Contenidos Página Ppal. Buscador Nav. p/tema Nav. juegos Nav. p/curso Buscar o Navegar Discusiones o Comentarios Chats Comentarios Foros Noticias

35 Descripciones de páginas
Página EGB Alumnos Tests Vocacionales Cursos Librería Docentes Librerías Búsquedas Búsquedas avanzadas Recorrido del sitio Por tema Por curso Juegos Salas de reunión Comentarios Chats Foros

36 Diagramas detallados de la arquitectura
Tests Vocac. Tema Materias Clase Ejerc. Cursos Alumnos Recreo Juegos Librería Torneos Docentes Tema Cursos Clase Materias Ejerc. Buscar o Navegar EGB Recreo Juegos Discusiones o Comentarios Elab. Guias Prácticas Tareas admi-nistrativas

37 Diseño de WWW Conocer a los usuarios Usuarios de la Web en general
GVU Survey of WWW users ( Usuarios del sitio particular ej. Usuarios del sitio de Sun ( 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%

38 Criterios de diseño de WWW
Criterios locales Layout Navegación Links Gráficos Calidad Subjetividad Criterios globales

39 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

40 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

41 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árrafo 10 % (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

42 Criterios de diseño de WWW
Criterios locales: navegación Links inadecuados En lo posible debe evitarse la presencia de links tales como “volver”, “regresar”, “adelante”, “atrás” El texto debe ser más significativo La 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

43 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ápida Hasta 3/4 palabras Link “click here” No proporciona información acerca de la página destino

44 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ágina Mayor cantidad de imágenes producen mayor tiempo de descarga La Home Page puede tener una mayor cantidad de imágenes

45 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 final El usuario puede leer el texto mientras se carga la página

46 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ón Nunca se conoce de donde proceden los visitantes Dirección del sitio al cual pertenece la página Similar al criterio anterior: Desorientación Desconocimiento del origen de los visitantes

47 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

48 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

49 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

50 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)

51 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 actual Evitar desorientación

52 NAVEGADORES Interpreta el código HTML de la página.
Internet Explorer y Netscape Navigator

53 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.

54 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

55 Colores en 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

56 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”

57 La pagina resultante es como sigue:

58 TEXTO Algunos caracteres especiales Se requiere dar formato al texto
< y > indican inicio y fin de etiqueta Carácter Representación < > á á Á Á é é É É í í Í Í ó ó Ó Ó ú ú Ú Ú ñ ñ Ñ Ñ ™ ™ Algunos caracteres especiales Se puede escribir directamente sin la representación en HTML &nbsp espacio en blanco

59 algunos atributos de la regla horizontal:
Significado Posibles valores align alineación de la regla dentro de la página left (izquierda) right (derecha) center (centro) width ancho de la regla un número, acompañado de % cuando se desee que sea en porcentaje size alto de la regla un número noshade eliminar el sombreado de la regla no puede tomar valores Inicio<hr align="left" width=“50%" size=“10" noshade>Bienvenidos a mi página.

60 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.

61

62

63

64