DISEÑO WEBDISEÑO WEBDISEÑO WEBDISEÑO WEB

DISEÑO WEB

1. ARTE Y DISEÑO DISEÑO WEB Sesión 1 Tema : FUNDAMENTOS DEL DISEÑO WEB

2. Resultado de aprendizaje Identifica los fundamentos del diseño web. Aplicas las herramientas básicas del HTML5 para crear sus primeras paginas web Evidencia de aprendizaje Muestra una pagina web con textos e imagenes Escuela de Arte y Diseño Gráfico Empresarial

3. Revisa el siguiente video: Escuela de Arte y Diseño Gráfico Empresarial

4. Agenda Style Web es una palabra inglesa que significa red o telaraña. Se designa como ‘la web’ al sistema de gestión de información más popular para la trasmisión de datos a través de internet. La web es el diminutivo de world wide web o www cuyas tecnologías para su funcionamiento (HTML, URL, HTTP) fueron desarrolladas en el año 1990 por Tim Berners Lee. Para usar la web es necesario tener acceso a internet y un navegador web, ¿Qué es la Web? Escuela de Arte y Diseño Gráfico Empresarial Diseño Web – Sesión 1

5. Agenda Style ¿Qué es una página web? Es un medio digital para promover productos, servicios o información de interés, se consultan a través de una computadora, tableta o Smartphone. ¿Qué es un sitio web? Es un conjunto de páginas web almacenadas en un servidor, interrelacionadas entre sí y casi siempre identificadas con un mismo nombre de dominio. Si nos imaginamos Internet como una biblioteca gigante, cada sitio web sería un libro, compuesto por varias páginas. Conceptos Básicos Escuela de Arte y Diseño Gráfico Empresarial Diseño Web – Sesión 1

6. Agenda Style ¿Qué es el html ? Son las siglas en inglés de HyperText Markup Lenguage , que significa Lenguaje de Marcado de HiperTexto . Se llama así al lenguaje empleado en la elaboración de páginas Web. Hipervínculo : Al hipervínculo se le suele llamar "enlace web" o en su versión anglosajona "link". Un hipervínculo es una conexión de una página a otro destino como, por ejemplo, otra página o una ubicación diferente en la misma página. Conceptos Básicos Escuela de Arte y Diseño Gráfico Empresarial Diseño Web – Sesión 1

7. Agenda Style Lenguaje de programación: Lenguaje con el que está desarrollada una página web. Editor: Programa utilizado para crear páginas web sin la necesidad de tener que aprender el lenguaje. Conceptos Básicos Escuela de Arte y Diseño Gráfico Empresarial Diseño Web – Sesión 1

8. Agenda Style Servidor: Máquina conectada a Internet que entre otros servicios ofrece albergue para páginas web haciendo que estén accesibles desde cualquier punto de Internet. Cliente FTP: Programa que permite conectarse al servidor para publicar páginas web. Conceptos Básicos Escuela de Arte y Diseño Gráfico Empresarial Diseño Web – Sesión 1

9. Agenda Style Hosting: Es un servicio de alojamiento en línea que te permite publicar un sitio o aplicación web en Internet. Hospedaje web. Dominio: Dirección web asociada a una página web. Conceptos Básicos Escuela de Arte y Diseño Gráfico Empresarial Diseño Web – Sesión 1

10. Agenda Style ISP: En el ámbito del desarrollo de sitios web, se puede decir que un ISP es un proveedor de servicios para web. (Internet service provider ) URL: Cadena que proporciona la dirección de Internet de un sitio Web o un recurso del World Wide Web, junto con el protocolo mediante el cual se tiene acceso al sitio o al recurso. ( Uniform Resource Locator ) Applets: Programas desarrollados con Java para mejorar la presentación de las páginas Web que realizan animaciones, juegos e Interacción con el usuario. Conceptos Básicos Escuela de Arte y Diseño Gráfico Empresarial Diseño Web – Sesión 1

11. Agenda Style Webmaster : Es el encargado de crear, diseñar, estructurar, maquetar, publicar, promocionar y mantener un sitio web. Conceptos Básicos Escuela de Arte y Diseño Gráfico Empresarial Diseño Web – Sesión 1

12. Agenda Style Tablas: Elemento fundamental para la maquetación y distribución de contenidos de una página web. Banner: Elemento gráfico con forma rectangular, normalmente animado, cuyo contenido es publicidad. Conceptos Básicos Escuela de Arte y Diseño Gráfico Empresarial Diseño Web – Sesión 1

13. Agenda Style Imagen: Archivo gráfico que se puede insertar en una página Web y mostrar en un explorador de Web. Propiedades: Características de un elemento del Web actual, como el título y la dirección URL de un Web o el nombre y el valor inicial de un campo de formulario. Conceptos Básicos Escuela de Arte y Diseño Gráfico Empresarial Diseño Web – Sesión 1

14. Agenda Style Para el diseño de páginas web debemos tener en cuenta tres etapas: 1 . El diseño visual de la información que se desea editar. En esta etapa se trabaja distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes. Es importante que antes de trabajar sobre el computador se realice un boceto o pre-diseño sobre el papel. Esto facilitará tener un orden claro sobre el diseño. Etapas Escuela de Arte y Diseño Gráfico Empresarial Diseño Web – Sesión 1

15. Agenda Style 2. Estructura y relación jerárquica de las páginas del sitio web. Una vez que se tiene el boceto se pasa a 'escribir' la página web. Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje de marcación de hipertexto o HTML. Los enlaces que aparecen subrayados en este documento y otros de Wil < ipedja son ejemplos de hipertexto, puesto que al pulsar sobre ellos conducen a otras paginas con información relacionada. La importancia de la estructura y arborescencia web radica en que los visitantes no siempre entran por la página principal o inicial y en ese caso el sitio debe darle la respuesta a lo que busca rápido, además permitirle navegar por el sitio. Etapas Escuela de Arte y Diseño Gráfico Empresarial Diseño Web – Sesión 1

16. Agenda Style Posicionamiento en buscadores o SEO. Ésta consiste en optimizar la estructura del contenido para mejorar la posición en que aparece la página en determinada búsqueda. Etapa no gustosa por los diseñadores gráficos, porque a diferencia del texto, no se pueden tener nuevos resultados en los buscadores con sitios muy gráficos. Etapas Escuela de Arte y Diseño Gráfico Empresarial Diseño Web – Sesión 1

17. Agenda Style Un correcto diseño web implica conocer cómo se deben utilizar cada uno de los elementos permitidos en el HTML, es decir, hacer un uso correcto de este lenguaje dentro de los estándares establecidos Debido a la permisibilidad de algunos navegadores web como Internet Explorer, esta premisa original se ha perdido. Por ejemplo, este navegador permite que no sea necesario cerrar las etiquetas del marcado, utiliza código propietario, etc. Esto impide que ese documento web sea universal e independiente del medio que se utilice para ser mostrado. Fundamentos Escuela de Arte y Diseño Gráfico Empresarial Diseño Web – Sesión 1

18. Agenda Style El diseño web debe seguir unos requerimientos mínimos de accesibilidad web que haga que sus sitios web o aplicaciones puedan ser visitados por el mayor número de personas. Accesibilidad Escuela de Arte y Diseño Gráfico Empresarial Diseño Web – Sesión 1