Este documento presenta una unidad didáctica sobre diseño web. Explica conceptos básicos como páginas web, sitios web, HTML, hipervínculos, servidores, dominios, entre otros. Describe las etapas del diseño web como el diseño visual, la estructura jerárquica y el posicionamiento en buscadores. Finalmente, destaca la importancia de seguir estándares y requisitos de accesibilidad web.

1. UNIDAD DIDÁCTICA :
DISEÑO WEB.
SESIÓN APRENDIZAJE (SEMANA N° 01):
INTRODUCCIÓN DISEÑO WEB.
2022
INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICOS PÚBLICO-RE
CUAY
REVALIDADO CON R. D. N° 236-2005
PROGRAMA DE ESTUDIOS
COMPUTACIÓN E INFORMÁTICA
Docente: Mg. Ing. Percy Saenz Joaquin

2. Agenda Style
Introducción
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?

3. Agenda Style
Introducción
¿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

4. 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 de
programación 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
INTRODUCCIÓN

5. 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
INTRODUCCIÓN

6. 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
INTRODUCCIÓN

7. 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
INTRODUCCIÓN

8. 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
INTRODUCCIÓN

9. Agenda Style
Erames (marcos): Areas rectangulares que subdividen las
ventanas de algunas páginas Web, cada una de las cuales contiene un
documento de hipertexto independiente de los demás.
Webmaster: Es el encargado de crear, diseñar, estructurar,
maquetar, publicar, promocionar y mantener un sitio web.
Conceptos Básicos
INTRODUCCIÓN

10. 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
INTRODUCCIÓN

11. 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
INTRODUCCIÓN

12. Agenda Style
Introducción
Es un área enfocada a planificar, diseñar, mantener y crear interfaces
digitales, por lo que se refiere al proceso del diseño de sitios y páginas
web.
En este caso, los diseñadores web crean las páginas utilizando
lenguajes de marcado como HTML o XML.
Por otro lado, la parte visual de los sitios está a cargo del CSS, término
utilizado para estilizar los elementos escritos en HTML.
Por lo tanto, es común que los diseñadores web utilicen ambos para
construir un site porque juntos definirán cómo aparecerán las páginas
en los navegadores.
¿Qué es el diseño web?

13. Agenda Style
Historia
En un principio era sólo texto, pero a medida que ha evolucionado la
tecnología, tanto los ordenadores como las redes de
telecomunicaciones, se ha generado nuevas formas de desarrollar a
web.
La inclusión de imágenes fue la más significativa, pero también
debemos mencionar el vídeo y la animación, o los espacios lo que
aporta valores estilísticos, de diseño y de interactividad jamás
imaginados antes.
Diseño web
Diseño
web

14. Agenda Style
Historia
El diseño de páginas web se ha desarrollado a medida que ha
evolucionado Internet. En 1 992 sólo había alrededor de 50 sitios web.
Estadísticas (2005) nos afirmaban que la cantidad de sitios web ronda
los 8.000 millones de sitios, a los que diariamente se les suma a raíz
de 4400 por día
Diseño web
Diseño
web

15. 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
Diseño
web

16. 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
Diseño
web

17. Agenda Style
3. 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
Diseño
web

18. 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
Diseño
web

19. 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
Diseño
web
Referencia: Universidad Cuahutémoc