Diseño

Web _

Conceptos Principales
Sitios / Páginas Web
A menudo se confunden los términos “sitio” y “página”.
Un sitio web se refiere siempre a la totalidad del contenido albergado
en un servidor (host), mientras que una página es el contenido
individual que muestra el navegador en el momento, es decir, una
página web en específico.

La página principal de un sitio web se denomina página de inicio, home

o portal. El papel de un sitio web es otorgar identidad, funcionalidad,
presencia y comunicación. El mantenimiento de un sitio web implica
la atención hacia su estructura, diseño, funcionalidad y contenido; lo
que no debe faltarle nunca es la calidad de contenido e información y
un sistema de orientación intuitivo para el usuario.
Diseño Web
El primer éxito de una página de inicio es responder a dos cuestiones:
¿Dónde estoy?
¿Qué hace este sitio?

Otras misiones que debe cumplir la página de inicio son:

● Presentar el nombre y el logo.

● Ofrecer una idea clara del esquema de navegación en el sitio.
● Ofrecer acceso directo a las funcionalidades más comúnmente usadas del sitio.
● Anunciar las novedades o promociones.
● Proporcionar una herramienta de búsqueda.
Componentes Diseño Web

● Funcionalidad / Usabilidad: La usabilidad permite que el usuario

logre sus objetivos concretos con efectividad, eficiencia y satisfacción
dentro del sitio. Un sitio web con una buena usabilidad es aquel que
permite una interacción sencilla, intuitiva, agradable y segura.

● Interactividad: Refiere a la interacción entre el usuario y el sitio,

mediante diferentes recursos gráficos, cinéticos, audiovisuales. La
interactividad no implica necesariamente una animación compleja, es
posible lograr interacción mediante efectos pequeños, pero efectivos

https://blog.aulaformativa.com/formas-usuales-de-lograr-interactividad-en-un-sitio-web/
Componentes Diseño Web
Componentes Diseño Web
Componentes Diseño Web
● Interfaz: Es el conjunto de elementos gráficos, cinéticos y
audiovisuales del sitio web, que permiten al usuario realizar acciones
sobre el mismo. Se considera parte de la interfaz a sus elementos de
identificación, de navegación, de contenidos y de acción. La interfaz
debe actuar en función de la Usabilidad del sitio y no como meros
“adornos visuales” utilizados para rellenar espacio. Su uso debe ser
adecuado para la experiencia de usuario que se desea ofrecer.

http://www.streambe.com/

http://smartgc.com.ar/
Tipos de Usuarios
Los conocimientos, procedencia, intereses y necesidades de los
usuarios cambiarán dependiendo de si es un usuario ocasional, que
requiere una introducción cuidadosa y estructurada, o si se trata de
un usuario experto que se sentirá “subestimado” si intuye cualquier
intento de paternalismo o, simplemente, de retrasar su acceso a la
información.

Un sitio web diseñado correctamente debería ser capaz de

acomodar distintos niveles de habilidad e intereses de los
usuarios.
Tipos de Usuarios
Principiantes y usuarios ocasionales:
Este tipo de usuario requiere una estructura sin ambigüedades y un
acceso fácil a visiones de conjunto que ilustren cómo se dispone la
información dentro del sitio web. Los principiantes tienden a
sentirse intimidados por menús de texto complejos, y si la página
principal no está dispuesta de forma clara y atractiva, desistirán
rápidamente

Los usuarios ocasionales prefieren páginas que aporten una visión

general o de conjunto y elementos gráficos o iconos que puedan
retener con facilidad, como forma de saber dónde se almacena la
información.
Tipos de Usuarios
Usuarios expertos:
Estos usuarios confían en obtener del sitio una información certera
y de forma rápida. Un usuario experto es generalmente impaciente
ante una multiplicidad de menús gráficos de baja densidad que
ofrecen pocas opciones a la vez. Tienen también objetivos
específicos en mente a la hora de consultar la web, y aprecian
los menús de texto detallados, motores de búsqueda ágiles y bien
diseñados que permitan una búsqueda y consulta rápida de los
resultados.
Dominio Web
El dominio web de un sitio es el equivalente a una dirección
física. Un navegador web necesita un nombre de dominio
para dirigirnos a un sitio web.

Un dominio de internet se forma a partir de dos elementos

principales. Por ejemplo, el nombre de dominio Se recomienda que el dominio sea:
instagram.com refiere al nombre del sitio web (Instagram) y
la extensión del dominio (.com). Cuando una empresa o una
● Breve
persona compra un dominio web, puede especificar a qué
● Fácil de pronunciar
servidor apunta el nombre de dominio. ● Fácil de escribir y recordar
● Asociado a un concepto
Dominio Web
Al considerarse como un dominio exclusivo, solo habrá
una empresa, compañía, organización o persona con dicho
nombre. Para asegurar esto, existen organizaciones
encargadas de los dominios en Internet, tales como
ICANN

Los registros de nombres de dominios son supervisados ​

por ICANN (Corporación de Internet para Nombres y
Números Asignados).
Esta organización especifica qué extensiones de dominios
están disponibles y mantiene una base de datos
centralizada de dónde apuntan los dominios web.
Servidor Web
Un servidor es una máquina física que aloja los archivos
y las bases de datos que conforman un sitio web y los
envía a los usuarios a través de Internet. El servidor es
una computadora más potente que las habituales y se
encuentra siempre encendida, para ser capaz de cumplir
con su función.

El servidor web es un software que forma parte del

servidor, se encarga de “despachar” el contenido de un
sitio web hacia el usuario.
Hosting
El hosting es un servicio en línea que permite publicar un
sitio o aplicación web en Internet.
Al adquirir un servicio de hosting, se “alquila” un espacio
en un servidor, en donde se almacenan todos los archivos
y datos necesarios para que
un sitio web funcione correctamente.

El proveedor de hosting es el responsable de mantener

el servidor en funcionamiento, protegerlo de ataques
maliciosos y transferir el contenido (texto, imágenes,
archivos) desde el servidor hacia los navegadores de los
usuarios.
Diseño Web Responsive
El diseño web responsive hace referencia
a un desarrollo web, que busca la correcta visualización
de una misma página, en
distintos dispositivos.

Actualmente, accedemos a sitios web desde

computadoras, tablets, smartphones. Por este motivo,
surge la necesidad de que los sitios se adapten a los
diferentes tamaños de dichos dispositivos.
Diseño Web Responsive
Se trata de redimensionar y colocar los elementos de la
página web de forma que se adapten al ancho de la pantalla
de cada dispositivo, permitiendo una correcta visualización y
una mejor experiencia
de usuario.

Existe un 61% de posibilidades de que un usuario móvil

abandone una web si no está optimizada para su dispositivo.
En caso de que el usuario tenga una experiencia positiva en
un sitio móvil optimizado, hay un 67% de posibilidades de
que este comience a usar tus servicios.
Diseño Web
FASES
https://www.youtube.com/watch?v=dRoCCmkR0-I&ab_channel=NataliaAbragan

TENDENCIAS
https://www.youtube.com/watch?v=zKitIltrV0s&ab_channel=JaviNiguez
 Tarea / Diseño Web
● Cada grupo deberá proponer el diseño de un sitio web de una temática de interés, pudiendo ser:
- Cine / series
- Música
- Deporte
- Tecnología

● Realizar un análisis de 2 sitios relacionados con la temática elegida por el grupo. El análisis deberá enfocarse en:
- Usabilidad
- Interactividad
- Interfaz
- Tipos de Usuarios

● Colocar análisis en una Presentación de diapositivas grupal con carátula: “Tarea - Diseño Web”, nombres de integrantes,
materia y curso
● Utilizar capturas de pantalla, imágenes, links, texto para mostrar el análisis
● Deben ser mínimo 3 diapositivas por alumno
● Entregar en Classroom (no se reciben las tareas por otro medio)

FECHA LÍMITE PARA ENTREGAR:

 Tarea / Entrega Sitio Web
● Diseñar de manera grupal, el sitio web utilizando la plataforma WIX
● Se deberá colocar el link del sitio dentro de la misma Presentación de diapositivas realizada para el análisis de la Tarea 7

● El sitio deberá contar con los siguientes contenidos:

(adaptar a cada temática)

- Presentación u objetivo del sitio (Visión, Historia o Nosotros. Podrá aparecer en la página de inicio o en una página
separada)

- Secciones de interés (colocar en categorías el contenido)

- Página de contacto / Redes Sociales

- Mínimo 5 imágenes (podrán funcionar de fondo o como una información en específico)

- Mínimo 3 videos (podrán funcionar de fondo o como una información en específico)

FECHA LÍMITE PARA ENTREGAR EL LINK DEL SITIO: Miércoles 18 de noviembre inclusive
HTML
HTML es un lenguaje usado para describir sitios
web, no es un lenguaje de programación, sino un
lenguaje descriptivo. Posee una serie de etiquetas
que el navegador interpretará para mostrar
distintos contenidos,
a través de la pantalla.

HTML: Hyper Text Markup Language:

Lenguaje de Marcado de Hipertexto
Hipertexto
Hace referencia al sistema que permite enlazar
fragmentos de textos entre sí, lo que permite al
usuario acceder a la información a través de los
ítems relacionados en vez de hacerlo de forma
secuencial.

En internet, existen diversos links o enlaces de

hipertexto en las palabras que estén relacionadas
con el tema del sitio, lo que permite al lector o
usuario tener una lectura más activa, pudiendo
elegir la información a la cual prefiere acceder.
HTML
El HTML provee la estructura de un
sitio web.
El navegador no muestra las etiquetas, pero las
lee y utiliza para determinar cómo se va a
desplegar el contenido.
HTML
Etiquetas principales
<!DOCTYPE> Versión de (X) HTML (Indica al
navegador información sobre el documento
HTML)

<html>
Documento HTML (Todo el contenido de cada
página aparece dentro de esta etiqueta)
</html>

<head> Información de la página (título, ícono,

link de hojas CSS)

<body> Contenido visible de la página

Etiquetas principales
<meta> Meta data (idioma de la página, autor de la página)
No es contenido visible, sino información para el navegador

<title> Título de la página (pestaña)

<link /> Se cargan recursos (no visibles) externos en la página (hojas CSS, ícono pestaña)

<a> Enlaces hacia otras páginas o archivos

<style> Recursos de estilo (código hojas CSS)

Meta Tags
Los meta tags o meta etiquetas se insertan en la
cabecera de la página, entre las etiquetas
<head></head>.

Pueden ser informativos, para los buscadores y

usuarios, indicando el tipo de contenido de la
web, sus palabras claves, etc.
Los meta tags solo se ven a través del código
fuente, un meta tag no hace variar la apariencia
de un sitio web
<!DOCTYPE>
Es el primer elemento que debe incluirse en un
documento HTML

La declaración del <!DOCTYPE> ayuda a los

navegadores a mostrar el sitio web de manera
correcta
CSS
Es un lenguaje de hojas de estilos creado
para controlar el aspecto visual de los sitios
web

● CSS son las siglas de Cascading Style

Sheets (Hojas de Estilo en Cascada)
● Los estilos definen cómo se van a mostrar
los elementos HTML
● HTML proporciona la estructura y CSS
proporciona todos los elementos visuales
de un sitio web
CSS
Sintaxis CSS
Regla: cada uno de los estilos que componen una hoja de
estilos CSS.

Selector: indica el elemento o elementos HTML a los que se

aplica la regla CSS.

Declaración: especifica los estilos que se aplican a los

elementos. Está compuesta por una o más propiedades CSS.

Propiedad: característica que se modifica en el elemento

seleccionado, como por ejemplo su tamaño de letra, su color
de fondo, etc.