DISEÑO

WEB
UNIDAD 03
Creación de un sitio web
Maquetación, creación y publicación
de un sitio web

PROF. MAURO NUÑEZ

mauronu@gmail.com
Etapas del Proceso de Diseño

Continuando con el material del unidad 03

ya hemos revisado todas las etapas del
proceso de diseño para la creación de un
sitio web.
Etapas del Proceso de Diseño

Vale aclarar que estas etapas si bien están

definidas como un proceso lineal puede
que en algunos casos se retroceda de etapa
para realizar ajustes o se trabaje en paralelo
en dos etapas diferentes para poder optimizar
tiempos.
Etapas del Proceso de Diseño

Es importante tener en cuenta que

ningún proceso de diseño web suele estar
100% finalizado al terminar el sitio web,
suele suceder que con el uso los objetivos
cambien, requiera de rediseño para actualizar
según nuevas tendencias, se sumen nuevas
secciones o herramientas, se contemplen
nuevos contenidos. Si bien se finalizan los
proyectos, el producto final es dinámico,
como lo es el entorno, la tecnología y los usuarios
y puede requerir de nuevos proyectos para su
rediseño, su actualización, etc.-
Etapas del Proceso de Diseño

Las metodologías ágiles permiten adaptarse

también a esta dinámica y avanzar sobre
aspectos más seguros dentro del proceso.
Permite interactuar con el equipo o con el
cliente de manera más fluida y resolver
problemas y realizar ajustes de manera eficiente
sin tener una pérdida importante de recursos
y tiempos. Es un proceso de validación continua,
cada etapa del proceso se revisa y aprueba con
las partes interesadas del proyecto y así
avanzar sobre seguro.
Esto nos permite por ejemplo poder hacer un prototipo
quizás de una parte sola de un proyecto y hacer un proceso
de esa parte unicamente y en paralelo poder ir trabajando
con otras. Esto depende siempre de la naturaleza y
necesidades del cliente.
Etapas del Proceso de Diseño

En nuestro curso se toma de referencia sitios web de una

complejida baja o media para poder tener de referencia y
poder avanzar con conceptos necesarios para comprender
el proceso. de diseño.
Etapas del Proceso de Diseño

Ahora sí, revisaremos la última etapa de...

Maquetación, creación y
publicación de un sitio web
Maquetación, creación y publicación de una web

Para poder comprender mejor

los aspectos técnicos de esta etapa
y poner en común algunos conceptos
vamos a hacer un repaso general
sobre la internet y la www...
Maquetación, creación y publicación de una web

¿Qué es internet?
Internet es una red informática descen-
tralizada, que para permitir la conexión
entre computadoras opera a través de un
protocolo de comunicaciones que se lo
conoce como TCP/IP (Transmision
Control Protocol, Internet Protocol).
Este es el idioma común para que los dis-
positivos conectadosa la red se entien-
dan entre sí.
Maquetación, creación y publicación de una web

¿Qué es internet?
En palabras sencillas, la Internet es la “red
de redes” ya que no solo nos permite in-
terconectar computadoras, sino también,
redes más pequeñas de computadoras
entre sí. Una red de computadoras es un
conjunto de máquinas que se comunican a
través de algún medio (cable coaxial, fibra
óptica, líneas telefónicas, etc.) con el
objeto de compartir recursos.
De esta manera, Internet sirve de enlace
entre redes más pequeñas y permite am-
pliar su cobertura al hacerlas parte de una
"red global".
Etapas del Proceso
Maquetación, de yDiseño
creación publicación de una web

¿Qué es internet?
Podemos ampliar sobre la historia y el con-
cepto de Internet a través del siguiente video:

http://www.youtube.com/watch?v=Xtaf56yWA-A

Si bien el video no es nuevo, se explica de

manera sintética la historia de internet y permi-
te tener una noción más cabal del concepto.
Maquetación, creación y publicación de una web

¿Qué es la www?
La World Wide Web (WWW) o Red Informá-
tica Mundial es un SISTEMA de distribución
de información basado en hipertexto enlaza-
dos y accesibles a través de Internet.
Con un navegador web, un usuario visualiza
sitios web compuestos de páginas web que
pueden contener textos, imágenes, vídeos u
otros contenidos multimedia, y navega a
través de ellas usando hiper enlaces.
Etapas del Proceso
Maquetación, de yDiseño
creación publicación de una web

¿Qué es la www?
¿Cómo funciona?
El proceso se da por iniciado cuando un
usuario ingresa un dominio web o dirección
(URL) en su navegador o cuando sigue un
enlace de hipertexto incluido en una página.
El navegador entonces impulsa una
serie de comunicaciones para obtener los
datos de la página solicitada y, de esta forma,
visualizarla.

Pasos...
Etapas del Proceso
Contenido
Maquetación, de yDiseño
creación publicación de una web

¿Qué es la www?
Paso 01
El primer paso que se lleva adelante en la
www consiste en traducir el nombre de un
dominio web o URL a una dirección IP,
usando la base de datos conocida como
DNS. La dirección IP permite conectar al ser-
vidor web en donde se encuentran los recur-
sos del sitio web y así hacer la transferencia
de los paquetes de datos.
Etapas del Proceso
Contenido
Maquetación, de yDiseño
creación publicación de una web

¿Qué es la www?
Paso 02
El siguiente paso es enviar una petición HTTP
al servidor Web solicitando el recurso. En el
caso de una página web típica, primero se
solicita el texto HTML y luego es inmediata-
mente analizado por el navegador, el cual
después, hace peticiones adicionales para los
gráficos y otros ficheros que forman parte de
la página.
Etapas del Proceso
Contenido
Maquetación, de yDiseño
creación publicación de una web

¿Qué es la www?
Paso 03
Al recibir los ficheros solicitados desde el
servidor web, el navegador procesa la infor-
mación a través de su motor de renderizado
y muestra la página tal y como se describe en
el código HTML, el CSS y otros lenguajes
web. Al final se incorporan las imágenes y
otros recursos para reproducir la página que
ve el usuario en su pantalla.
Etapas del Proceso
Contenido
Maquetación, de yDiseño
creación publicación de una web

¿Qué es la www?
Glosario de términos:
URL: Localizador de Recursos Uniforme, más comúnmente denominado URL (sigla en
inglés de Uniform Resource Locator).
El URL es la cadena de caracteres con la cual se asigna una dirección única a cada uno de los
recursos de información disponibles en la Internet.
El URL de un recurso de información es su dirección en Internet, la cual permite que el
navegador la encuentre y la muestre de forma adecuada.

Dirección IP: Las direcciones IP (IP es un acrónimo para Internet Protocol) es una etiqueta
numérica única e irrepetible que identifica un dispositivo (habitualmente una computadora
que en este caso sería el servidor en donde alojamos nuestro sitio) conectada a una red que
corre el protocolo IP.

DNS: Domain Name System (en español: Sistema de Nombres de Dominio). Se encarga de
la asignación de nombres o dominios a direcciones IP. Traduce IP (ej. 198.51.100.16) difíciles de
recordar en nombres de dominios más amigables como por ejemplo youtube.com para que
sea más fácil utilizar y buscar.
Fuente:
https://nic.ar/sites/default/files/2021-06/Registro_de_Dominios_de_Internet-Aspectos_basicos.pdf
Etapas del Proceso
Contenido
Maquetación, de yDiseño
creación publicación de una web

¿Qué es la www?
Glosario de términos:
HTTP:
Hypertext Transfer Protocol o HTTP (en español Protocolo de Transferencia de Hipertexto)
es el protocolo usado en cada transacción de la World Wide Web.
HTTP define la sintaxis y la semántica que utilizan los elementos de software de la arquitec-
tura web para comunicarse.

Motor de renderizado:
Un motor de renderizado es un componente de software básico de todos los principales na-
vegadores web. La función principal de un motor de navegación es transformar los docu-
mentos HTML y otros recursos de una página web en una representación visual interactiva
en el dispositivo del usuario.
Etapas del Proceso
Maquetación, de yDiseño
creación publicación de una web

Ahora veremos el concepto de

Modelo CLIENTE/SERVIDOR
Etapas del Proceso
Maquetación, de yDiseño
creación publicación de una web

Cliente/Servidor
El modelo cliente servidor dentro de la informática son las tareas que llevan a cabo los pro-
veedores de recursos o servicios llamados Servidores, en donde se encuentran alojados los
archivos de un sitio web y los demandantes que hacen peticiones al servidor para que este le
envíe los recursos solicitados llamados Clientes.
Resumiendo un cliente (software como por ejemplo los navegadores) realiza peticiones al
servidor quién le da respuestas. Esto sucede a través de internet y dentro del sistema de la
www.

P
Re etic
sp ión
ue
CLIENTE sta

Petición
Respuesta
INTERNET Petición
Respuesta

CLIENTE ón
tici esta
Pe spu
SERVIDOR
Re

CLIENTE
Etapas del Proceso
Maquetación, de yDiseño
creación publicación de una web

Clientes
Del lado del cliente hay varios tipos de aplicaciones que se utilizan para conectar y realizar
peticiones al servidor e interactuar con sus re
cursos.

Cliente navegador web:

Uno de los más utilizados, es quien solicita los recursos al servidor y a través de su
motor de renderizado traduce esos recursos en una interfaz gráfica web
que le permite al usuario interactuar con el contenido. Ejemplo: Chrome, Mozila Firefox,
Safari, etc.

Cliente correo electrónico:

Es un programa o aplicación usado para leer y enviar mensajes de correo electrónico.
Los mismos se encuentran alojados en el servidor y a través de este también se hacen los envíos.
Ejemplos: Outlook, Mozila Thunderbird, PostBox, etc.-

Cliente FTP:
Un cliente FTP emplea el FTP (File Transfer Protocol o Protocolo de Transferencia de Archivos)
para conectarse a un servidor y así transferir archivos tanto para subirlos al servidor como para
descargarlos.
Etapas del Proceso
Contenido
Maquetación, de yDiseño
creación publicación de una web

Pero... ¿Qué subimos al servidor y como lo hacemos?

CLIENTE FTP
Etapas del Proceso
Contenido
Maquetación, de yDiseño
creación publicación de una web

Cliente FTP
Muy sencillo, subimos todos los archivos que conforman nuestro sitio web, html, imágenes,
documentos, animaciones, sonidos, videos, carpetas, etc., que creamos, modificamos o utili-
zamos en el Proceso de Maquetación Web en nuestra computadora.
Esto se hace a través de un cliente FTP, es decir un software que se encarga de conectar
nuestro equipo con el servidor web para poder subir o descargar archivos.
Dependiendo si nuestro sitio web es Estático o Dinámico la conexiones con bases de datos
dentro del servidor y los archivos a subir pueden variar. Ampliaremos este punto en la próxi-
ma unidad.
Etapas del Proceso
Contenido
Maquetación, de yDiseño
creación publicación de una web

Entonces... ya hemos hecho el repaso por todos estos conceptos

que nos serviran de base para poder comprender mejor la última etapa
del proceso de creación de un sitio web:

Maquetación, creación y
publicación de un sitio web
Etapas del Proceso
Contenido
Maquetación, de yDiseño
creación publicación de una web

Como hemos visto en la parte 1 del material de esta unidad los puntos
a tener en cuenta en esta etapas son:

- Registro de dominio.
- Contratación de servicio de Hosting.
- Preparación de archivos para comenzar con la
Maquetación del Sitio Web.
- Proceso de Maquetación Web.
- Revisión y Carga Final de Contenidos
del Sitio Web.
- Subir los archivos del Sitio web al
servidor Web o publicar.

Comenzemos por el primer punto...

Etapas del Proceso
Maquetación, de yDiseño
creación publicación de una web

Registro de dominio web

El registro de dominio consiste en consultar la disposición de un dominio web, reservarlo y/o
registrarlo para que no lo pueda usar más nadie que no seas tu o tu cliente. Una vez que
contamos con el dominio debemos realizar lo que se llama delegación de DNS que nos per-
mitirá traducir ese dominio a una dirección IP que nos conectará con el servidor en donde se
encuentra alojado nuestro sitio web.
Estos DNS son otorgados por la empresa de servicio de hosting en donde contratamos un
espacio en su servidor para poder alojar nuestra web. La delegación se lleva adelante con-
tando con este DNS dentro del espacio en donde se registró el dominio.
La reserva o registro de dominio suele durar entre 1 año y 10 años, periodo en el cual es ne-
cesario realizar el proceso de renovación del dominio registrado.
Por lo general el registro y la renovación de los dominios web tienen un costo cuyo monto
depende del ente o empresa que gestiona los dominios web ya veremos este punto más en
detalle.
Etapas del Proceso
Maquetación, de yDiseño
creación publicación de una web

Registro de dominio web

Características a tener en cuenta:
A la hora de decidir el nombre de un dominio para un sitio web se tiene que tener en cuenta
que hay algunas limitaciones. En el caso de los .com, solo pueden constar de 67 caracteres,
incluyendo la extension .com. Estos caracteres pueden ser números, letras del alfabeto
inglés, (no utilizar caracteres latinos como la ñ, ni tildes...), y guiones medios, aunque los
guiones medios no pueden usarse ni al principio ni al final del nombre, y tampoco esta per-
mitido usar dos guiones consecutivos.

Existen bases de datos de los NIC, (Network Information Center), que mantienen bases de
datos públicas (WHOIS) con los nombres de los dominios ya registrados. Para poder ver la
disponibilidad de ciertos dominios, se puede hacer a través de los mismos sitios web en
donde se realizan los trámites de registro, quienes se conectan con las bases de datos de
dominios registrados para procesar la consulta.
Ejemplo de consultas de disponibilidad de dominios .ar:

https://nic.ar/verificar-dominio
Etapas del Proceso
Maquetación, de yDiseño
creación publicación de una web

Tipos de dominios web

Existen dos tipos generales de dominios, los dominios genéricos (por ejemplo los .com ,.org,
.net, .aero, etc) y los dominios territoriales (ejemplo .ar, .es, .br, .cl etc.).
Los dominios territoriales toman también las extensiones de los dominios genéricos ya que
los mismos pueden identificar la temática o tipo de sitio web al que hace referencia (Ejem-
plo: .com.ar, .gob.ar, .edu.ar etc.-)

La diferencia entre estos es que los dominios genéricos no son controlados ni gestionados
por ningún país, sino por organismos gestores de Internet (ICANN) e internacionales. En
cambio los dominios territoriales pertenecen a un país (un dominio por país) y son manteni-
dos por los organismos competentes de cada pais, con sus propias políticas, garantías y re-
gulaciones.

En el caso de Argentina, el ente regulador es Nic Argentina, Dirección Nacional del Registro
de Dominios de Internet, perteneciente a la Secretaría Legal y Técnica de la Presidencia de
la Nación. A través de su sitio web (https://nic.ar/) se realizan todos los
trámites relacionados con los dominios .ar. En el siguiente link se encuentra un manual en
donde se explica los aspectos básicos para el registro de dominios en nic.ar

https://nic.ar/sites/default/files/2021-06/Registro_de_Dominios_de_Internet-Aspectos_basicos.pdf
Etapas del Proceso
Maquetación, de yDiseño
creación publicación de una web

Tipos de dominios web

En el caso de los dominios .ar el registro es por un año y se debe renovar anualmente, y tiene
un arancel anual que van entre $270 y $540 (Valores en 2021) dependiendo el tipo de domi-
nio a registrar.

http://nic.ar/es/dominios/dominios_y_aranceles

Dominios Especiales:
Dentro de nic.ar se pueden registrar dominios .ar, .com.ar y .net.ar. Luego existen dominios
especiales como .edu.ar o .gob.ar que se deben registrar desde instituciones o espacios es-
peciales que cumplan con ciertos requisitos.
Etapas del Proceso
Maquetación, de yDiseño
creación publicación de una web

Tipos de dominios web

En cuanto al registro de dominios genéricos, se realizan a través de sitios web que brindan
el servicio de registro de estos tipos de dominios. El registro tiene un costo que ronda los 13
dólares anuales aproximadamente. Los costos varían según la empresa que brinda el servi-
cio. Ejemplo:

https://www.godaddy.com/es-es/dominios/dominios-libres

Muchas veces también, las empresas que se dedican a brindar servicio de hosting, suelen
ofrecer el servicio de registro de dominios genéricos. El costo del servicio depende de la res-
ponsabilidad que asuma la empresa de hosting con respecto al proceso de registración y
renovación del dominio y/o si se compra junto algún paquete de hosting. Ejemplo:

https://donweb.com/es-ar/registro-de-dominios
Etapas del Proceso
Maquetación, de yDiseño
creación publicación de una web

Contratación de servicio de Hosting

El hosting (en español Hospedaje) consiste en el espacio y servicio de un servidor web, que
vamos a requerir para subir nuestro sitio y ponerlo “On‐line”.
Como diseñadores pueden brindar el servicio de asesoramiento al cliente sobre hosting a
contratar, o bien, ustedes vender el hosting. ¿Cómo?
En el caso de vender hosting, la forma más común es contratando un servicio de Reseller
(Servicio de reventa de hosting). A estos servicios lo suelen brindar empresas de hosting
que no solo venden espacio en servidores para un sitio web solo, sino que ofrece también un
servicio llamado reseller, que nos permite tener la oportunidad de manejar a través de un
panel de control, las cuentas de varios sitios web que nosotros querramos o necesitemos. Es
una buena opción si tenemos varios clientes que se quieren desentender del asunto y están
dispuesto a pagar lo que significa el servicio. Ejemplos:

https://donweb.com/es-ar/hosting-para-revendedores

https://wiroos.com/argentina/planes-reseller.html
Etapas del Proceso
Maquetación, de yDiseño
creación publicación de una web

Contratación de servicio de Hosting

Cómo elegir un hosting
A nivel general debemos tener en claro que vamos a necesitar en nuestro hosting a partir de
nuestro sitio web. Si se va a utilizar algún lenguaje en particular para poder interactuar con
las bases de datos, esto puede determinar que tipo de servidor web necesitamos (LINUX
para PHP o Windows para ASP por ejemplo).
El espacio en el servidor también es importante ya que nos va a definir que tan pesado
puede ser nuestro sitio web y los recursos del mismo.
Por otro lados el ancho de banda o transferencia ya que suele ser limitado por mes. Es la
cantidad de transferencias en cuanto a los pesos de los archivos que puedo llevar adelante
en un servidor. Esto depende del peso de la web y de la cantidad de usuarios y sesiones que
pueden llegar a navegar mi web.
La velocidad de transferencia también es importante por que va determinar si la navegación
o carga de archivos será lenta o rápida.
Todo lo referido a seguridad también es fundamental por ejemplo el sistema de backup con
el que cuente el servicio de hosting.
El soporte técnico es muy importante ya que la respuesta a las inquietudes o necesidades
que puedan surgir puede ser neurálgico en el desarrollo de un sitio web.
Etapas del Proceso
Maquetación, de yDiseño
creación publicación de una web

Contratación de servicio de Hosting

Cómo elegir un hosting
Por supuesto también el precio o costo es importante tener en cuenta.
No solo para buscar el más barato o gratuito, sino también por que suele ser un indicio del
tipo de servicio que podamos llegar a tener al respecto.
Los hosting gratuitos suelen ser una buena alternativa para realizar pruebas o prácticas en
relación a servidores pero no siempre son muy confiables, sobre todo por que al no tener un
compromiso asumido a partir del pago del servicio no hay mucho que reclamar cuando se
trata de servicio, soporte técnico, seguridad o en algo mucho más básico como la continui-
dad del hosting. Suelen tener varias limitaciones y en algunos casos utilizan la publicidad
dentro de nuestros sitios web para poder sostener su servicio gratuito.
Etapas del Proceso
Maquetación, de yDiseño
creación publicación de una web

Preparación de archivos
¿Que archivos se suben al servidor?
En el proceso de maquetación o de escritura del código HTML y CSS (en el caso de trabajar
en un sitio web a medida), o de configuración y armado de una web a partir de una plantilla
(en el caso de usar un CMS por ejemplo Wordpress) se utilizan recursos que son usados
como parte de la interfaz web y como contenido del sitio web. Estos recursos incluyen imá-
genes (archivos .jpg .png .svg entre otros) audios (archivos .mp3) o videos y/o animaciones
(.gif para las animaciones o .mp4 para los videos). Todos estos archivos se llaman desde el
código html que a su vez también es un archivo (archivo .html) que se vale del lenguaje CSS
para definir como va a presentar el contenido (si el css no se encuentra definido desde el
mismo archivo .html entonces se arma un archivo nuevo también .css).
A su vez estas páginas se relacionan o interactuan con otras páginas html que hacen a más
archivos .html que conforman el sitio web.
En el caso de trabajar con algún lenguaje de programación como por ejemplo javascript (ar-
chivos .js) o php (archivos .php) también se son necesarios su escritura y para luego ser subi-
dos o actualizados en el servidor.

Todos esto recursos tienen características especiales que requieren de un tratamiento parti-
cular para luego poder ser utilizados en la web y ser subido en ese caso al servidor.
Etapas del Proceso
Maquetación, de yDiseño
creación publicación de una web

Preparación de archivos
¿Que archivos se suben al servidor?
En el caso de las imágenes por ejemplo solo algunas extensiones son permitidas utilizar en
las web. En el siguiente post de Laura Chuburu se explica resumidamente los tipos de archi-
vos más utilizados en la web y sus características:

https://www.laurachuburu.com.ar/tutoriales/formatos-de-imagen-para-web.php

Es importante la optimización de las imágenes y de los archivos multimedia ya que van a

permitir utilizar un peso justo para la web y no ocupar espacio innecesario en el servidor y
provocar que la web funcione de manera lenta intentando descargar archivos demasiados
pesados. Algunos post sobre optimización de imágenes para stios web:

https://www.40defiebre.com/optimizar-imagenes-web

https://edem.eu/optimizar-imagenes-para-web/

https://blogthinkbig.com/optimizar-imagenes-para-la-web
Etapas del Proceso
Maquetación, de yDiseño
creación publicación de una web

Preparación de archivos
¿Qué nombre ponerle a mis archivos para la web?
Los nombres son importante ya que o no se permite el uso de algunas caracteres o por que
el nombre también nos permite identificar el archivo y eso es importante para el momento
del SEO o del posicionamiento de la web en los buscadores. Por ejemplo si mi marca es Co-
ca-Cola y el archivo de imagen de mi logotipo solo se llama logo.png no tiene el mismo im-
pacto para el posicionamiento web que si le pongo logo-coca-cola.png.
Ahora que buenas prácticas podemos tener en cuenta al momento de poner nombres a los
archivos de nuestra web:
No usar caracteres latinos como ñ o tildes. No dejar espacios en blanco en los nombres por
que en ese caso los rellan con 20% y perdemos el sentido de las palabras que ayudan al po-
sicionamiento web. Ejemplo si ponemos el siguiente nombre logo coca cola.png se traduce
de la siguiente manera logo20%coca20%cola.png y ya lo toma como una palabra sin senti-
do. En el caso de separar palabras utilizamos el guión. No es necesario utilizar mayúsculas
para los nombres de los archivos ya que eso no influye y en algunos casos genera proble-
mas.
Estas recomendaciones no solo aplican a los nombres de archivos sino también a los nom-
bres de las carpetas que conforman un sitio web.
Etapas del Proceso
Maquetación, de yDiseño
creación publicación de una web

Por el momento hemos avanzado dentro de la etapa de Maquetación, creación y

publicación de un sitio web hasta la instancia previa de maquetación de un sitio web o escri-
tura de códigos del mismo. Aquí se presenta un bifurcación muy importante según la
manera en que se leva adelante ese proceso de maquetación. Esta instancia es la que revisa-
remos en el próximo material.
Muchas Gracias :)