Diseño WEB I

INTRODUCCIÓN AL DISEÑO WEB

El diseño web es una actividad que consiste en la planificación, diseño, implementación y mantenimiento de
sitios web. Abarca diferentes aspectos como el diseño gráfico web, diseño de interfaz y la experiencia de usuario,
además de la navegabilidad, interactividad, usabilidad, arquitectura de la información e interacción de medios, entre
los que podemos mencionar audio, texto, imagen, enlaces, video y la optimización de motores de búsqueda. A
menudo muchas personas trabajan en equipos que cubren los diferentes aspectos del proceso de diseño, aunque
existen algunos diseñadores independientes que trabajan solos.
La unión de un buen diseño con una jerarquía bien elaborada de contenidos, aumenta la eficiencia de la web como
canal de comunicación e intercambio de datos, que brinda posibilidades como el contacto directo entre el productor
y el consumidor de contenidos.
El diseño web ha visto amplia aplicación en los sectores comerciales de Internet, especialmente en la World Wide
Web. A menudo la web se utiliza como medio de expresión plástica en sí. Artistas y creadores hacen de las páginas
en Internet un medio más para ofrecer sus producciones y utilizarlas como un canal más de difusión de su obra.
El diseño de páginas web es la construcción de documentos de hipertexto para su visualización en diferentes
navegadores. Así como asignarle una presentación para diferentes dispositivos de salida (en una pantalla de
computador, en papel, en un teléfono móvil, etc).
Estos documentos o páginas web pueden ser creadas: Creando archivos de texto en HTML, JavaScript, Python, entre
otros. Utilizando Script del lado del servidor, para generar la página web.
ETAPAS DEL DISEÑO WEB
Para el diseño de páginas web debemos tener en cuenta ocho etapas:
1. Objetivos: El proceso para establecer los objetivos, para definir el propósito del sitio web y el público objetivo.
Durante este proceso, es importante saber si la arquitectura de la página ya ha sido alineada y, en caso de que lo
esté, tener claro que está sujeta a cambios a medida que el proyecto evoluciona.

Material Recopilado por Lic. Suyapa del Cid

1
 Diseño WEB I

2. Investigación y análisis: Una investigación detallada garantiza que se dispone de todos los conocimientos
necesarios para ser competitivos. La investigación asegura que el sitio web considera todos los desarrollos actuales
en términos de tecnología, industria, comportamiento del usuario y expectativas del usuario (UX).

3. Arquitectura del sitio: Basándose en los objetivos y los resultados de la investigación, ahora se puede elaborar
una arquitectura de sitio exhaustiva. Estos resultados deben delinear cómo debe ser la navegación principal y
secundaria, las subpáginas, las categorías y otras secciones del sitio web. Lo ideal sería que la arquitectura del
sitio cambie después de que se tengan en cuenta los resultados de la investigación. Si por alguna razón ninguna
nueva percepción de la investigación y el análisis fue capaz de proporcionar o recomendar cambios en la
arquitectura del sitio, debería alarmarse ya que podría haber algo mal. Durante la arquitectura del sitio, se deben
responder las siguientes preguntas: ¿Cuáles son los objetivos y mensajes de cada página? ¿Qué acción se espera
del usuario en estas páginas?

4. Wireframing: El Wireframing es un paso importante en cualquier proceso ya que te permite definir la jerarquía
de la información. Después de que todos los resultados de la investigación estén disponibles y se pueda usar una
arquitectura de página clara como plantilla, ahora se debe crear un wireframe para cada página. El wireframing
es una de las fases más incomprendidas y difíciles durante todo el proceso de un Diseño de una página web.

5. Diseño y Maquetación: El diseño y la maquetación web es el proceso en el que el prototipo gráfico también
denominado «layout» «Look and Feel» (con los requisitos estructurales y estéticos definidos y aprobados en un
análisis inicial) pasa a transformase en código html, css y js (estándares web) para que los navegadores puedan
interpretarlo correctamente.

6. Especificaciones técnicas: Las Especificaciones Técnicas (Tech Specs) son un documento que consiste en una
serie de instrucciones para el desarrollador sobre cómo programar el sitio web. Por ejemplo, las fuentes, el
espaciado, el texto y el comportamiento de las imágenes se describen en detalle en una Especificación Técnica.
Las funciones y características deben ser mostradas y explicadas, así como el comportamiento de navegación,
animaciones, pop-ups y muchas más.

7. Programación: Ahora que todos los pasos anteriores se han realizado correctamente, nada se interpone en el
camino de la codificación de la página web. Una vez terminada, es clave realizar un control de calidad para
enumerar los errores y gestionar sus soluciones. Este proceso no debería tardar más de dos días ni debería tener
un costo adicional.

8. Migración y transición: Si se trata de un nuevo sitio web, todo el contenido tiene que ser migrado al nuevo
diseño. Para sitios más grandes, todo el contenido del sitio antiguo debe ser incluido ahora en el nuevo sitio. Uno
de los procesos más importantes dentro de la migración es el mapeo de URL. Para todos los URLs de páginas
antiguas, se debe establecer una redirección 301 a los nuevos URLs. Si se omite este punto de SEO, el nuevo sitio
web pierde toda la confianza SEO ganada con anterioridad y todas las clasificaciones de los motores de búsqueda
como Google.

FUNDAMENTOS DEL DISEÑO WEB

Un buen diseño web es aquel que considera dentro de su desarrollo tanto los elementos básicos del diseño gráfico (la
diagramación, el color, los gráficos y las fuentes) como los fundamentos técnicos (estructura, compatibilidad,
funcionalidad e interactividad) para crear tanto el impacto visual como la experiencia de usuario óptima para la
asimilación del contenido.
1. Estándares
El 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 por la W3C y en lo referente a la web

Material Recopilado por Lic. Suyapa del Cid

2
 Diseño WEB I

semántica. 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.
2. Accesibilidad
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. Para conseguir estos objetivos de accesibilidad
se han desarrollado pautas como las del W3C: Pautas de accesibilidad al contenido Web 1.0 WCAG.a
3. Web semántica
La web semántica, por otra parte, aboga por un uso lógico de los elementos según el significado para el que fueron
concebidas. Por ejemplo, se utilizará el elemento <P> para marcar párrafos, y <TABLE> para tabular datos (nunca
para disponer de manera visual los diferentes elementos del documento). En su última instancia, esto ha supuesto
una auténtica revolución en el diseño web puesto que apuesta por separar totalmente el contenido del documento de
la visualización.
De esta forma se utiliza el documento HTML únicamente para contener, organizar y estructurar la información y las
hojas de estilo CSS para indicar como se mostrará dicha información en los diferentes medios (como, por ejemplo,
un monitor de computadora, un teléfono móvil, impreso en papel, leída por un sintetizador de voz, etc.). Por lógica,
esta metodología beneficia enormemente la accesibilidad del documento.
También existen páginas dinámicas, las cuales permiten interacción entre la web y el visitante, proporcionándole
herramientas tales como buscadores, chat, foros, sistemas de encuestas, etc. y poseen de un panel de control de
administración de contenidos. Este permite crear, actualizar y administrar cantidades ilimitadas de contenido en la
misma.

CONCEPTOS BÁSICOS
Diseño web es una actividad que consiste en la planificación, diseño, implementación y mantenimiento de sitios web.
Abarca diferentes aspectos como el diseño gráfico web, diseño de interfaz y la experiencia de usuario, además de la
navegabilidad, interactividad, usabilidad, arquitectura de la información e interacción de medios, entre los que
podemos mencionar audio, texto, imagen, enlaces, video y la optimización de motores de búsqueda.
Sitio Web Un sitio web es en esencia una carta de presentación digital, que utilizan las empresas para comunicar y
transmitir su información, como parte de su estrategia de mercadeo. Técnicamente, se trata de una localización en la
World Wide Web, compuesta por documentos (páginas web) organizados jerárquicamente. Popularmente los
términos “página web” y “sitio web” se utilizan como sinónimos, aunque en realidad no lo son. Un sitio web puede
contener diversos materiales estáticos o dinámicos como: gráficos, textos, audio, vídeo, etc.
Página Web Documento realizado en HTML y que es parte de un sitio Web. Aparte del HTML se pueden utilizar
otros lenguajes complementarios como PHP, ASP, JavaScript... está compuesta por uno o varios documentos HTML
relacionados entre sí mediante hipervínculos (enlaces). Además, estos documentos pueden contener otros elementos
como pueden ser imágenes, sonidos, animaciones multimedia, aplicaciones...
W3C (World Wide Web Consortium) Es una sociedad internacional que trabaja para desarrollar los estándares de
la World Wide Web, los cuáles contienen las especificaciones técnicas y guías para mejorar la accesibilidad web, y
enriquecer de este modo la Internet. Esto ha hecho que con el tiempo, la Web sea cada vez más útil para los usuarios,
mejorando en gran manera las comunicaciones y el comercio electrónico. La Sociedad W3C está dirigida por Tim
Berners-Lee, el creador original de la Web y de las principales tecnologías sobre las que se basa (URL, HTTP,
HTML).

Material Recopilado por Lic. Suyapa del Cid

3
 Diseño WEB I

World Wide Web (WWW) Es un sistema de distribución de información basado en hipertexto o hipermedios
enlazados y accesibles a través de Internet. Con un navegador web, un usuario visualiza los sitios web compuesto
por páginas web, y navega a través de ellas usando hiperenlaces. La Web fue creada alrededor de 1989, y publicada
en 1992.
GUÍA DE TRABAJO
Indicaciones: En equipos de trabajo, resuelva las siguientes preguntas.

1. ¿Qué es diseño Web?

2. ¿Cuáles son los aspectos que abarca el diseño web?
3. ¿Qué es el diseño de páginas Web?
4. ¿Cuáles son las etapas del diseño web?
5. Defina brevemente cada una de las etapas del Diseño Web
6. ¿Cuáles son los fundamentos del diseño web?
7. Defina brevemente cada uno de los fundamentos del Diseño Web
8. ¿Qué es un sitio Web?
9. ¿Qué es página Web?
10. ¿Qué es W3C?
11. ¿Qué es www?

HTML
Es el lenguaje que se emplea para el desarrollo de páginas de internet. Este lenguaje está constituido de elementos
que el navegador interpreta y las despliega en la pantalla de acuerdo a su objetivo. Veremos que hay elementos para
disponer imágenes sobre una página, hipervínculos que nos permiten dirigirnos a otra página, listas, tablas para
tabular datos, etc.
HTML (HyperText Markup Language) Significa “Lenguaje de Marcado de Hipertexto”, y se refiere al lenguaje
de marcado o codificación predominante para la elaboración de páginas web. Se utiliza para describir la estructura
y el contenido de la página web en forma de texto y para complementarlo con otros objetos (como imágenes).
El HTML consta de una serie de elementos que estructuran el texto y son presentados en forma de hipertexto por
agente de usuario o navegadores. Esto se puede hacer con un simple editor de textos (debe guardarse como texto
plano, sin ningún tipo de formato y con extensión .html o .htm).
Para poder crear una página HTML se requiere un simple editor de texto y un navegador de internet (Google Chrome,
FireFox, etc.), emplearemos el navegador que en este preciso momento está utilizando.

Estructura interna de una página HTML

Las instrucciones HTML están encerradas entre los caracteres: < y >. Muchos elementos HTML requieren una marca
de comienzo y otra de finalización. Todo aquello que está fuera de las marcas del lenguaje se imprime en la pantalla
(dentro del navegador).
La estructura básica de una página HTML es:
Una página HTML es un archivo que generalmente tiene como extensión los caracteres
html. Por ejemplo, podemos llamar a nuestra primera página con el nombre:
pagina1.html
Estos son los elementos básicos que toda página HTML debe llevar.

Material Recopilado por Lic. Suyapa del Cid

4
 Diseño WEB I

Si observamos toda página comienza con la marca:<html> y finaliza con la marca:</html>. Los fines de marcas
tienen el mismo nombre que el comienzo de marca, más el carácter /.
Una página HTML tiene dos secciones muy bien definidas que son: la cabecera, el cuerpo. Todo el texto que
dispongamos dentro del <body> aparece dentro del navegador tal cual lo hayamos escrito.

ETIQUETAS HTML Y ATRIBUTOS

<br> Salto de línea
Todo el texto que disponemos en el cuerpo de la página aparece en la misma línea, no importa si cuando escribimos
la página disponemos cada palabra en una línea distinta (es decir un navegador no tiene en cuenta la tecla ENTER).
Para indicarle al navegador que queremos que continúe en la próxima línea debemos hacerlo con el elemento HTML
<br>. Cuando aparece la marca <br> el navegador continúa con el texto en la línea siguiente. Es uno de los pocos
elementos HTML que no tiene marca de cierre.

<p> Párrafo
Un párrafo es una oración o conjunto de oraciones referentes a un mismo tema. Todo lo que encerremos entre las
marcas <p> y </p> aparecerá separado por un espacio con respecto al próximo párrafo. Dentro de un párrafo puede
haber saltos de línea <br>.

TRABAJOS A REALIZAR:

1) GUÍA DE ESTUDIO Valor ______

Indicaciones: Leer el contenido anterior, luego responder correctamente cada una de las siguientes preguntas el en
el cuaderno.

HTML
1. ¿Qué significan las Siglas HTML?
2. ¿Qué es HTML?
3. ¿Cuál es la estructura básica de HTML?
4. ¿Cuál es la extensión con que se guardan los archivos HTML?
5. ¿Cuáles son las etiquetas con que inicia y finaliza una página HTML?
6. ¿Cuáles son los caracteres utilizados para escribir las instrucciones en HTML?
7. ¿Cuál es el carácter utilizado para el cierre de las etiquetas en HTML?
8. ¿Para qué sirve la etiqueta <br>?
9. ¿Para qué sirve la etiqueta <p> </p>?

Material Recopilado por Lic. Suyapa del Cid

5
 Diseño WEB I

2) EJERCICIOS PRÁCTICOS Valor ______

Indicaciones:
• Crear una carpeta de la asignatura en tu unidad local, virtual o extraíble: Diseño WEB I, dentro de esta carpeta
crea una carpeta y la nombra I Parcial, guarda cada uno de los ejercicios de forma ordenada según se vayan
desarrollando, de forma ascendente, por ejemplo: (1. Ejer1 Estructura Basica_Suyapa del Cid)

• Utilizando el editor Bloc de Notas de tu computadora realizar los siguientes ejercicios prácticos.
• Utiliza tu navegador (Google Chrome) de tu computadora para que muestres la salida de cada uno de los
ejercicios resueltos.

• Ejercicios a desarrollar:

1. Ejercicio 1: Utiliza el bloc de notas escribe este código como se visualiza en el

ejemplo, guarda el archivo con extensión .html en la carpeta correspondiente,
visualiza en el navegador.

2. Crear una página que contenga su nombre y apellido, utiliza las etiquetas básicas para realizar el ejercicio.
La salida en el navegador debe ser su nombre y apellido.

3. Crear una página que muestre los nombres de 5 Compañeros, uno en cada línea.

4. Crear una página que muestre 4 términos con su definición (utiliza los términos de este manual).

Material Recopilado por Lic. Suyapa del Cid

6